Few improvements to a website’s speed compare with reducing the file size of images. And if quality can be maintained, it’s a no-brainer to let 10 megabytes do the work of 100.
It’s estimated that images account for about half of a webpage’s file size, so even minor tweaks can yield big results.
That’s where the modern image format, WebP, can help immensely.
Google’s WebP compression study found that a WebP image file is on average:
- 25-34% smaller than a comparable JPEG image
- 26% smaller than a comparable PNG image
It’s no surprise, then, that Google’s PageSpeed Insights often advises developers to serve images in next-gen formats like WebP.
With an average of nearly 30% file size reduction and no discernable loss in quality, WebP is like the “green” file format. Browser compatibility is not an issue with modern browsers and WordPress 5.8 now fully supporting the new format.
WebP supports two types of compression: lossy and lossless. According to Kinsta, “With lossy compression, WebP uses something called ‘predictive coding’ to lower the file size. Predictive coding uses the values of neighboring pixels in an image to predict values and then only encodes the difference. It’s based on VP8 key frame encoding.
“Lossless WebP uses a much more complicated set of methods that were developed by the WebP team.”
Browsers That Can Handle WebP Images
WebP compatibility is not yet universal, but getting close at 95% support.
According to Kinsta, popular browsers supported are:
- Chrome (desktop and mobile)
- Microsoft Edge
- Firefox (desktop and mobile)
- Opera (desktop and mobile)
- iOS and macOS Safari (macOS 11 Big Sur and later only)
Currently, Safari offers partial support for WebP images. Not surprisingly, there’s no support for it on Internet Explorer (but Edge supports WebP).
How to Convert Images to WebP
There are WordPress plugins to convert your PNGs and JPGs, and also preserve an alternative for browsers that don’t support WebP.
So, if you place a JPEG file on your site, the plugin will:
- Convert the JPEG to WebP and serve to compatible browsers
- Show the original JPEG to non-compatible browsers
Everyone will see the image, while also getting the fastest load times.
After evaluating several plugins, including ShortPixel and Imagify, the simplest one to set up and get started serving WebP images was Optimole, currently with a 5-star rating and no need to modify server rules.
Optimole can automatically resize images, as well as serve your images via its CDN (through Amazon CloudFront). It also offers real-time adaptive images, optimally-sized images for each visitor’s screen size.
Optimole delivers WebP images to visitors with supported browsers as part of its real-time image optimization. There’s a limited free plan that can handle serving images to around ~5,000 visitors per month. Paid plans start at $19 per month.
After installing the plugin, you activate it with an API key (comes with a free Optimole account). Then, Optimole starts optimizing your images and delivering them through its CDN.
It’s important to note WebP support is already on by default.
It’s a Good Time to Upgrade
WebP has been around for a while, over ten years. And finally, browser support for it has grown. It’s estimated that around 95% of browsers in use support WebP, and WordPress is now onboard with version 5.8 and beyond. That makes it a great time to make the switch.
For the browsers still not supporting WebP, just be sure to choose a plugin that will still serve the original image formats.
If you need help optimizing your website, from converting images to WebP to enhancing Core Web Vitals, feel free to reach out to the experts here at Hall.
Subscribe via RSS
