2023 internet is bloated. As the hardware improves and network speeds increase — JavaScript developers are tirelessly finding new and creative ways to significantly slow down webpages around the globe. WebP comes to the rescue by reducing image sizes (in most cases).
WebP is an open image format (like jpg, png) released in 2018. Though adoption has been slow initially, in 2023 all major browsers have adopted WebP standard natively.
Only two browsers do not support WebP as of January 2023
- KaiOS
- Internet Explorer
Testing method
To put WebP to the test, we are going to use a performance rubric within Lighthouse Developer Tool in Google Chrome. The site we will test is a static one-page html website with a bunch of hefty jpegs: driftbasic.com
The test is simple:
The original page was slow:
Boasting large jpeg images and painfully slow loading speeds amounting to an overall performance score of 61.
Not all images will benefit from a conversion to WebP
Unfortunately not every image will benefit from being converted to WebP. This is especially true if you have already followed good practices for optimizing your image for web prior to attempting WebP conversion.
From my personal experience of converting over a 100 images to WebP — only two resulted in a larger size. One of them happens to be the largest jpeg image in this case study
So far I am unable to figure out exactly why this happens with some outliers.
End result is a faster page
The other 5 images were converted from jpeg to WebP without any issues
- Image 1: from 78.7kb to 50kb
- Image 2: from 62.3kb to 31.3kb
- Image 3: from 72.0kb to 39.0kb
- Image 4: from 70.1kb to 37.8kb
- Image 5: from 260kb to 48.3kb
- Overall: from 543kb to 206kb
This is conversion resulted in approximately 60% performance improvement 👏 Try it on your website (By the way, WordPress has some helpful plugins to help you do this).
