Image to Base64 — Data URI and CSS Converter
Browser converter between images and Base64, data URIs, CSS and HTML snippets
Runs in your browser · nothing is uploaded
Drop an image to convert to Base64
One image, up to 5 MB. Base64 is larger than the file itself, so it suits small icons and logos. The image never leaves your browser.
What it is
This tool rewrites the bytes of an image file as text made of letters, digits and a few symbols. The text can go straight into HTML or CSS as a data:image/png;base64,... data URI. Everything runs in your browser, and the opposite direction, turning Base64 back into a picture, lives on the same page.
How to use
- Choose Image → Base64 and drop or pick an image: one file, up to 5 MB.
- Under the preview check the original size, the Base64 text size, the growth and the size advice.
- In the box you need (Data URI, Base64 string only, CSS background-image or HTML img tag) press Copy. Long values show only the beginning, but copying takes everything, and you can also download a text file.
- To go the other way pick Base64 → Image and paste Base64 or a data URI. A preview and an Download image button appear.
How it works
- Encoding: standard Base64 (RFC 4648), 3 bytes to 4 characters, padded with
=to a multiple of 4. The file’s bytes are converted directly, not a text string, so any image decodes back unchanged. - MIME type: read from the first bytes of the file (JPEG, PNG, GIF, WebP, SVG and more) and placed after
data:. A wrong file extension does not matter. - HTML tag: width and height are added when the image size can be read.
- Size advice: up to 10 KB suits inlining, over 50 KB deserves a second thought, over 500 KB should be uploaded and linked.
- Decoding: URL-safe Base64 (
-and_) and missing=padding are accepted. If the declared type differs from the real image the real one is used and you are told. Data URIs without;base64are not read.
Example
| Item | Value |
|---|---|
| Original | 2.1 KB icon |
| Base64 text | about 2.8 KB (+33%) |
| CSS | background-image: url("data:image/png;base64,..."); |
| HTML | <img src="data:image/png;base64,..." width="16" height="16" alt=""> |
FAQ
Is my image uploaded?
No. Reading the file and encoding it to Base64 happens inside your browser. The resulting text is not stored anywhere either.
Why does Base64 make the data bigger?
Base64 writes 3 bytes as 4 characters, so the text is about a third (33%) larger than the file. And when it sits inside HTML or CSS the browser cannot cache the image on its own, so it is downloaded again with every page load.
How large can an image be before Base64 is a bad idea?
There is no fixed rule, but people usually inline small icons, logos and spinners of around 10 KB and keep anything over roughly 50 KB as a normal file. The tool groups sizes into up to 10 KB, up to 50 KB, up to 500 KB and larger, and tells you which one you are in. Large images are better uploaded and linked.
Where are data URIs useful?
In an HTML img src, a CSS background-image url(), an email signature, a Markdown file or a single-file HTML page where you want the picture to travel with the document. No extra image file is needed, though some email clients block data URI images.
Decoding says my data is invalid.
The data URI prefix is optional, whitespace and line breaks are ignored, and you can paste a whole CSS or HTML snippet; the data URI inside is found for you. If it still fails the text was probably cut off or contains stray characters. Data that is not an image is rejected.
What about images over 5 MB?
Several megabytes of Base64 slow the browser and are hard to paste anywhere, so one image up to 5 MB is accepted. Shrink bigger ones first with the image compressor or resizer.
Related tools
Favicon Generator
Browser tool that builds favicon.ico, multi-size PNG icons, a manifest and HTML snippets
Image Compressor
Browser-based compressor for JPG, PNG and WebP, by quality or to a target file size
PNG to WebP Converter
Browser-based PNG to WebP converter that keeps transparency and reduces file size
Image Color Picker
Browser tool that picks colour codes from an image and builds a dominant palette
SVG to PNG
Browser converter from SVG to PNG, JPG or WebP with scale or width