Base64 Image Encoder

When inlining images is worth it

Candidates to evaluate and test before inlining:

• Icons under 2 KB, Saves an HTTP request with negligible overhead.
• Email templates - Data URIs are not supported consistently by email clients. Test your target clients and use CID or hosted images when needed.
• Hero placeholders (LQIP), Low-quality blurred version inline, full image loaded after.
• SVGs used once, SVG is text, so a properly percent-encoded data URI can be smaller than Base64 depending on its characters and formatting.

Bad candidates:

• Large images, Inflating by 33% for a 500 KB image is 166 KB of waste.
• Images reused across pages, Inlining disables browser caching across routes.
• Critical CSS, Inlining heavy images blows up the critical path.

Size expectations

Data URI format

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

• data: scheme
• MIME type
• ;base64, indicator
• The encoded bytes

SVG is a special case

Base64 expands the original SVG bytes by roughly one third before surrounding syntax, while percent-encoding adds overhead only to characters that need escaping. Which representation is shorter depends on the SVG. A text form should use a properly percent-encoded data:image/svg+xml,... value; the bare ;utf8 token is not a standard data-URL parameter, and raw #, %, quotes or whitespace can break the URL. This tool checks SVG structure but does not sanitize scripts, event handlers or external references, so review untrusted SVG before using the output.