Image to Base64

How it works

1. 1

   Add an image

   Drop in any PNG, JPG, WebP, GIF, SVG or AVIF file or icon.

2. 2

   Copy the code

   Grab the full data URI, the raw Base64 string, a CSS background line or an HTML img tag.

3. 3

   Paste it in

   Use it inline in your HTML, CSS or JSON. Nothing is uploaded; it is all encoded locally.

Frequently asked questions

What is a Base64 image or data URI?

Base64 turns an image into a plain text string. Wrapped as a data URI (data:image/png;base64,…), you can paste it straight into HTML or CSS so the image loads without a separate file request.

Are my images uploaded to encode them?

No. The image is read and encoded entirely on your own device. It never leaves your computer and no copies are kept anywhere.

When should I inline an image as Base64?

It works best for small assets like icons, logos and email graphics, where saving an extra request matters. For large photos a normal image file is smaller and loads faster, since Base64 adds about a third to the size.

Which formats can I convert to Base64?

Any image the browser can read: PNG, JPG, WebP, GIF, SVG and AVIF. The data URI keeps the original type so it renders correctly wherever you paste it.

How do I use the Base64 string in CSS?

Copy the CSS background snippet and drop it into a rule, for example background-image: url("data:image/png;base64,…"). The tool builds that line for you ready to paste.