What Is a Data URL?
A data URL is a URI scheme that embeds file content directly in the URL string: data:image/png;base64,... The browser interprets this as the file content itself rather than fetching it from a server. Any resource loadable by a browser can be embedded as a data URL.
When Base64 Images Help
For small images (under 5KB) used in CSS — icons, backgrounds, loading spinners — Base64 embedding eliminates an HTTP request and prevents the brief flash of an unloaded image. Embedding in CSS files means the image loads with the stylesheet rather than requiring a separate fetch.
The Performance Cost for Larger Images
Base64 adds 33% to image file size. More significantly, Base64 data in HTML or CSS prevents the browser from caching the image independently — every page load re-downloads the entire embedded file. For images above a few kilobytes, a separate cached image file is almost always more efficient.
The Right Threshold
A common rule of thumb: use Base64 data URLs for images under 2-4KB. Above that, the caching and size benefits of a separate file outweigh the request-saving benefit of embedding. SVG icons are better served as inline SVG or a sprite sheet.
Base64 image embedding is appropriate for tiny images where eliminating an HTTP request outweighs the size penalty. For larger images, separate files with proper caching are always better.