WebP Images
With the release of WideRange Galleries version 5.4, our websites are now equipped with the next-generation WebP image format! WebP is a modern image encoding format that offers significantly smaller file sizes resulting in faster loading pages and reduced bandwidth consumption.
WebP vs. JPG : Image Quality & File Size
How do WebP images stack up to good old fashioned JPG images as far as image quality and file sizes? After extensive testing, here are my conclusions:
- Generally speaking, WebP image quality is not quite as good as a 70-quality JPG, but the filesizes are roughly half the size.
- A comparison between 50-quality JPG is a more realistic comparison; here the WebP files have slightly better quality and slightly smaller filesizes, in general.
- WebP is great for highly detailed images, with significantly lower filesizes than JPG and no discernible quality difference.
- WebP image quality can suffer a bit in smooth gradients (like sky or cloud gradients) where there can be some blocky, grid-like compression artifacts, particularly in dark tones like dusk/dawn skies.
- In images with very subtle tonal differences, detail can sometimes be lost or smoothed-over.
- WebP does great with smaller-sized images like thumbnails - the file sizes are almost always less than the JPGs. For larger images, like over 1600px, the file size savings are not always so predictable.
The results of my testing were promising enough that it was a no-brainer to implement WebP images across the board on all our websites. I think the average viewer would rarely notice the occasional subtle image degradations mentioned above, but would notice the quick loading images and speedier page performance!
WebP vs. JPG : Examples
Let's dive into some direct comparisons of JPG images and their WebP counterparts.
Note that the JPG images below were generated by Adobe Lightroom's Export panel, at an optimization/quality setting of 70, sized to 1200px wide. The WebP images were automatically generated by the WideRange admin from those uploaded JPG files.
* You should probably view this page on a desktop screen to see the subtle differences.
JPG : 691 kb
WebP : 405 kb
With a highly detailed image like the above, the WebP version is 59% the size of the JPG, with no discernable loss of image quality. WebP for the win!
JPG : 527 kb
WebP : 294 kb
Here's a "normal" landscape image, with some detail and a clear sky. Here the WebP version is 56% the size of the JPG, again with no loss of images quality that I can see. WebP wins again!
JPG : 187 kb
WebP : 77 kb
If we look closely at the images above we can start to see how WebP images struggle with soft gradients, with some subtle blockiness in the sky and some noticeable banding artifacts in the reflection. The WebP file is a mere 41% of the size of the JPG, but is it worth the quality loss? Tough call - probably most people wouldn't notice the difference, but I'd probably opt for the JPG here.
JPG : 68 kb
WebP : 14 kb
Finally, with the dawn images above I wanted to show you the Achilles' heel of WebP compression: soft gradients with darker colors. The WebP file is a mere 21% the size of the JPG, but the compression artifacts are obvious enough that I would definitely display the JPG instead of WebP.
WebP vs. JPG : In Practical Use
I chose the last two examples above to show the worst case scenarios when WebP image quality falls apart, but to be honest examples like this are not actually that common. For the vast majority of our images, the WebP files will have no noticeable image quality degradation but will have significantly smaller file sizes. Even when there may be very subtle compression artifacts, chances are that 99% of your viewing audience will never notice. But, 100% of your audience will benefit from faster loading pages and less bandwidth consumption (especially when burning through mobile data plans).
Additionally, Google will appreciate the use of WebP images in their PageSpeed reports, and they have made it clear that page performance does indeed affect their search rankings.
Considering the above, it was an easy decision to implement WebP images as a default for all our websites.
But what about those occasional cases when the WebP image quality is simply unacceptable? In the WideRange admin, you can turn off WebP on a per-image basis. So for the last two images above, I would just turn off WebP and let the JPG images display instead.
WebP in WideRange Galleries
Here are some practical points about the use of WebP images in WideRange Galleries:
- You will still upload JPG image files just like before; the WebP versions are automatically generated by the admin software.
- Because the WebP image generation is processor intensive, you may notice that uploading is a bit slower than before, with a pause at the end of each photo upload as the system generates the WebP files. But for the reasons mentioned above, it's worth it to have a little more patience!
- You can turn OFF WebP images on a per-image basis, so if you don't like how a certain image looks with the WebP compression, just switch it off for that photo. You can find this toggle on the right side of the photo modification tables in the admin (in the Photos > Modify section).
- If you are a photographer with lots of photos with soft gradients and WebP just isn't your cup of tea, you can completely disable WebP sitewide on the Photo Settings page in the admin.
- There are instances when the WebP image may actually have a higher file size than the JPG, and in that case the website will automatically display whichever file has the lowest file size. (This may be more common if you have already aggressively optimized your JPG images).
- As of May 2021, WebP images have 94% worldwide browser support, but for the other 6% of users they will still see the fallback JPG image.
Those of you who obsess over your website's Google performance reports will likely appreciate this new WebP image feature, as it will save a ton of bandwidth and boost our page speeds - which is particularly important on image-heavy websites like ours.
Please contact me if you have any questions!
