Base64 encode Image (data URI)
Convert an image file into a Base64-encoded data URI for inline embedding.
Example
Input
logo.png (file)
Base64 output
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=
The gotcha
Data URIs balloon file size by ~33% and block the browser from caching images independently. Only use them for tiny icons (under 2KB) that load with the document. For larger images, reference a real URL — the cache savings outweigh any roundtrip benefit.
When to use this
Inlining a logo or icon into a single-file HTML demo. Embedding an image in a CSS file that ships independent of the asset pipeline. Avoiding a separate HTTP request for an above-the-fold sprite. Don't use for large photographs — base64-encoded JPEGs in HTML defeat browser caching entirely.
Open the encoder