WebP is a web image format developed by Google that can offer smaller image file sizes at a similar level of quality to existing image formats. In this post, we’ll dig further into the question of “what is WebP?” and share more about the format.
We will also talk about the pros and cons of WebP images and how you can start using WebP images on your WordPress site.
What is WebP? Explained in more detail
When it comes to saving images for use on the web, there are a number of file types you can use. The three most common options are PNG, JPEG (or JPG), and GIF. While these formats are popular, each has its own unique pros and cons:
- JPEGs can display highly-detailed images with lots of colors, making them perfect for photographs. At the same time, the files are often very large and don’t always hold up well under compression.
- PNGs are ideal for images without a lot of data involved, such as logos or interface screenshots. They’re excellent at retaining quality when compressed, and support transparency, but don’t work well for photographs.
- GIFs are excellent for animations, but not great for saving static images.
WebP images are an image format from Google designed to let you display images on the web at a similar quality level to existing image formats, but with a smaller file size.
To achieve this, WebP provides both ‘lossy’ and ‘lossless’ compression options. The latter preserves more data, while the former makes the resulting file sizes even smaller.
According to Google’s data, WebP images are on average:
- 25-34% smaller in size than comparable JPEG images.
- 26% smaller in size compared to PNGs.
You can view a full side-by-side comparison at the WebP Gallery.
The pros and cons of using WebP images on your site
Now that we’ve answered the question of “what is WebP?”, let’s talk about why it matters by discussing the pros and cons of WebP images.
Pros of WebP images
As we’ve alluded to already, the primary goal of this image format is to provide a web-focused option that’s superior to both PNG and JPEG in most situations.
Image files take up space – no matter how they’re saved. The more images and other media you add to your site, the greater the chance of laggy performance. Keeping your pages loading fast is incredibly important, since slow speeds drive visitors away before they’ve even seen what you have to offer.
Compressing image files makes them smaller and more efficient, but usually comes at a loss of quality. In general, the more you compress an image, the worse it looks. However, the particular file type you’re using has an impact on how extreme the effect is.
Images saved in a WebP format can be made significantly smaller than JPEGs and PNGs at the same quality. Again, lossless WebP images function as a replacement for PNGs, and the files are about 26% smaller. Lossy WebP images, on the other hand, are around 25-34% smaller than JPEGs.
Also notable is that both types of WebP images support transparency. Transparent images are incredibly useful on the web – you can use them for logos and other branding, just as one example. JPEGs don’t offer transparency as a feature, but lossy WebP images do.
Cons of WebP images
If WebP offers so many benefits, why isn’t it being used by more people? The primary drawback is that WebP images are not currently supported by all browsers, though more and more browsers have been adding support.
- Chrome – 68.78% desktop / 61.71% mobile
- Firefox (desktop only) – 9.87%
- Edge – 4.7% desktop
- Opera – 2.44% desktop / 2.14% mobile
- Samsung Internet – 6.4% mobile
- Baidu Browser
No WebP Support:
- Safari – 8.64% desktop / 22.84% mobile
- Internet Explorer – 3.7% desktop
- Firefox for Android – <1% mobile
- UC Browser for Android – 4.79% mobile
So while most web browsers do now offer WebP support, there are still a non-trivial number that don’t have support (most notably, Safari).
Fortunately, you’re not losing anything by using WebP on your site, since you can simply include backup PNG and/or JPEG images that display to visitors with browsers that don’t support WebP images. This requires a bit more work, but can be worth it for the performance savings.
How to use WebP images on your WordPress site
Of course, as a WordPress user, it’s not enough to ask “what is WebP?” You also need to know whether this type of image can be used alongside WordPress. Just like browsers, not every website builder and Content Management System (CMS) supports the WebP format.
The bad news is that WordPress doesn’t currently support WebP images by default. However, you can still use the WebP format on your site – it will just require one or more additional tools.
Optimole is our new image optimization solution that has a lot of cool featured under the hood. Apart from being able to have all your images optimized automatically and then get them served through a CDN, you also get to experience the benefits of WebP images.
The way Optimole enables WebP images is pretty neat. The plugin converts your images to WebP automatically if the visitor’s browser supports them. If the browser doesn’t support WebP, a normal version of the image will be served.
There are also alternative tools that enable WebP images if you’d like to experiment more with what’s out there.
- Jetpack has an image CDN module that works with WebP images.
- You can also enable WebP by combining ShortPixel / EWWW Image Optimizer with Cache Enabler. Both of these image optimization plugins let you convert your JPEGs and PNGs into WebP images. Then, you can use the Cache Enabler plugin to actually serve those files up to visitors with browsers that support WebP. Once you install Cache Enabler, go to Settings → Cache Enabler in your dashboard, and select Create an additional cached version for WebP Image support.
Any of these methods will get the job done, so you’re free to use the plugins you prefer. The performance boost to your website can be significant, so it’s worth setting up one of these solutions if you have an image-heavy site.
What is WebP? It’s an image file type that has the potential to speed up your website, even more so than by using compressed PNGs or JPEGs. WebP comes in both lossy and lossless varieties and produces smaller file sizes at a comparable quality.
Though its popularity is growing, WebP isn’t yet supported on all browsers. However, it can still be worth using this image format on your site, especially if you upload a lot of images. As a WordPress user, you have several options for setting up WebP support – one of the best being Optimole.
Do you have any questions about the WebP format and how to set it up in WordPress? Ask away in the comments section below!