Contents
If you want to speed up your WordPress site, reducing the size of your images is a big step in that direction. On average, images are about half the size of a web page, so even small improvements can lead to big results.
WebP is a modern image format that can help reduce the size of photos without changing the quality. Converting an image to WebP can reduce its size by ~25-35% with no apparent loss in quality.
That’s why we’ll take a closer look at the WebP format in this article!
Contents
What is WebP?
When it comes to saving images for use on the web, there are a number of file types that you can use. The three most common formats are PNG, JPEG (or JPG) and GIF. Although these formats are popular, each has its pros and cons:
- JPEGs can display images with lots of detail, with lots of color, making them ideal for photos. At the same time, the files are often very large and do not always behave well under compression.
- PNGs are ideal for images without a lot of data, such as logos or screenshots of the interface, icons. They preserve quality perfectly when compressed and maintain transparency, but don’t work well for photos.
- GIFs are great for animations, but not for saving static images.
WebP is a format developed by Google designed to allow images to be displayed on the web with a quality similar 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 c:
- 25-34% smaller size than comparable JPEG images.
- 26% smaller size compared to PNG.
That’s why if you’re testing your site through PageSpeed Insights, one of the many recommendations is to use images in next-generation formats like WebP:
How does WebP achieve file size reduction?
WebP supports both lossy and lossless compression, so the exact image file size reduction will depend on which type of compression is used.
Lossy compression in WebP: In this type of compression, WebP uses something called “predictive encoding” to reduce the file size. Predictive encoding uses the values of neighboring pixels in an image to predict values and then only encodes the difference. It is based on VP8 keyframe encoding.
Lossless compression in WebP: In this type of compression, WebP uses a much more sophisticated set of methods developed by the team behind WebP. WebP’s lossless compression uses already seen image fragments to accurately reconstruct new pixels. It can also use a local palette if no suitable match is found.
If you want to learn more about WebP compression techniques, this article is a good starting point.
How does WebP contribute to faster WordPress loading?
As previously mentioned, the main purpose of this image format is to provide a smaller size option for images that are used on the web to help pages load faster.
Image files take up space – no matter what format they are saved in. The more images and other media files that are added to the site, the greater the chance of increased loading speed. Keeping pages loading quickly is extremely important, as slow sites drive visitors away before they’ve even seen what’s on offer. Additionally, the loading speed of a website is now considered a ranking factor by Google.
Compressing images makes them smaller and more efficient, but usually results in a loss of quality. In general, the more an image is compressed, the worse it starts to look. The specific file format affects how strong this effect is.
Images saved in WebP format can be significantly smaller than JPEG and PNG with the same quality. WebP lossless images function as a replacement for PNG and the files are about 26% smaller. Lossless compression in WebP images, on the other hand, are about 25-34% smaller than JPEG.
Note that both types of compression in WebP support transparency. JPEG does not support transparency as a feature, but WebP in lossy compression does.
Learn more about.
Which browsers support WebP?
For images in WebP format to work, the user’s web browser must support it.
WebP images are supported by almost all browsers such as:
- Chrome
- Firefox
- Edge
- Opera
- Safari – has partial WebP support as a requirement to use macOS 11 Big Sur and later versions.
- Internet Explorer – does not support WebP (but Edge supports WebP, as it is based on Chromium).
How to use WebP images in WordPress?
Until now, WordPress does not natively support images in WebP format – that is, they cannot be uploaded to Media such as PNG/JPG, as not all browsers supported this file format. To use WebP in WordPress up to version 5.7, you need to use a plugin:
- ShortPixel
- Imagify
- Optimole
However, WordPress 5.8 is coming out and the best part is that it will support WebP. ????
Creating WebP images
Image editing tools like Photoshop support exporting to WebP. Web-based tools like Squoosh can also be used. Once you save your images as WebP, you can upload them to WordPress and use them like any other image.
Using WebP in WordPress
WebP images work like any other image in WordPress with some minor notes.
WebP images support lossy and lossless compression as well as animated format and transparency. In WordPress, the lossless WebP format is only supported when the hosting server uses Imagick, while LibGD has added support for WebP. Additionally, animated and alpha formats are not yet supported for resized images (instead, lossy images are created when uploading to these formats).
WebP support in the WordPress media library requires that the web server’s image processing library (WordPress supports both Imagick and LibGD) supports the WebP format. Fortunately, these libraries have supported WebP for quite some time, so support is widely available. If your web server doesn’t support WebP, you’ll see an error message when trying to upload an image in WebP format.
If your visitors are primarily using an unsupported browser (such as IE11 for example) it is best to avoid using WebP images.
WordPress plans to use WebP as the default image format in the future, with PNG/JPG uploads automatically converted to WebP.
Frequently Asked Questions ✌️
What is WebP?
WebP is a new modern image (photo) compression format developed by Google. WebP aims to replace popular formats (such as JPEG and PNG) by reducing file sizes dramatically, with no noticeable difference in image quality.
How much do we save with WebP?
WebP is 25-34% smaller in size than comparable JPEG images and 26% smaller in size compared to PNG.
How does WebP work?
WebP supports both lossy and lossless compression. Lossy compression in WebP: In this type of compression, WebP uses something called “predictive encoding” to reduce the file size. Predictive encoding uses the values of neighboring pixels in an image to predict values and then only encodes the difference. It is based on VP8 keyframe encoding. Lossless compression in WebP: In this type of compression, WebP uses a much more sophisticated set of methods developed by the team behind WebP. WebP’s lossless compression uses already seen image fragments to accurately reconstruct new pixels. It can also use a local palette if no suitable match is found.
Which browsers support WebP?
All modern browsers in their latest versions support the WebP image format. Safari has partial support as it is necessary to use macOS 11 Big Sur and later versions.
Is WebP supported in WordPress?
Support for WebP will be available from WordPress 5.8. In older versions it is necessary to use plugins such as ShortPixel, Imagify, Optimole.
Final words
What is WebP? It’s an image file format that has the potential to speed up your website by reducing the size of images even more than using compressed PNG or JPEG files. WebP comes with lossy and lossless compression, smaller file size and comparable quality to PNG/JPG.
Learn more about our WordPress and WooCommerce Speed Optimization service.
