Serve images in next gen formats
This means that the URL contains images that are in older formats (BMP, JPEG or PNG).
Why is this important?
Older image formats do not offer the level of compression or quality characteristics as their newer, 'next-gen', counterparts: JPEG 2000, JPEG XR and WebP. Using a next-gen image format allows you to further reduce image file sizes.
What does the Hint check?
This Hint will trigger for any internal URL that contains images in BMP, JPEG or PNG format, which could be optimized by switching to WebP.
In order to do this, Sitebulb collects each BMP, JPEG, and PNG image on the page, and then converts each to WebP. For each image, it then compares the size between the two, and will trigger the Hint if any potential savings are over 8KiB.
How do you resolve this issue?
Of the next-gen formats, WebP is the recommended format as it is most widely used as is supported by most modern browsers. Typically, switching to WebP images can reduce image file sizes between 25-50%.
Depending on the size of the website, and the number of images you are dealing with, there are multiple ways to handle the switch;
- Use a bulk WebP converter
- Use a JavaScript runtime environment like Node.js to convert JPEG/PNG images to WebP.
- Use a plugin on your CMS (e.g. WordPress) to optimize and serve WebP images.
Note that you may also wish to serve fall-back JPEG/PNG versions if you are aware you have lots of users on browsers that do not support WebP.
This issue should be discussed with your developer to determine the most appropriate method, based on the specific site setup and resources available.
Further Reading
- Serve images in next-gen formats (Lighthouse documentation)
- Using WebP Images
- How To Serve Images In Next-Gen Formats Using WordPress
