Base64 Images and Data URIs Explained

Raw Base64 and a Data URI are not the same string

Raw Base64 contains only encoded bytes. A Data URI is a URL with a scheme, media type, optional parameters, a comma and the data. For binary image bytes represented as Base64, include the ;base64 marker.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

Data URI syntax

The general form is data:[media-type][;base64],data. Use the image's actual MIME type; changing the label does not convert PNG bytes into JPEG or another format.

data:[<media-type>][;base64],<data>

Embed a Base64 image in HTML

Use the complete Data URI as the src value and still provide meaningful alt text. The HTML document becomes responsible for delivering those image bytes.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Status icon">

Use a Data URI in CSS

A Data URI can be used anywhere the CSS property accepts a URL. Keep generated strings out of hand-edited styles when their length makes reviews and diffs difficult.

.status-icon {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

Choose the correct image MIME type

Base64 increases the encoded byte count

Base64 represents each three input bytes with four encoded characters, so the Base64 portion is roughly one third larger before the Data URI prefix. HTTP compression may change transfer cost, but it does not remove parsing, caching or maintenance trade-offs.

When to inline an image

• Consider small, stable assets when avoiding a request materially helps the page.
• Prefer normal image files for large, reusable or independently cached assets.
• Measure the final compressed document rather than comparing raw sizes alone.
• Treat SVG and other active-capable media according to your content security policy.
• Never confuse Base64 encoding with sanitization or encryption.