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.