Meet WebP images – a next-gen image format created by Google, that provides superior lossy and lossless compression compared to JPG, PNG, and GIF formats.
Why WebP images instead of other formats?
According to Google‘s comprehensive study, lossless WebP images are 26% smaller in size compared to PNGs. Lossy WebP images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3 times smaller file sizes compared to PNG.
That’s a huge improvement. The reduced file size WebP images offer without having to reduce image quality leads to a faster page speed.
Which browser supports WebP images?
The web browser used by the visitor needs to support WebP images for them to load. While browser support has expanded lately, WebP is still not a universal format for all browsers.
At the time of writing, WebP images are supported by popular browsers such as:
- Microsoft Edge
- Safari on iOS
- Safari on macOS – partial support limited to macOS 11 Big Sur and later
- Android Browser
- Opera (desktop and mobile)
More than 93% of users operate a web browser that supports WebP images.
In our tutorial below, we will explain how you can easily create and serve WebP images to improve your page speed and improve your visitor’s experience.
How to create WebP images in WordPress?
If you have a WordPress website, you are lucky, because there is a simple solution to create WebP images.
Using ShortPixel Image Optimizer, you can create WebP images alongside the existing formats when optimizing your images. After installing the plugin, navigate to Settings > ShortPixel > Advanced and enable the option.
The WebP WordPress versions of the images are only generated when the images are optimized. So, if you need to add the WebP images after you optimized your files, the easiest way would be to restore the images to their originals, check the option to create WebP images in the advanced settings menu, as seen below, and then finally re-launch the bulk optimization.
How can I serve WebP images on WordPress?
Using bult-in solutions of a plugin
You are able to serve WebP versions of the images on your WordPress website using a plugin such as ShortPixel Image Optimizer, which comes with two delivery methods:
Without altering the page code (via .htaccess)
This delivery option will insert a new block of code into the .htaccess file, which will make sure that your browser supports WebP images. Also, if you have both JPG/PNG/GIF and WebP versions of an image, then the server serves the WebP instead. This has the benefit of serving directly WebP images files without altering any of the page code.
Altering the page code
Now you can use the WebP image format by simply checking the corresponding “Using the <PICTURE> tag syntax” option in the advanced settings tab of ShortPixel and all your <img> tags will be replaced with <picture> tags that include the WebP images, letting the browser chose the best version according to its capabilities.
The <picture> tag contains also a Generate WebP markup tag for fallback reasons, allowing the styles to remain in place. In some rare cases – when the styling of your images relies on positional queries ( :first, :nth-child selectors or “>” direct child reference ) you might encounter styling problems when activating this option and you will need to use the cache plugin solution below.
The second option can be implemented either by hooking onto WordPress’s own functions (a more limited, but a bit safer method) or by simply analyzing all the code in a page and doing the required changes before serving the page to the browser (this ensures more independence from any third-party tools that might not operate through the official WordPress channels and methods).
Cache plugin solution
Using Cache Enabler
You can also use a cache plugin that is WebP aware. We’ve tested the Cache Enabler plugin and it works out of the box with ShortPixel in delivering the WebP images. You just need to install and activate it, then go to Settings > Cache Enabler and check the option to “Create an additional cached version for WebP image support”.
Using LiteSpeed Cache
You can also use LiteSpeed Cache plugin to serve WebP. After creating your WebP files, you can serve them by following the instructions below.
1. Add this constant in wp-config.php:
2. Activate the LiteSpeed’s Advanced settings:
3. Activate the WebP delivery options:
4. Do not activate LiteSpeed’s option to generate the WebP images files – ShortPixel Image Optimizer will generate them when optimizing the images (if you already have optimized images, you will need to do a Media Library Restore and then run the bulk again).
Now that you know what WebP images are and how can they speed up the performance of your website, why don’t you give ShortPixel Image Optimizer a try and start creating and serving them?
You can sign up for a free account here that includes 100 credits per month, which you can spend on compressing your images, as well as generating WebP.
We’d love to hear your thoughts! Drop us a line below and let us know if you have any questions or recommendations about WebP images.