Excerpt
While data URIs can optimize performance, the downsides like size bloat and lack of caching should be considered before replacing all JPEGs.
Data URIs allow you to encode small files like images directly into strings rather than linking to external assets. Some developers have explored replacing all their JPEG image references with inline data URIs. In this post, we’ll look at the pros and cons of going all-in on data URIs over traditional image files.
What Are Data URIs?
A data URI encodes file contents like images, CSS, and JavaScript directly into a string rather than referencing an external file:
1data:[<media type>][;base64],<data>
For example a small PNG image could be represented as:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAY...
Browsers can render these data URI strings just like external files. This avoids extra HTTP requests.
Data URIs work for any file type like images, SVGs, fonts, HTML, CSS, and JavaScript code. But they are most commonly used for small images and icons.
Benefits of Data URIs
Some potential advantages of using data URIs:
- Eliminates HTTP requests for external assets
- HTML page is self-contained with inline files
- Simpler paths and access control without a web server
- Avoid cross-origin issues for canvas, WebGL textures, etc
For production sites, inlining small assets can optimize performance by reducing requests.
For testing and development, data URIs simplify working locally without needing assets on a server.
Downsides of Data URIs
However, some downsides to keep in mind with heavy data URI usage:
- Encoding bloats HTML and JavaScript size
- Can’t leverage browser caching of external files
- Not compatible with IE 6/7 and some old browsers
- Harder to update assets down the road
Base64 encoding used in data URIs inflates sizes by ~33% compared to binary files. So inlining all images could significantly increase page weight.
Data URIs also can’t take advantage of CDNs or edge caching of external static files.
Use Cases Where Data URIs Make Sense
There are some scenarios where data URIs may be ideal:
- Very small icon images
- Illustrations and SVG images
- As fallback when external assets fail to load
Inlining tiny image files a few kilobytes in size is an easy optimization.
Data URIs can also be useful for graphics and UI elements that need to work offline or have predictable performance.
Optimizing Data URI Usage
Some ways to optimize use of data URIs:
- Only use for static assets below certain size thresholds
- Automate inlining process with build tools
- Fallback to normal files for larger assets
You generally want to avoid inlining large images and files. Anything over a few kilobytes should likely stay as a normal asset request.
Alternatives to Data URIs
There are also some alternative techniques that can achieve similar benefits:
- CSS sprites - Combine images into a single file
- Icon fonts - Encode icons into fonts
- SVG images - Small vector image format
- Content Delivery Networks - Distributed caching layer
Each approach has tradeoffs to weigh for a particular use case.
Summary
Data URIs can be a useful performance optimization in some cases by eliminating asset requests. But the downsides of encoding bloat and caching should be considered before replacing all normal image references.
JPEG files in particular are not an ideal format for inlining. The compression already makes them compact, and they would see major size inflation from base64 encoding.
In general data URIs make the most sense for static elements under a few kilobytes in size. They can simplify development, but may not be optimal for all production scenarios. As with any optimization, thorough testing across browsers and connections is advised.
