You may have seen very long strings starting with data:image/png;base64, inside HTML or CSS. These are images stored as text. Here is what they are and when they make sense.
What is Base64?
Base64 is a way of representing binary data, like an image, using only text characters (letters, digits, plus and slash). Browsers can display such text directly through a data URI, so the picture does not need a separate file.
A data URI looks like this: data:image/png;base64,iVBORw0KGgo...
How to use a Base64 image
In HTML:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Icon">In CSS:
.icon { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }Convert an image to Base64
- Open Image to Base64.
- Drop in your picture.
- Choose the format: data URI, Base64 only, an HTML img tag or CSS background.
- Press Copy.
Convert Base64 back to an image
Paste the string into Base64 to Image. With or without the data: prefix, it detects PNG, JPG, GIF, WebP, SVG and more, shows a preview and lets you download the file.
Pros and cons
Advantages
- One less HTTP request, helpful for tiny icons
- Self-contained HTML files and emails
- Works well for small inline graphics
Disadvantages
- About 33 percent larger than the original file
- Cannot be cached separately from the page or stylesheet
- Makes HTML and CSS harder to read and maintain
- Slows rendering if used for big images
When should you use it?
Use Base64 for very small images (under 5 KB) such as icons, single-file demos and email templates where external images might be blocked. For anything larger, link to a normal file and let the browser cache it.
Optimize before encoding
Make the image as small as possible first: compress it, and for vector artwork use the SVG Compressor. Inline SVG can often be used directly as text, which is even better than Base64.
Security note
Only decode Base64 from sources you trust. Data URIs can contain SVG with scripts or very large payloads. This tool decodes locally in your browser and never sends the data anywhere.
How big is the cost?
Base64 makes data about 33 percent larger than the original file. A 30 KB image becomes about 40 KB of text, and it cannot be cached separately from the page that contains it. That is why Base64 is best for tiny images only.
Good uses
- Very small icons or placeholders inside CSS
- Single-file HTML emails and demos
- Embedding an image in JSON or an API request
- Quick prototypes where you do not want extra files
Bad uses
- Large photos, because they bloat your HTML and slow the first render
- Anything repeated across many pages, since normal files can be cached once
- Images that change often
How to use it
Embed it with a data URL:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Icon">Create one with image to Base64, and turn a string back into a file with Base64 to image. Shrink the image first with the image compressor, and for vector icons use SVG optimise, since SVG can often be placed inline without Base64.
Frequently asked questions
Does Base64 increase image size?
Yes, by about 33 percent, because three bytes of data are written as four text characters.
When should I use Base64 images?
Use them for tiny icons, email templates and single-file pages. Avoid them for large images because they cannot be cached separately.
How do I turn Base64 back into a picture?
Paste the string into a Base64 to image tool. It detects the file type and lets you preview and download the picture.
Do I need the data:image prefix?
To use it in HTML or CSS you do. When decoding, a good tool also accepts raw Base64 without the prefix.
