Image to Data URL
Drop any image to convert it to a Base64 data URL. Everything runs locally — your image never leaves the browser.
Image to Data URL
Image to Data URL converts PNG, JPEG, GIF, WebP or SVG files into Base64 data URLs, with output formatted as a raw data URL, a CSS background-image, an HTML img src, or Base64 only. Conversion happens in your browser.
How to use it
- Choose an image file.
- Pick the output format you need.
- Copy the result straight into your CSS or HTML.
The size cost, and when it is worth paying
Base64 encodes three bytes as four characters, so a data URL is always about 33% larger than the original file. In exchange you remove one network request, because the image travels inside the document.
That trade only pays for small images. For an icon of a few hundred bytes, avoiding a round trip is clearly worth 33% more bytes. For a photograph it is a bad deal twice over: the file balloons, and the image can no longer be cached separately, so every page load re-downloads it inside the HTML.
When it helps
- Embedding a small icon or logo without a separate request.
- Making a single-file HTML page that works with no external assets.
- Inlining an image into an email template.
- Avoiding a request for an image used once, above the fold.
Common mistakes
- Inlining large images. Past a few kilobytes the caching loss outweighs the request saved.
- Data-URLing an image used on every page. As a separate file it would be cached once; inlined it is re-sent with every page.
- Forgetting Content Security Policy. A strict policy may block data: URIs in img-src, and the image will silently fail.
What this tool handles
- Conversion happens locally. Your image is never uploaded anywhere.
