Image → Base64 / Data URI

Embedding images as Base64 data URIs allows them to be included directly in HTML, CSS, or JavaScript without a separate network request. The format is: data:[mediatype];base64,[Base64-encoded data]. A data URI in a CSS background-image, an img src attribute, or a canvas drawImage() call is functionally identical to a URL pointing to an external file.

Data URIs are practical for small images such as icons, logos, inline SVGs, and small UI elements where the cost of an HTTP request outweighs the overhead of the Base64 encoding. For larger images, the 33% size increase from Base64 encoding and the inability to cache the image separately from the surrounding document make external references preferable. Data URIs also cannot be lazy-loaded independently of the HTML or CSS that contains them.

Common use cases for data URIs: email templates (many email clients block external images by default), single-page applications that bundle assets, offline-capable web apps, small icons in CSS that are simpler to embed than to host, and API responses that need to include image data. When security matters, note that data URIs can be used to embed malicious scripts in some contexts — some content security policies restrict them.