Base64 Images and Data URLs: When Inline Files Make Sense
Data URLs can carry small Base64 images in HTML or CSS, but they also add size and caching tradeoffs.
What a data URL does
A data URL places a small file inside a URL string. The common image shape looks like data:image/png;base64, followed by Base64 text. RFC 2397 introduced this format for small inline data items.
Use it for tiny assets
Inline Base64 can help with a very small icon, a one-off email image, a test fixture, or a generated preview. It removes a separate file request, and it keeps the asset next to the markup or CSS that uses it.
Avoid it for normal images
Base64 turns every 3 bytes into 4 characters, so the text grows by about one third before other overhead. The browser must download the larger HTML or CSS before it can see the asset. A standalone image file can use normal caching, content type metadata, responsive image rules, and CDN behavior.
Mind browser and security limits
MDN documents length limits and security rules for data URLs. Modern browsers block top-level navigation to data: URLs because attackers abused that pattern for phishing. Treat data URLs as an embed tool, not as a general hosting method.
A practical rule
Inline only files you would feel comfortable pasting into the source file. Keep normal product images, screenshots, large SVGs, and user uploads as separate files. If the Base64 string makes the HTML or CSS hard to read, move the asset out.