A data URI is an image with no request attached. It works in an email, in a sandboxed iframe, in a test that must not touch the network — and the 1×1 transparent pixel remains the smallest useful image on the web at 43 bytes encoded.
What you can control
- Five content types, including the classic 1×1 transparent pixel for spacers and tracking stubs.
- Four wrappers: bare data URI, raw base64, an
<img>tag, or a CSSbackground-imagerule. - The encoded size is reported so you can see when the base64 overhead stops being worth it.
- Labelled placeholders print their own dimensions, which makes a broken layout obvious at a glance.
What this is not
Base64 inflates a file by roughly 33% and the result cannot be cached separately from the document that contains it. Above about 10 KB, a real image file is the better choice.
Questions
When is a data URI worth it?
Below roughly 10 KB, where saving an HTTP round trip beats the 33% size penalty. Above that, use a real file so the browser can cache it independently.
Do these work in email?
SVG data URIs are blocked by most email clients. For email, use a PNG or GIF data URI — the 1×1 pixel option is a GIF for exactly that reason.
Why does the SVG option produce such small files?
SVG is text, and a solid rectangle is a few dozen characters. A PNG of the same rectangle carries a header and compression tables it does not need.