Image to Base64
Convert images to Base64 data URLs
Upload one image first to get the Data URL / Base64 plus size change immediately; format trade-offs are available in Advanced mode.
The full guide also includes pitfalls, worked examples, snippets, FAQs, and related tools for checking results or troubleshooting.
About this tool
Convert any image file to Base64 encoding directly in your browser. Drag and drop PNG, JPG, GIF, WebP or SVG files and instantly get the Base64 string, data URL, CSS background-image snippet or HTML img tag. All processing happens client-side — your images are never uploaded to any server.
Production Snippets
Example
text
Base64 length = 4 × ceil(source bytes / 3)
Data URL adds a media-type header.Scenario Recipes
Encode one small image without altering its bytes
Goal: Obtain the output form required by a receiving interface.
- Select a small local image file.
- Choose Base64, Data URL, CSS or HTML output.
- Check the output byte count and test it in the destination client.
Result: The source image format, metadata and animation bytes remain unchanged.
Failure Clinic (Common Pitfalls)
Data URLs do not guarantee email compatibility
Cause: An email client may reject data URLs even when it blocks remote images.
Fix: Use the embedding method supported by that client, such as a hosted URL or CID attachment; test a real message.
Frequently Asked Questions
Which output should I copy?
Plain Base64 contains only the encoded bytes. A data URL adds data:<media-type>;base64, for use as an image source. CSS and HTML modes wrap the same data URL in a background-image declaration or img element; they do not convert the image format.
Does encoding compress the image or remove metadata?
No. FileReader encodes the original file bytes. Pixel content, animation and embedded metadata remain in those bytes. Base64 length is 4 × ceil(file bytes / 3), before the data URL header and snippet markup, so it is usually larger than the source.
Will a data URL display everywhere?
No. Rendering depends on the browser or email client, supported image formats, CSP and size limits. The media type comes from the selected file’s browser metadata, not a file-signature inspection. This tool reads the whole file into memory and does not decode pasted Base64 back into a file.
Keep browsing