What is Base64 Image Encoding?
Base64 is an encoding scheme that converts binary data into a string of ASCII text characters. For images, this means the entire image file (JPG, PNG, GIF, etc.) can be represented as a single long text string. This string can be embedded directly in HTML, CSS, JavaScript, or JSON without needing a separate image URL or file.
Base64 Output Formats
| Format | Example | Use case |
|---|---|---|
| Raw Base64 | iVBORw0KGgo... | When you need just the encoded data |
| Data URL | data:image/png;base64,... | HTML src attribute, JS |
| CSS Background | url("data:...") | CSS background-image property |
| HTML img tag | <img src="data:..." /> | Paste directly into HTML |
When to Use Base64 Images
- HTML emails: Many email clients block external image URLs. Embedding images as Base64 ensures they always display.
- CSS sprites and icons: Embed small icons directly in your stylesheet to avoid HTTP requests.
- Single-file HTML: Create self-contained HTML files where all assets are embedded.
- API responses: Return images inline in JSON without hosting them separately.
The 33% Size Overhead
Base64 encoding uses 4 ASCII characters to represent every 3 bytes of binary data. This means a 100 KB image becomes approximately 133 KB as a Base64 string. For production websites, it's generally better to load images as separate files — but for small icons (under 10 KB) and email images, the convenience of Base64 outweighs the size cost.
