One of the most common PageSpeed Insights warnings is “Serve Images in Next-Gen Format”. Simply put, the warning requires converting from the older image formats (JPEG, PNG) to the newer ones - WebP or AVIF (for Safari and iOS). Both formats are web optimized. These new formats provide better compression options than the older-generation alternatives.
A couple of words about why WebP should be your choice for image format nowadays:
1. It is supported by all browsers. For example, AVIF is still not supported by Firefox, Edge, Chrome on mobile, and many other browsers.
2. WebP lossless images are 26% smaller than JPEGs. WebP lossy images are 25-34% smaller than JPEGs with an equivalent quality index.
3. It can not only be used for static images but for animated ones as well. Pretty cool!
4. Google has developed the WebP format, and naturally, Google’s PageSpeed Insights will like it.
How to check if images are served in WebP:
You can easily check this via your browser by using the DevTools feature and its Network tab.
To access this, open the “Developer Tools” by clicking F12 or via the Browser Settings > More Tools > Developer Tools.
Once the console is open, navigate to the Network tab, filter the resources there by Images (Img), and refresh the page.
In the above screenshot, we’ve filtered the requests to display only the Images, and we can see that all of them are in the WebP format.
Switching to WebP
This can be done in two ways:
1) Manually - our article here does provide in-depth insight on how this can be done:
> https://nitropack.io/blog/post/nextgen-image-formats
2) Automatically - using, NitroPack.
NitroPack will automatically convert your images to WebP format without the need for further configuration.
Furthermore, you can adjust the image quality as per your desire. By default, it is set to 80 as per Google’s standards; however, you can always re-adjust it.
All you need to do is to go to Cache Settings > Images& Media > Image Optimization:
After doing so, make sure to always clear the cache once you make changes in the Dashboard:
📌 If you need any assistance or have questions, reach out to our support team at [email protected] or via this link: https://support.nitropack.io