Email signatures, HTML pages, mini apps — sometimes you want an image that works without an external file. Encoding it as Base64 and inlining it as a data URL does exactly that. This article explains what Base64 images are, when they help, when they hurt, and how to convert correctly.
What Is a Base64 Image?
Base64 is a rule for encoding binary data as ASCII text. Once converted, an image becomes a string starting with data:image/png;base64,.... that browsers can use directly as an image source. Two things define it:
- ~33% size overhead: Base64 uses 4 characters for every 3 bytes, so the string is about one-third larger than the file.
- No extra request: the image loads with the code — no separate HTTP request needed.
When to Use It — and When Not To
| Scenario | Recommendation | Reason |
|---|---|---|
| Small icons, logos (a few KB) | Inline it | One less request, negligible size cost |
| Email signature images | Inline it | Avoids external links being blocked by mail clients |
| Mini-app static assets | Inline selectively | Fewer network calls; watch the package size limit |
| Large photos (tens of KB+) | Don't | 33% overhead, no caching, slower first paint |
| Images reused on many pages | Don't | Inline images can't be cached; each page re-transfers them |
How to Convert Online
- Upload the image: open the image to Base64 tool and upload or drop your file.
- Adjust format and quality: keep the original format or convert to JPEG/WebP and tune quality to control the string length.
- Copy the result: one click copies the full
data:image/...string. - Paste it into code: use it in
<img src="...">, CSSbackground-image: url(...)or your mini app's<image src="...">. - Decode when needed: paste Base64 back in the tool's Base64 → image mode to recover the original image.
Practical Tips
- Compress before encoding: resize first with the image compressor so the string stays short.
- WebP is leaner: for modern browsers, converting to WebP before encoding usually gives the smallest string.
- Avoid repeated inlining: the string appears in the HTML every time — don't treat it like a managed asset.
- Mind special characters: the string contains
+ / =, which may need escaping in URLs or JSON.
Frequently Asked Questions
Is it normal that the Base64 string is bigger than the image?
Yes. Base64 adds about 33% by design. For small images it's negligible; for large ones, compress first.
Can Base64 images be cached?
Not on their own. They live inside the HTML/CSS and re-transmit on every page load; cacheable images should be separate files.
Are my images uploaded to a server during conversion?
No. Conversion happens locally in your browser — nothing is transmitted.
Can I use Base64 images in mini apps?
Yes. The image component accepts data:image URLs — good for small icons; just watch the package size.
References
- Data URLs — MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/data
- Base64 encoding — RFC 4648: https://datatracker.ietf.org/doc/html/rfc4648