What Is Base64 Encoding?
Base64 is a binary-to-text encoding scheme that converts binary data into a string of 64 printable ASCII characters. When applied to images, Base64 produces a Data URI — a self-contained string that browsers can use directly as an image source without making an HTTP request to fetch the file.
A Base64 Data URI looks like: data:image/png;base64,iVBORw0KGgo.... The prefix declares the MIME type, followed by the base64-encoded binary content of the file.
When to Use Base64 Images
✅ Good Use Cases
- Small icons under 5–10 KB
- SVG logos in CSS
- HTML email templates
- Offline PWAs (single-file)
- JSON APIs with embedded images
- Single-file HTML documents
- React inline image props
❌ Avoid Base64 For
- Hero images and photography
- Product image galleries
- Background banners
- Images over 10 KB
- Pages with many images
- High-performance image pipelines
- SEO-critical images
Base64 vs Traditional Image Files
| Feature | Base64 Data URI | External Image File |
|---|---|---|
| HTTP Request | None — embedded | 1 request per image |
| File Size | ~33% larger | Original size |
| Browser Caching | Cached with HTML/CSS | Cached independently |
| Portability | Self-contained | Requires file path |
| Best for | Tiny assets, emails, PWAs | Most web images |
| SEO impact | Not indexable by Google | Indexable |