Image to Base64
Turn an image into a data URI you can paste straight into CSS or HTML.
How it works
A data URI embeds a file directly in a document — no separate HTTP request, no external dependency. The bytes are Base64-encoded so they survive in a text context.
data:[mediatype][;base64],[data] The 33% overhead
Base64 turns every three bytes into four characters, so an encoded image is always about a third larger than the file it came from. Gzip recovers some of that on the wire, but not all.
When inlining is worth it
- Small icons and SVGs — saving a round trip beats the size penalty.
- Email HTML — many clients block external images but render inline ones.
- Single-file deliverables — a self-contained HTML page with no asset folder.
- Avoiding a flash — a tiny inline placeholder that renders before the real image arrives.
When it is not
Anything cacheable, anything large, and anything that could be lazy-loaded. An inline image is part of the document, so it blocks that document's parse and is re-sent every time the document changes. For SVG specifically, inlining the markup directly is better than Base64 — it is smaller and can be styled with CSS.