Convert an image into a Base64 data URI, with ready-to-paste HTML img and CSS background snippets.
This image is quite large. Base64 works best for images under about 10 KB; for larger ones a normal image file loads faster.
In HTML:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">In CSS:
.icon { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }To encode or decode text instead of images, use the Base64 encoder. Make the image smaller first with the image compressor.
A data URI puts a whole file inside a text string, like data:image/png;base64,iVBOR…. Browsers can show it directly in an <img> tag or CSS background, so the image doesn't need a separate file or request.
For very small images such as icons, tiny logos or placeholders under a few kilobytes, especially in emails or single-file HTML pages. For larger images, a normal file is better: Base64 is about 33% bigger and can't be cached separately.
Base64 uses 4 text characters for every 3 bytes of data, so the encoded result is about 4/3 the size of the original file.
No. The image is read and encoded in your browser and never leaves your device.