Embedding a small image directly inside HTML or CSS — to avoid an extra HTTP request for an icon, or to inline an image in a JSON payload — requires converting it to a Base64 text string first.
This guide covers how to convert an image to Base64 for free, and how to decode a Base64 string back into an image.
Key Takeaway: Base64 encoding adds roughly 33% overhead to file size — it's a tradeoff that's worth it for small icons or avoiding extra requests, but not for large photos where the size penalty outweighs the benefit.
When Base64 Makes Sense
| Use case | Worth it? |
|---|---|
| Small icons, under 5KB | Yes — saves an HTTP request |
| Email template images | Often yes — some clients block external images |
| JSON payloads needing inline images | Yes — no separate file handling needed |
| Large photos | No — the 33% size overhead and lack of caching hurts performance |
Tip: Use the CSS url() copy option directly for background images, and the HTML img tag option when you need a complete, ready-to-paste element.
Step by Step: How to Convert an Image to Base64
TinyPNG Now includes a free image-to-Base64 tool that runs entirely in your browser.
- Open the Image to Base64 tool and upload your file.
- Copy the raw Base64 string, a CSS
url()rule, or a full HTML img tag. - To reverse it, switch to the Base64 → Image tab, paste a string, and download it as a file.
Base64 Mistakes That Slow Pages Down
Base64 is a convenient tool that is easy to overuse. These are the situations that cause trouble:
- Inlining large images. A big photo inside your HTML or CSS bloats every page load and cannot be cached separately from that file. Reserve Base64 for small assets.
- Forgetting the size overhead. Encoding adds roughly a third to the data. Compress the image first with the compressor, then encode, so you inline the smallest possible version.
- Putting repeated images inline. If the same icon appears on many pages, a normal cached file downloads once. An inline copy downloads every time.
- Using Base64 for vector graphics. An SVG can often be inlined as plain markup, which is smaller and stays editable.
- Pasting a truncated string. A partial copy produces a broken image. Copy the whole value, and test it in the browser before shipping.
As a rule of thumb, if you would hesitate to email the file as an attachment because of its size, do not embed it as Base64 either.
Frequently Asked Questions
What is a Base64 image string used for?
Base64 encodes binary image data as text, so it can be embedded directly inside HTML, CSS, or JSON without a separate file request — common for icons, small images, and email templates.
Does converting to Base64 increase file size?
Yes, Base64 encoding adds roughly 33% overhead compared to the original binary file size.
Can I decode a Base64 string back to an image?
Yes. Switch to the Base64 to Image tab, paste the string, and click Decode to Image, then download it.
What output formats does the copy button support?
You can copy the raw Base64 string, a ready-to-use CSS background-image url() rule, or a complete HTML img tag.
Is my image uploaded to a server?
No. Encoding and decoding both happen entirely in your browser using the FileReader API. Your image never leaves your device.
Summary: Open the free TinyPNG Now Base64 converter, upload, copy in the format you need — free, private, and instant.