Image to Base64 and data URIs: when to inline images, and when not to

What Base64 is

Base64 turns binary data into text made of 64 safe characters, so it can travel through places that only accept text: JSON, HTML attributes, CSS, email bodies and configuration files. Every 3 bytes of the image become 4 characters, so the text is about 33 percent larger than the file.

What a data URI is

A data URI wraps the encoded data with a media type so a browser can use it wherever a URL would go, for example data:image/png;base64, followed by the encoded bytes. Image to Base64 produces the raw string, a data URI, a CSS background rule, an HTML img tag, Markdown and JSON, ready to copy.

When inlining helps

• Very small images such as icons and bullets, ideally under about 10 KB, where saving a separate request matters more than the size increase.
• Self-contained files, such as an HTML email template or a single-file report that must work without other files.
• Tiny blurred placeholders shown while the real image loads. LQIP & BlurHash creates these.

When it hurts

• Large images. The size overhead applies to every byte, and the page has to download and parse the text before it can use the image.
• Caching. An inlined image is part of the HTML or CSS file. It is downloaded again whenever that file changes and cannot be cached or shared between pages on its own.
• Responsive images. A single data URI cannot offer different sizes for different screens the way srcset can.

SVG is a special case

SVG is already text, so it can go into a data URI as URL-encoded markup instead of Base64. That is usually smaller and stays readable. Optimise the SVG first; SVG Optimizer can copy the optimised result as a data URI directly.

Turning Base64 back into an image

Base64 to Image accepts a raw string or a full data URI, identifies the real image type from the decoded bytes, warns if it does not match the declared type, and shows a preview before you download. Decoding happens in the page; pasted data is not sent anywhere.