What is Base64, and when should you use it for images?
If you've seen a giant data:image/png;base64,iVBOR... string in someone's CSS or HTML and wondered what it was — that's a Base64-encoded image. Here's what Base64 actually does, when embedding an image as text is a good idea, and when it isn't.
Short answer
Base64 is a way to represent binary data (like an image) as plain text so it can be embedded directly in code — an HTML attribute, a CSS file, or a JSON payload — instead of loaded as a separate file. It makes the data about 33% larger and is best for tiny assets. Encode an image: PNG to Base64. Decode a string back: Base64 to PNG. Both run in your browser.
What Base64 actually is
Base64 is an encoding scheme, not encryption and not compression. It maps every 3 bytes of binary data onto 4 printable ASCII characters (A-Z, a-z, 0-9, + and /), so any file — an image, a font, anything — can be written as a string of safe text characters. That's useful because some places only accept text: the middle of an HTML document, a CSS stylesheet, a JSON API response, or an email body. Encoding to Base64 lets you carry binary data through those text-only channels. Because 3 bytes become 4 characters, the encoded version is roughly 33% larger than the original file.
Data URIs: embedding an image inline
The most common use for Base64 in web work is the data URI. Instead of <img src="logo.png">, which makes the browser fetch a separate file, you can write <img src="data:image/png;base64,iVBOR..."> and the image travels inside the HTML itself. The format is data:[mime-type];base64,[the-base64-string]. It works the same in CSS — background-image: url(data:image/png;base64,...) — which is how a lot of small icons get inlined.
When to use it (and when not to)
Inlining as Base64 trades an HTTP request for a bigger payload, so it only pays off for small assets.
- Good for: tiny icons, sprites, or a single small logo where avoiding an extra network request matters more than a few hundred bytes.
- Bad for: photos or any large image — the ~33% size penalty bloats your HTML/CSS, and inlined data can't be cached separately or reused across pages, so it's re-downloaded every time.
- Also handy for: moving an image through a text-only channel — a JSON API, a config file, or an email — where you can't attach a real file.
How to encode and decode
You don't need to write code for one-off conversions:
- Image to Base64: PNG to Base64, JPG to Base64 — paste the result straight into your HTML/CSS.
- Base64 back to a file: Base64 to PNG, Base64 to JPG — paste the string (with or without the data: prefix) and download the image.
All of these run entirely in your browser, so even though it's just encoding, your image never gets uploaded to a server.
FAQ
Is Base64 encryption?
No. Base64 is encoding, not encryption — it provides zero security. Anyone can decode a Base64 string back to the original data instantly. It only exists to represent binary data as text, not to hide or protect it.
Why is a Base64 image bigger than the file?
Base64 represents every 3 bytes of data with 4 text characters, which adds about 33% to the size (a little more once you include the data: prefix). That overhead is the cost of carrying binary data through a text-only channel, and it's why Base64 is only worth it for small assets.
What is a data URI?
A data URI embeds a file directly in a URL using the form data:[mime-type];base64,[data]. In web pages it lets you put an image right inside an <img> src or a CSS background instead of linking to a separate file, so the image loads with the document and needs no extra request.
When should I inline an image as Base64?
For very small, critical images — a tiny icon or logo — where saving one network request is worth a slightly larger file. Avoid it for photos or large graphics: the size penalty and the loss of separate caching usually make a normal linked file faster.
How do I decode a Base64 string back to an image?
Paste it into a Base64 to image converter. On ConvertBlink, Base64 to PNG or Base64 to JPG accepts the raw string or a full data: URI and gives you a downloadable image — and it runs in your browser, so nothing is uploaded.
Do I include the data: prefix when decoding?
Either works. A good decoder accepts both a full data URI (data:image/png;base64,iVBOR...) and just the raw Base64 part after the comma. If you only have the raw string, the tool will still decode it.
Encode or decode Base64 images
100% in your browser — nothing is uploaded.