When we first heard about “Next-Generation Image Formats” we just thought “What? What is that about and why would we need this?”
The term “Next-Generation Image Formats” refers to newer image formats WebP, JPEG 2000, JPEG XR. These are newer image formats than JPG or PNG, the good old image formats we are all used to work with ever since.
Each of these new file formats, WebP, JPEG 2000 and JPEG XR, promises to have advanced compression algorithms compared to our traditional and well-known companions JPG and PNG. Better compression for images means, smaller file sizes while retaining the quality characteristics of an image.
Smaller images mean better performance, faster page loads. Sounds good, right?
Can we improve Magento 2 performance through image optimization by using e. g. WebP?
To be honest, we were quite skeptical when we started looking into this…
Will WebP, JPEG 2000 and JPEG XR Ever Be Useful In The Real World?
If you ever looked into image compression algorithms, you know that there is some crazy stuff being done here. Definitely impressing and interesting, but for sure also quite geeky if we may say so. But no worries, this post is not about going into deep technical details. We are not going to bore you with mathematical formulas, alpha channels, and other geeky details. Let’s rather take a look at this from a user perspective:
Of course, one of the firsts things we wanted to do was to create and see an image using these file formats. Saving or viewing e. g. a WebP image using Photoshop or other graphics software, viewing a WebP image in Windows or Mac in image previews…
Oh bummer, it just didn’t work that simple as we are all used to with JPG or PNG. The tools we tried just did not support WebP and the other alternatives. That didn’t help to dispel our doubts but rather increased our concerns. If it’s already a challenge to find a tool just to use and work with a new technology, how can it ever be widely used, become an established and generally accepted standard? Technology has to just work for the average user, otherwise, it will just fall behind alternatives that are easier to use, even if being more advanced from a purely technical point of view.
Anyway, being always curious and open about new technologies we didn’t just give up at this point but continued investigating.
How is about Browser Support for WebP, JPEG 2000 and JPEG XR?
So in order to benefit from newer image formats and ensuring a decent browser coverage, one would need to go for 3 different formats? That sounded like a huge effort and long road to go just for having somewhat smaller images…
Doing some more research regarding the history and expected future of these file formats did not really reveal a better situation. Actually, these “new” file formats have been around for a few years already. But still, none of them has reached a state where it could be considered a widely accepted and supported web standard. The situation looked like a dead end, with each browser vendor having made his decision to go with one of the new file formats.
Since we are web developers and a Magento Agency, we are always looking for opportunities to improve our clients Magento stores, make them better, faster, nicer… Hence, the all-important question for us: Can browsers work with these types of images at all? The state of browser support back then was sobering, at least at a first glance:
- JPEG XR only supported by IE/EDGE
- JPEG 2000 only supported by Safari
- WebP only supported by Chrome and Opera
Totally unclear if there will be ever a common understanding between browser vendors, whether there will be one file format succeeding over the others by receiving support from all browsers. Not to speak of all formats eventually being supported by all browsers.
But there was one KPI that gave a somewhat different picture to the situation: The market share of internet browsers.
With IE / EDGE being used by less than 5% of internet users and Apples Safari being used by less than 15% of internet users, there was WebP standing out against its competitors by being available to around 75% of internet users, thanks to being supported by Chrome and Opera.
Ok, now that’s something to work with, an optimization measure that might improve a website for at least 75% of its users is something worth looking at, right?
So, despite the somewhat unclear situation, we did not give up on this yet, but decided to take it one step further. We decided to ignore JPEG XR and JPEG 2000, the marginal market share of browsers supporting them was just too small to justify going further with these. But decided to analyze further on WebP. We wanted to know, how good is WebP and how big are the benefits that can be achieved by using WebP instead of JPG or PNG?
Hence, as a next step we decided to conduct a small study with a wider range of images to exclude the possibility that these great results in our spot checks related to the images we used.
As Magento Agency and developers, we opted to give it a try using the full set of 725 demo product images from Magento Luma Theme. This allowed us to have a bigger sample size and also results that can be reproduced by anyone. And guess what? This study at least fully confirmed our initial results!
Our Analysis Showed Impressive Results For WebP Optimized Images
As a first step for understanding how much better WebP might be compared to JPG or PNG, we just converted some random images and checked on the results regarding quality and file size.
To be honest, our first thought was, we must be doing something wrong, and we must be missing something here…
The results we were seeing were impressing, just too good to be true!
Challenge accepted! As soon as we understood about the chances for optimizing performance, speed and page load time by using WebP, we started planning and developing an extension that allows any Magento 2 store to use WebP easily.
Aiming at a solution that is not only easy to use but works with any browser, no matter if WebP images are supported or not, does not cause any extra efforts for creating and maintaining WebP image variants and does not cause any extra costs for and dependencies from 3rd parties.
Of course, we also added some extra goodies for ease of use, compatibility, avoiding conflicts with other custom functions as far as feasible and in general ensure solid robustness of our extension.
Even more, due to the great feedback we received from the community and clients using our extension, we continuously improved our extension based on feedback and questions we received.
Using cwebp as conversion tool, even when increasing the compression up to quality level 50 (with 100 being lowest, 0 being the highest compression rate), the image quality still remain at least decent, if not visually the same and sufficient for the very most use-cases. But the file size got reduced by a whopping 76%.
We were truly amazed to see these numbers. Incredible! (See details on our WebP vs. JPG study incl. (high-resolution) comparison between JPG and WebP in different quality / compression levels.)
So the numbers from our study proved that WebP is a serious optimization option. With indeed superior compression algorithms that allow having significantly smaller sizes while retaining the quality characteristics of images. But we also know there are still some downsides coming with WebP (Limited Browser Support, lack of support in common tools, additional effort of creating/maintaining images in multiple file formats…).
The only logical conclusion for us was: Can we use WebP images with Magento with all its benefits, but avoiding the downsides coming with the current state of WebP?
Using WebP With Magento 2 With JaJuMa WebP Optimized Images Extension
As of now and after some smaller releases the extension is already available in version 2. We are proud to say that it is probably the most powerful and flexible, yet easy to use and likely also the most cost-efficient way available for adding WebP support to any Magento 2 store.
Conclusion
There is no question about this, WebP is a great piece of technology, allowing impressively smaller file sizes for images when compared to JPG or PNG. And we do not regret our decision to work with WebP, but leave JPEG 2000 and JPEG XR out.
Of course, when adding WebP support to a Magento store or website in general, there are certain points to be considered.
That is in the first place the browser support which is still limited. But the situation regarding browser support has improved since we started working with WebP and the first release of our extension. Firefox and EDGE are now supporting WebP, leaving only Apple and Safari as the only major browser that withholds its users from the joy of viewing (and faster loading of) WebP images. And the adoption rate of WebP seems to be growing steadily. Probably WebP being developed and promoted strongly by Google helped with WebP becoming the winner in this battle of image formats, leaving the other alternatives behind.
With HTML5 <picture>-tag and (for cases where this was not suitable) WebP browser support detection by other means, we have solutions that allow us to ensure 100% browser compatibility. Means, serve WebP images to customers using supported browsers while still providing JPG / PNG images to customers using Safari or other less advanced browsers.
Then there are the efforts that would come with manually creating and uploading WebP images. Even with a rather small e-commerce / Magento store, this would quickly become just too much effort to handle (and is not supported by Magento out-of-the-box anyway).
But with our extension that handles the conversion of WebP images and delivery to your customers automatically, that is nothing to worry about ;-). As of now, we are supporting 3 different conversion tools with our extension to do the job, making it easy to get it up and running on literally any server environment.
A WebP conversion test & preview tool in Magento backend, a dedicated WebP image cache, and some more features and goodies complete our WebP Optimized Images extension to be the perfect and easy to use solution for adding WebP support to your Magento 2 store.
All in all, WebP is an improvement that literally no Magento store can afford to miss out on. Your customers and also Google expect rocket fast page load times. Not only, but especially your customers using slow internet connections like 2G/3G will be grateful for this improvement.
With an extension like JaJuMa WebP Optimized Images, providing everything you need and more for using WebP in your Magento store, there is no excuse for not making use of this optimization for speed and performance in your Magento store.
