image to base64
Encoded byte for byte in this tab, animation and all.
The short answer
A data URI carries the file inside the page instead of pointing at it, which saves a request and costs a third more bytes. That trade is worth it for a 2 kB icon in a stylesheet and a bad idea for a photograph, because a data URI cannot be cached separately from the thing it sits in.
A data URI carries a file inside the page instead of pointing at it. Good for a small icon in a stylesheet, bad for a photograph, and this page shows you which one you have.
The formula
file bytes → base64 → data:[mime];base64,[payload]
Worked examples
- A small SVG icon
- worth inlining, saves a request
- A 40 kB logo
- borderline; measure the page
- A 2 MB photograph
- never; it blocks the page render
Reference table
| Size | Requests saved | Bytes added | Verdict |
|---|---|---|---|
| Under 2 kB | One | About a third | Inline it |
| 2–10 kB | One | About a third | Usually worth it |
| 10–100 kB | One | About a third | Measure first |
| Over 100 kB | One | About a third | Leave it as a file |
How to use it
- 01Drop the image inRead with FileReader, so the bytes are encoded exactly as they are.
- 02Copy the data URIIt arrives complete, with the media type in front, ready to paste.
Also searched for
Searches that land here include image to base64, base64 image, image to data uri, png to base64 and embed image in css.
Data URIs, and when to use one
What the string contains
Three parts: the scheme and media type, the word base64, and the payload. Everything after the comma is the file, re-expressed in sixty-four characters so it can sit inside a stylesheet or an HTML attribute without breaking either.
The caching argument
A separate image file is requested once and cached for as long as your headers say. An inlined one is re-downloaded every time the page or stylesheet that contains it changes, and it cannot be shared between pages. For a logo that appears on every page of a site, that is exactly the wrong trade.
SVG is the exception worth knowing
For SVG, percent-encoding the markup usually produces a shorter string than base64, because SVG is text and most of its characters need no escaping at all. The theme toggle on this site does that: the icon is a percent-encoded SVG in a CSS custom property, which is smaller than the base64 version would be.
Questions people ask
When is inlining an image worth it?
When the file is small enough that the request costs more than the bytes. Under about two kilobytes it is almost always a win; between two and ten it usually is; past a hundred it is a mistake. Base64 adds about a third to the size, and a data URI cannot be cached separately from the file it sits inside.
Does it work with SVG and animated GIFs?
Yes, because this reads the bytes rather than redrawing the picture. An animated GIF keeps its animation and an SVG keeps its markup, which is not true of tools that route the file through a canvas. For SVG specifically, percent-encoding is usually smaller than base64.
Does my image get uploaded?
No. FileReader is a browser API and the encoding happens in this tab. That is worth knowing here in particular: a data URI of a private image is still that image, in a form that is easy to paste somewhere public by accident.