Base64 guides

Base64 Data URLs for Images

A data URL places a media type and encoded bytes directly in HTML or CSS, such as data:image/png;base64,... It is useful for tiny icons, email templates, and self-contained demos.

Build a valid data URL

Use the exact MIME type, a comma separator, and Base64 without accidental whitespace. PNG and JPEG signatures differ. The file encoder can generate test values.

Performance trade-offs

Data URLs increase size by about one third, prevent independent caching, and can slow parsing when overused. Prefer normal files for photographs and repeated assets.

<img alt="Small logo" src="data:image/png;base64,ENCODED_BYTES">