Data-URI base64 conversion
Can help improve page load performance over HTTP/1 connections by bundling multiple images into a single cacheable style sheet, or by embedding small images directly into the HTML itself.
When using base64 data-URIs
Most designers don’t tend to care too much about optimisation, and Photoshop’s
Save for web just isn’t very good. My personal choice for web output is the now defunct Fireworks. That said, there are many online tools which may help, and remember image optimisation is
The new kid on the compression block is Google’s Guetzli which promises 20-30% typical compression. Though it takes a lot longer to compress, a fair compromise.
There’s a lot to image optimisation, if you are interested read Stoyan Stefanov’s The Book of Speed chapter on Optimizing Images it is excellent.
There’s a free online eBook by Addy Osmani: Essential image optimisation is definitely worth the read. He recommends:
As a side note: When talking to designers use the term
image optimisation rather than
image compression, they’ll listen a little longer.
If you’re converting SVG to data-URI to embed into a style sheet or HTML please consider this method instead: Cross browser SVG URI background-images.
There’s also a tool to convert SVG URIs to CSS background-images.
Cache the CSS
Data-URI embedded images should be stored in cacheable files such as flat, not dynamic, HTML and style sheets. Data-URI style sheets should be cached (
me love you) long-term, but rename the file on each update. See this Caching Tutorial for more details or perhaps Google’s developer docs.
Base64 file sizes
File size increases by approximately 30% which may be more than offset by serving your files gzipped or deflated. If you’re not doing this already, get on it. This article may help: How To Optimize Your Site With GZIP Compression
All devices running modern browsers, that's IE8 and up, support base64 encoded data-URIs.
I’ve seen articles warning of poor rendering performance when using data-URI images on mobile. Personally I’ve never noticed an issue but testing was far from exhaustive. The Mobify articles are no longer online.
HTTP/1 and HTTP/2 transfer protocols
The main use of base64 encoded data-URIs is to reduce the number of HTTP requests made by the browser. This is achieved by combining multiple images into a single cacheable CSS file, or inlining small images directly into the HTML.
All well and good for HTTP/1 with its six maximum parallel connections, but now HTTP/2 is arriving which no longer requires multiple connections. If performance is your goal I suggest moving to SSH over a HTTP/2 connection.
See Illya Grigorik’s presentation: HTTP/2 - Let’s optimise.