Base64 lets you embed an image directly inside HTML or CSS code instead of linking to a separate file. It is a handy trick for small icons, email templates and single-file pages.
Here is how to do it — and when you should avoid it.
In this guide
- What is a Base64 image?
- Step 1: Convert your image
- Step 2: Use it in HTML
- Step 3: Use it in CSS
- When NOT to use Base64
- Decode a Base64 image
What is a Base64 image?
Base64 converts the binary data of an image into plain text. Wrapped in a data URI, the browser can display it without downloading a separate file:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
Step 1: Convert your image
- Open our Image to Base64 converter.
- Upload a small PNG, JPG, SVG or WebP image.
- Copy the data URI.
Step 2: Use it in HTML
<img src="data:image/png;base64,iVBOR..." alt="Logo" width="64" height="64">
Step 3: Use it in CSS
.icon { background-image: url("data:image/png;base64,iVBOR..."); }
When NOT to use Base64
- Large photos — Base64 is about 33% bigger than the original file.
- Images reused on many pages — separate files can be cached by the browser.
- Gmail and some email clients block or strip Base64 images, so test before sending.
Rule of thumb: use Base64 only for small images (under a few KB).
Decode a Base64 image
Found Base64 code and want the image back? Paste it into our Base64 to Image converter.
Frequently asked questions
Does Base64 improve page speed?
Only for tiny images, by saving HTTP requests. For large images it makes pages slower.
Is Base64 secure?
No, it is encoding, not encryption. Anyone can decode it.
Can SVG be Base64 encoded?
Yes, though SVG can also be embedded as URL-encoded text, which is often smaller.
