When (and when not) to inline images as Base64

Base64 image data URIs are one of those web techniques that look like a magic shortcut the first time you use them. Instead of referencing an external file: <img src= "/logo.png" alt= "Logo" > you can put the image bytes directly in the document as text: <img src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt= "Logo" > That can be useful. It can also make a page slower, harder to cache, and more annoying to maintain. Here is the practical rule: inline images as Base64 when self-containment matters more than caching. Keep normal image files when the browser should be able to cache, resize, lazy-load, or optimize them independently. What a Base64 image actually is An image file is binary data. Base64 rewrites that binary data as plain text using a limited character set. To make the browser treat the text as an image, you wrap it in a data URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUg... The first part tells the browser the MIME type. The second part tells it the data is Base64 encoded. The long tail is the image itself. Base64 is not compression. It is not encryption. It is just a text representation of the same bytes. When inlining an image is worth it 1. Tiny icons and UI assets For very small images, removing an extra HTTP request can be worth the extra bytes. This is especially true for small icons, logos, placeholders, simple UI sprites, or tiny transparent PNGs. Modern HTTP/2 and HTTP/3 make extra requests cheaper than they used to be, so this is not an automatic win. But for a one-off tiny asset inside a small page or widget, a data URI can still be a clean choice. 2. Single-file deliverables Sometimes the point is not raw page speed. Sometimes you need one file that carries everything with it: an HTML report an email template a CodePen or demo snippet a CMS block where you cannot upload assets a test fixture that should not depend on external hosting In those cases, Base64 is useful because the image travels with the HTML, CSS, JSON, or JavaScript.