MENU
CONNECT

Using Modern Image Formats to Save Bandwidth


Jon takes a look at how using next-generation image formats for ecommerce websites can help save bandwidth and improve the user experience
Using Modern Image Formats to Save Bandwidth

As ecommerce developers, it’s reasonably common for us to open an email entitled ‘site speed’ to find a link to the Google Page Speed Insights tool and a customer telling us how terribly slow their site is because PageSpeed Insights says so. Historically, I would say take a look at Next or John Lewis and tell me what their score is, then go and browse their sites and tell me your own perception of speed. I ask the question, with the budgets they operate on, do you think they neglect the issue of page speed, a fundamental driver of conversion rates? Simply put, Page Speed Insights is not the definitive measure of true page speed, however, it does highlight opportunities that are absolutely worth investigating and dealing with, wherever possible. One of the ‘opportunities’ that will appear on many audits looks a little something like this:-

"Serve images in next-gen formats
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption."

Ecommerce websites are inherently image-heavy and with the ever-increasing percentage of sessions taking place on mobile devices, it doesn’t take a genius to conclude that reducing the image payload of a page will result in a faster download of image assets and, subsequently, a demonstrably faster overall page load. This is particularly advantageous over slower networks, where it could be the difference between a user bouncing away and staying put. There is also the added benefit of saving a users mobile data consumption, perhaps saving them a few pennies in the process.

So, the principle is great, the benefits obvious, but what are these new-fangled image formats? How do we implement them? Are they supported across all browsers and devices and, if not, how do we fall back to our familiar friends, the JPEG or PNG, when they are unsupported? Can we do so without losing the benefits we thought we were gaining?

What are these new-generation formats?

Well, Google lists three formats:-

  • JPEG 2000 - A newer incarnation of the JPEG
  • JPEG XR - Developed as a direct successor to the much-loved JPEG
  • WebP - A format developed by Google specifically for web images

Browser Support

Unfortunately, none of the aforementioned formats has total cross-browser support, however, by no means should that stop anyone from utilising them when support is available. Let’s reap the rewards when the support is in place.

JPEG 2000
Only supported by Safari browsers, although that excludes Safari for Windows.
https://caniuse.com/#feat=jpeg2000

JPEG XR
Only supported by Internet Explorer and Edge browsers.
https://caniuse.com/#search=jpeg%20xr

WebP
Support is really starting to build for this format, with the majority of current releases of all major browsers now on board. Safari is currently lacking support, however, Apple is working on an implementation as we speak.
https://caniuse.com/#search=webp

The conclusion would have to be that WebP is the format to go for. There is simply not enough support for the other formats.

How do we implement them?

In our websites we use images in two different ways, some we place within the content of a page, whilst others fall outside of the content of the page and form part of the site layout itself. Thankfully, there are ways of using webp images in both cases.

Images within the page content

Anyone with a little HTML knowledge will be familiar with the <img> tag. The <img> tag is supported across all browsers and its src attribute tells the browser which image to render. Technically, we could just add a reference to a WebP image within that tag, however, that doesn’t help when a browser has no WebP support. Therefore, in order to render the WebP image where supported and fallback to a trusty old jpeg or png when not, we use the HTML5 <picture> tag. The <picture> tag has, nested within it, one or more elements. Those elements have an attribute of srcset, within which a reference to a WebP image can be added. The last nested child element of the tag is then, you guessed it, the <img> tag. The <img> tag contains our fallback option. When the browser renders the image, if it supports WebP it will fetch the WebP image, but if it doesn’t, it will fall back to the jpeg/png. What’s more, if the browser does not support the <picture> tag, it will ignore it and still see the <img> tag. Jobs a goodun on all fronts!

We end up with something a little like this:-

<picture>

<source srcset=”/images/imallmodern.webp” type=”image/webp”></source>

<img src="/images/fallback.png">

</picture>

Browser support for the picture tag
https://caniuse.com/#search=picture

WebP Images in CSS

Rendering a WebP image in CSS is a little trickier than rendering one in HTML content. We don’t have the benefit of a nice <picture> element to help with degradation, as there is no equivalent in CSS. So what do we do? The answer is we take advantage of a feature detection library called Modernizr. We ask Modernizr to detect whether the browser supports WebP and, if it does, it will add the class 'webp' to the <html> element of the page. Likewise, if the browser doesn’t support WebP, the class 'no-webp' will be added to the <html> element of the page. Then we target the two classes in our CSS like so:-

.no-webp .backgroundimage {

        background-image: url(“fallback.png”);

}

.webp .backgroundimage {

        background-image: url(“imallmodern.webp”);

}

It means a little more complexity in our css but the payoff outweighs the extra effort.

Conclusion

It is undeniably the case that the use of modern image formats saves on bandwidth. It is also the case that one of those image formats, WebP, is now supported adequately enough across browsers to make the additional admin overhead involved in maintaining both WebP and old school jpg/png versions of images, worthwhile.

We're waiting to offer you a solution to your problem

Send us a message if you're looking for ecommerce expertise. One of our experienced developers will be in touch to discuss your requirements.