Image to Base64: What a Data URI Is and When to Use It
How to encode an image as a Base64 data URI for CSS and HTML, when inlining helps performance, and the size trade-off to watch for.
A Base64 data URI encodes an image as a long text string you can paste directly into CSS or HTML, so the browser loads it without a separate network request. It looks like data:image/png;base64,iVBORw0KGgo....
How to create one
- Open the image to Base64 tool and select any PNG, JPG, SVG, WebP or GIF.
- Copy the output as a raw string, a CSS background, or an
<img>tag. - Paste it into your stylesheet or markup.
Everything runs in your browser, so the image never leaves your device.
Where to use it
- CSS:
background-image: url("data:image/png;base64,...") - HTML:
<img src="data:image/png;base64,..."> - JSON / email: embed a small image where linking an external file is awkward.
The size trade-off
Base64 makes data about 33% larger than the original binary, and inlined images cannot be cached separately by the browser. So the technique fits small assets — icons, logos, tiny sprites. For large images, serve a normal file so it can be cached and lazy-loaded.
Rule of thumb
Inline it if the image is under a few kilobytes and used on one page; otherwise keep it as a file. Need to decode plain text instead? Use the Base64 encoder/decoder. Related: How to create a favicon.