Image to Base64

Convert an image file into a Base64 data URI you can paste directly into CSS or HTML.

image-to-base64.js
Click or drag an image here

Upload an image and this tool reads it as a Base64-encoded data URI — the same format used for inline images in CSS (background-image: url(...)) or HTML (). This avoids a separate image request, which can be useful for small icons or when you need a single self-contained file.

How to use it

  1. Upload an image using the box above.
  2. The Base64 data URI appears in the output box.
  3. Click Copy to copy the full string.
  4. Paste it directly into your CSS or HTML as the image source.

Frequently asked questions

Is embedding images as Base64 always a good idea?

It's best for small images like icons — for large photos, a Base64 string can bloat your HTML/CSS file size more than just linking to the image normally.

Does the output include the data:image/... prefix?

Yes, the full string includes the MIME type prefix so you can paste it directly as a valid src or url() value.

Will this work for any image type?

Yes — PNG, JPG, GIF, WebP and SVG files are all supported.