Image to Base64
Encode any image as a Base64 data URI ready to paste into HTML, CSS, Markdown or JSON.
Add images
PNG, JPG, WebP, HEIC, SVG — anything your browser can decode.
Choose an output
Encode any image as a Base64 data URI ready to paste into HTML, CSS, Markdown or JSON.
Fine-tune
Optional — sensible defaults are already set.
About Image to Base64
Encode an image as Base64 text so it can be embedded straight into code instead of loaded as a separate file. You can output a complete data URI, raw Base64, a ready-made HTML <img> tag, a CSS background-image rule or a Markdown image. The original file bytes are encoded as-is, without re-compressing the image.
When it helps
- Inlining small icons or logos into HTML emails, where linked images are often blocked.
- Embedding images in a single-file HTML page, CSS file or JSON payload.
- Putting a small image into a Markdown document or a test fixture without a separate asset.
Tips
- Base64 makes data about a third larger than the original file, so it's best for small images. Large photos are usually better served as normal files.
- Compress or resize the image first. Every byte saved shrinks the encoded string too.
- The data URI uses the source format's MIME type, so a HEIC file produces data:image/heic, which most browsers can't display. Convert it to JPG or PNG first.
Good to know
Quick answers about image to base64 in your browser.
Choose the HTML <img> tag output and paste it into your page, or put the data URI into the src attribute of any img element.
No. Base64 is just a text representation of the exact same bytes, so decoding it gives back the identical file.
Yes. There is no sign-up, no watermark and no limit on how many files you process.
No. Files are read and processed locally in your browser, so they never leave your device.
Related tools
Part of the Image Utilities collection.