As with all recommendations made by Google's PageSpeed Insights, website owners all over the world scramble to satisfy them in order to benefit from an unknown increase in some hidden metric that they are sure will lead to better rankings in natural and paid listings.
This is a particular problem in ecommerce because Google is, for many, the Emperor of the World in this sphere. If Google are saying it, you must do what they say for fear of punishment.
In this case, the 'punishment' is less favourable quality scoring and ranking. This can have a profound effect on marketing budgets and ROI. Therefore the fear induced by these recommendations is enough to cause people to assume that the recommendations must be implemented immediately.
A current bugbear of Google's is using Next Generation Image Formats to display your banners, product imagery and so forth. These image formats will use far less bandwidth as they are significantly smaller than the current standards (JPEG, PNG, GIF, etc.) for no detectable reduction in display quality. This leads to reduced load times and, in theory, happier users.
Sounds like a no brainer. Let's get these magic bullets implemented immediately.
And therein lies the rub. Like VHS versus Betamax and HD-DVD versus Blu-Ray, there are competing formats, all claiming to be the best. And as with their old video format counterparts, there is one major problem – not all formats play on all devices.
In the video world, you needed separate hardware if you wanted to support all the formats. In the world of next-gen imagery for the web, you need different browsers. With the old video formats, you could simply pick one and only buy films released on the format you owned the player for. The ecommerce website however must support all major browsers, where at all possible.
It's the equivalent of being forced to own an HD-DVD player and a Blu-Ray player, just in case you ever came into possession of either format.
What's out there
Let's look at the support for three major next-gen image types:
- JPEG 2000 (JP2) – Supported only by Apple Safari.
- JPEG XR (JXR) – Supported only by Microsoft browsers (IE9+ and Edge).
- WebP – Supported by all major browsers except Apple Safari and Internet Explorer.
On the face of it, WebP is the clear winner here, like Blu-Ray before it. However, in the world of ecommerce, you simply cannot afford to alienate Safari users. They use the most expensive laptops, buy the most expensive tablets and mobile phones, and therefore, theory says, have the most disposable income to make discretionary purchases on your website.
So, are we stuck? Do we wait until one of these formats is ubiquitous before switching all our imagery across?
The answer is – it depends.
As the saying goes, 'there's more than one way to skin a cat'. In this quandary we find ourselves in, there are several ways to achieve maximum coverage of all browsers with all formats. All have pros, all have cons. The weight of the pros versus the cons will be for you to decide which way forward is best.
However, it essentially boils down to supporting Safari, Internet Explorer, and then the rest.
Solution 1 – support them all
To cover Safari, Internet Explorer and then the rest, you should implement all three. Then use either browser detection (not recommended) or the HTML5 picture element (much better) to serve the correct new image format type depending on support offered by the browser.
Pros:
- All major browsers are supported.
- Every user gets minimal download size.
- Google is happiest.
Cons:
- Requires three files for every image.
- Three times the management required.
- The storage required will exceed what you currently use, despite serving less in terms of bandwidth.
- Software is required to support the optimisation and encoding of all three formats.
- Significant work is required to convert all
img elements to picture elements.
Solution 2 – support none of them (yet)
In essence, 'as you were', just do what you're doing now – until one format wins out. This is the same as refusing to buy either an HD-DVD player or a Blu-Ray player until the other format was obsolete.
Pros:
Cons:
Solution 3 – back a winner
In this scenario, we pick a single image format to support and use the HTML5 picture element to include our current older image format as a fallback.
Pros:
- All users still get served your imagery.
- Some users will get minimal download size.
- Migration can be carried out on a priority basis due to older version support.
- Google is happier.
Cons:
- Requires one additional file to store.
- Management requirement increased.
- Storage requirement is increased.
- Software is required to support optimisation and encoding of one format.
- Significant work is required to convert all
img elements to picture elements.
Assuming we decide, yes, we are moving to support next-gen imagery, supporting one image only as opposed to all three reduces the amount of management required to support.
It will likely reduce any software overhead for encoding support. The work involved in converting to picture elements is still there but, since we are still maintaining support for old image formats, this can be carried out in stages, in priority order.
Summary
If you don't care what Google is saying, or you simply cannot handle the migration work, do nothing at the moment.
Wait until there is ubiquitous support for one of the formats (or non-supporting browsers die off enough in your user base for you to not worry about them) then switch all current images to the newer format.
If you do care about PageSpeed Insights, have made peace with the work required to move, and you want to do something about it, you should really be looking at Solution 3.
Therefore, we need only pick the format.
If your user base is predominately Apple users, you should pick JPEG2000. If mostly Microsoft browser users, JPEG XR. Otherwise, given its extensive coverage in most browsers, WebP.
However, since Google invented the WebP format, ultimate satisfaction of Google will come from supporting WebP, regardless of what actually serves you and your users best.
Sample change
This:
Becomes this:
This will serve the WebP image, in supporting browsers, and will fall back on your older JPEG image for those, like Safari, who do not.
If and when those non-supporting browsers catch up, they will also serve the WebP image, meaning you do not have to change anything.
