Image to Base64

Convert an image to a Base64 data URL, with a ready-to-paste CSS snippet.

Your files stay on your device — nothing is uploaded.

How to convert an image to Base64

  1. Drop your image on the box above, or click to choose it.
  2. The Base64 data URL appears in the box.
  3. Copy the data URL, or copy the ready CSS snippet.
  4. Paste it into your HTML or CSS.

What a data URL is

A data URL holds the whole image as text, right inside your code. Instead of pointing to a separate image file, the browser reads the picture from the text itself. This lets you embed a small icon or logo directly in an HTML or CSS file, so there is one less file for the browser to fetch.

Base64 is bigger, so keep it small

Turning an image into Base64 text makes it about a third larger than the original file. That is fine for a tiny icon, but a poor idea for a big photo, since it bloats your code and slows the page. Use data URLs for small graphics like icons, logos, and simple shapes, and keep large images as normal files.

The ready CSS snippet

The tool also gives you a CSS background line with the data URL already in place. Paste it into a stylesheet to show the image as a background with no separate file. This is handy for a small repeating pattern or an icon that you want bundled with your styles.

FAQ

When should I use a data URL?

For small images like icons and logos, where saving a separate file request is worth the extra size. Avoid it for large photos.

Why is the Base64 longer than my file?

Base64 stores binary data as text using a limited set of characters, which adds about a third to the size. That is the normal cost of embedding an image as text.

Does it work with SVG and PNG?

Yes. It works with any image your browser can read, including PNG, JPG, WebP, GIF, and SVG.

Can I paste this straight into HTML?

Yes. Put the data URL in the src of an img tag, or use the CSS snippet for a background. Both work with no separate file.

Is my image uploaded?

No. The image is read in your browser and nothing is sent or saved.

What is a data URI?

A data URI packs the whole image into one line of text that a browser can show directly, with no separate image file. The tool gives you the base64 string ready to use this way in HTML or CSS.