Image to Base64
Pick an image and get the data URI with ready-to-paste CSS and HTML, plus a straight answer about whether inlining it is a good idea.
Guide
How to use it
- Choose an image. It is read locally and previewed beside the output.
- Copy whichever snippet fits: the raw data URI, the CSS background rule or the HTML img tag with real dimensions.
- Heed the size line: past about 50 KB of Base64, a normal cached file serves your page better.
- Shrink first if needed, then convert. An image compressor is coming to this network's image tools.
Examples
Worked examples
A 2 KB chevron icon inlined as a CSS background saves a request and renders instantly. This is the textbook good case.
Email clients block remote images by default. A small inlined logo displays regardless, though some clients cap total message size, so keep it lean.
Converted, it becomes 533 KB of text glued into every page load, uncacheable. The size warning fires; serve it as a normal file instead.
Method
How it works
The browser's FileReader turns your image into a data URI: the file's own MIME type, then its bytes as Base64. The CSS and HTML snippets wrap that URI in the two forms you actually paste, and the img tag includes the real pixel dimensions so your layout does not shift while it loads.
Conversion happens on your device; the image is never uploaded.
FAQ
Frequently asked questions
What is a data URI?
A URL that contains the file itself: data:image/png;base64, followed by the encoded bytes. Browsers render it like any image URL, no separate request needed.
When is inlining an image a good idea?
Small, frequently used graphics: icons, logos under a few kilobytes, tiny background patterns, and images inside HTML emails or self-contained documents where separate files are awkward.
When is it a bad idea?
Big images. Base64 adds 33% to the size, cannot be cached separately from the page and blocks rendering while it parses. Past roughly 50 KB, a normal file with caching wins.
Which formats work?
Anything your browser can read: PNG, JPG, GIF, WebP, SVG and more. The correct MIME type is taken from the file itself.
Why did my page get slower after inlining images?
Inlined bytes load with the page every time, bypassing the image cache. Ten inlined 100 KB photos add a megabyte to every single page view. That is the trap this page's size warning exists for.
Is my image uploaded to convert it?
No. The file is read with the browser's FileReader on your device. Nothing is sent anywhere.
More tools