Either JPEG for standard images or PNG for images that manage transparency. But these formats are a bit outdated: JPEG is from 1991 and PNG is from 1996.
We're your Core Web Vitals Developers!
We will fix the core web vitals issue on reported URL's then submit them until they are in the 'Green' section..
Generally, when you want to put images on your website, you use the classic formats.
Technology is evolving, and image formats are focused on new web image formats. To optimize a website for speed, prefer to use next-gen image formats like WebP.
In this article, we are going to Understanding the “Serve Images in Next-Gen Formats” concept & its importance for Performance.
What are Next-gen Image Formats?
These are image formats that have superior compression and quality characteristics compared to PNG or JPEG formats. Specifically, these are formats such as JPEG 2000, JPEG XR, and WebP. With these formats, in addition, images are downloaded faster and less mobile data is consumed.
Of these three ‘next generation’ formats for websites, the WebP format is the most suitable for its compatibility and because it offers better compression with less loss of quality.
For its part, the JPEG 2000 format is currently much more limited, being incompatible with all browsers except Safari.
And in the case of the JPEG XR image format, it is currently only supported by Internet Explorer and Edge.
It is clear that still ‘images with next generation formats’ are not being implemented on websites due to the lack of incompatibility in all browsers. Of course, if we have a website where we know that most of our traffic uses the Google Chrome browser, it may still be interesting to start using the WebP format to improve the loading speed of our site.
If a user comes to our website with a Firefox browser, only the image would not be displayed.
It is also true that there are many other factors that we can improve before changing the format of the images to increase the loading speed of our website. The decision will always depend on the specific website and whether or not it is convenient for us to have browsers where our images are not seen.
Next-generation Image Formats
JPEG 2000
- Created by the Joint Photographic Experts Group committee.
- Supports alpha (transparency), RGB / CMYK, 32-bit color space, lossy or lossless.
- Its average compression gain is 10% compared to the original image.
JPEG XR
- Created by Microsoft.
- Supports alpha, RGB / CMYK, lossless, progressive decoding, 32-bit color space.
- Its average compression gain is 15% compared to the original image.
WebP
- Created by Google
- Supports alpha, lossless.
- Its average compression gain is 40% compared to the original image.
Next-gen Image Formats’ Importance for Performance
Search engines like Google prefer sites that load quickly. In other words, the faster your site load time, the more likely it is to rank ahead of your competitors in search results.
Also keep in mind that images make up a large part of the weight of a web page, roughly 65%. And with WordPress 5.8, you’ll be able to use the WebP image format the same way as JPEG, PNG, and GIF formats. Now WordPress supports WebP image formats.
Also according to Google’s Core Web Vitals update, Google prefers to serve WebP Image Formats.
That is why it is interesting to see these new image formats: because they are designed for today’s web.
They allow greater compression of images and thus improve the loading time of websites.
Also, keep in mind that the faster the web page loads, the better the user experience.
It is estimated that sites that take more than 3 seconds to load lose almost half of their users.
The advantages of these new image formats are, therefore:
- Better positioning
- Improve user experience
- More efficient website.
Conclusion
All websites are not the same so if a site desperately needs something, that does not mean that yours needs it.
Eventually, the WebP image format will be available and I think that this will be the right time to jump into these Next-gen image formats.
Hopefully, this article is useful and can help you in understanding the next-gen Image Formats concept and its importance for Performance.
If you have any question or suggestion, don’t hesitate to share your thoughts in the comment box!
