Enter WebP images – a modern image format created by Google, that provides superior lossless and lossy compression for images on the web.
According to Google, 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.
Now, how to improve the performance of your website with WebP WordPress images?
Creating WebP versions of the images
If you have a WordPress website, you are lucky, there is a simple solution:
Starting with our 4.1 version of the ShortPixel Image Optimization plugin, we added the possibility to also create WebP images alongside the existing ones when optimizing your images with our service. Just enable the option in the Advanced tab of the ShortPixel settings, in your site’s admin and the WebP images will be created too when optimizing images.
The WebP WordPress versions of the images are only generated when the images are optimized. So, if you need to add the WebP versions of the images after you optimized the images, the easiest way would be to:
- – Restore the images to their originals
- – Check the option “Also create WebP versions of the images”
- – Relaunch the bulk optimization.
Note: Starting May 10th 2021, the generation of WebP images files will cost 1 credit per .webp file. For more information, please consult this article.
Using the WebP images
Starting with version 4.12.2, you’ll be able to display WebP WordPress versions of the images in your WordPress website’s pages:
- Without altering the page code (via .htaccess)
Checking the “Without altering the page code (via .htaccess)” option will insert a new block of code into the .htaccess file, which will make sure that: A. your browser supports WebP images and B. if you have both jpg/png and WebP versions of an image, then the server returns the WebP instead of the jpg/png. 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 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 also the .webp images, thus letting the browser chose the best version according to its capabilities. The <picture> tag contains also a Generate WebP markup tag for fallback reasons, thus also 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 style problems when activating this option and you will need to use the cache plugin solution below. Note: 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 operating the needed 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: 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 “Create an additional cached version for WebP image support” option.
That’s all, you can now enjoy a faster site that smartly uses WebP images!
UPDATE: Now the LiteSpeed Cache plugin is supported too! For this you need to do two things:
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 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).