What are next-generation images?
The most popular image formats served across the web are PNG and JPEG. While PNGs are optimised to be high-quality images they are also weighty in file size. JPEGs are slightly smaller in size but are lower in quality.
Without converting to next-gen images, file type selection based on usage is paramount. This will however be time-consuming ensuring that images that need to be high quality are used where needed, but not overused causing a reduction in page speed, while less important images should be served as JPEGs.
There are multiple Next generation formats such as:
- WebP
- JPEG 2000
- JPEG XR
- AVIF
These image formats all have much better compression than their PNG/JPEG counter parts and are able to retain quality while also greatly reducing file size.
WebP Image Format
WebP is a Google open-source image format. WebP can achieve 30% more compression than other file formats including some other next-gen image formats such as JPEG 2000.
WebP also supports the following:
- Animation
- Lossless compression
- Lossy compression
- Alpha channel transparency
WebP currently has much more browser support than JPEG 2000 and JPEG XR, which makes it my go to at the moment. Same goes for AVIF, although in some cases AVIF does out perform WebP the support just isn't there for all major browsers yet.
I would also argue that as WebP is a Google developed image format, that they may have a slight bias towards the usage of it and it's overall impact. Not to mention the compatibility improvements that Google will be able to easily push across all browser types.
Browser Compatability
The below images demonstrate the compatability of each image type across the different browsers. This is another reason we will stick to WebP for now, as it will provide users with the best expereince possbile, across the most browser types.
WebP vs AVIF
JPEG 2000 vs JPEG XR
source: https://www.lambdatest.com/web-technologies/webp
Quality & Size Comparison
Let's look at the difference in file size and quality in a live demonstration on this page. Below are two of the same image, the one on the left is the original and the one on the right is a compressed WebP version
JPEG - 341KB
WebP - 174KB
How to convert images to WebP Online
If you want to utilise WebP, there are many free online "X to WebP" image converters online that you can use to freely convert images. I have listed some below that I have used for single converts in the past with no issues.
- https://convertio.co/jpg-webp/
- https://image.online-convert.com/convert-to-webp
- https://cloudconvert.com/webp-converter
Most popular image editing programs don't have a default WebP export function however you may be able to find plugins that do allow for WebP exporting.
If you are using a popular CMS like WordPress, you can also download multiple plugins that in some cases may convert and deliver these images on the fly and will require no changes to your current website.
How to bulk convert images to WebP
You may have multiple images from previously released content. In this case, it would be better to create a simple Python script to convert these images to WebP in bulk.
Most online image converters have limits per day for how many images you can convert, either that or will charge a fee for each conversion over your daily allowance.
If you are unsure where to start, I have also written a short piece on how you can create a Python script to locally convert images to WebP.
Serving WebP Images
The most popular way to achive this is to use a HTML markup that will allow you to serve the WebP image but also state a backup image type. This will help us deal with any compatibility issues, if a user is using an outdated browser that doesn't support WebP they will be servered the original PNG/JPEG file type.
Here is an example of using the picture tag to serve WebP images with a backup.
<picture>
<source srcset="image/RandomWebPImage.webp" type="image/webp">
<source srcset="image/RandomWebPImage.webp" type="image/webp">
<source srcset="image/BackupJPEG.jpg" type="image/jpeg">
<img src="img/BackupJPEG.jpg" alt="Alt Text!">
</picture>
We use an img tag at the end of the picture element for browsers that don't support this markup as it will ignore it and just use the img tag.