Image to Base64 Converter
Drop an image here or click to choose a file
PNG, JPEG, GIF, WebP, SVG, AVIF — processed locally, nothing is uploaded.
About the Image to Base64 Converter
Base64 encoding turns binary image data into text, so an image can be embedded directly into HTML, CSS, JSON, or Markdown as a data URI instead of being served as a separate file.
This converter reads your file locally with the FileReader API and produces the full data URI, the raw Base64 payload, and ready-to-paste CSS and HTML snippets. The image never leaves your device.
How to convert an image to Base64
- Drop an image onto the upload area or click it to choose a file.
- Check the preview and the size overhead information.
- Copy the data URI, raw Base64, CSS, or HTML snippet you need.
- To go the other way, paste a data URI in the decode field and preview it.
Tips
- Base64 adds roughly 33% to file size — inline only small images like icons and logos.
- Inlined images are not cached separately; they re-download with every page that embeds them.
- Compress or resize the image first: encoding does not shrink anything.
- For simple icons, inline SVG markup usually beats a Base64 PNG in both size and sharpness.
Base64 image checks before inlining assets
Inlining removes a request but grows the payload and blocks caching. Confirm the trade-off is worth it for each asset.
Keep inlined images small
Base64 adds roughly 33% overhead and the string bloats HTML or CSS. Inline icons and tiny graphics, not photos.
Consider caching impact
An inlined image is re-downloaded with every document instead of being cached once as a separate file.
Compress before encoding
Base64 does not compress anything. Optimize or resize the image first, then encode the smaller file.
Prefer SVG where possible
For simple icons, inline SVG markup is usually smaller and sharper than a Base64 raster image.
Related tools
You may also find these tools useful.