Meet WebP – a modern image format created by Google. It provides perfect lossless and lossy compression for online images.
According to Google, WebP lossless images are 26% lighter than PNGs. The size of WebP lossy images is 25-34% smaller than JPEGs with the same SSIM quality index. Lossless WebP format supports transparency (also known as alpha channel) adding just 22% of additional bytes. Lossy compression supports transparency too and provides 3x smaller file size compared to PNGs with lossy RBG compression – that’s a huge improvement.
So how can you leverage this new format to improve your website performance?
Creating WebP Versions of Images
Note that you can’t replace JPG, GIF, or PNG with the same WebP images, as they are not supported by all browsers. However, if you have a WordPress website, consider yourself lucky – there’s a simple solution.
Starting with the version 1.3.5 of Robin image optimizer, we’ve added a feature to convert JPG & PNG images to WebP. Whenever you optimize JPG & PNG images, the plugin will create additional WebP copies of them. It will cost you some disk space. But you can use smaller WebP images on the supported browsers and stick to JPG & PNG copies on the unsupported ones.
Install Robin image optimizer, activate the Premium version and go to the settings page. Find Convert images to WebP option and press On. Now the plugin will create WebP copies of your images.
How to convert to webp if you have already optimized all images?
If you’ve already optimized all images but activated the feature Convert imaged to WebP now, then restore the backup copy and repeat optimization.
WebP delivery mods
Now you need to decide how exactly you are planning to replace your JPG & PNG on the frontend. Each option has its downsides.
Redirection (via htaccess)
This option creates redirects from your JPG & PNG images to the WebP copies if they exist and supported by the user’s browser. The plugin will write redirection rules to the htaccess file and add a new MIME type. This is a great solution for better performance. However, it has several downsides. You can use this option on Apache servers only. It will not work on Nginx and ISS servers (but we’ll try to solve the issue in the future). If you see a word CAN’T in the option description your Apache server doesn’t allow the plugin to manage static files.
Replace <img> tags with <picture> tags, adding the webp to srcset.
The plugin will change the HTML code of pages dynamically replacing each <img> tag with the <picture> tag and adding an additional WebP version of images. This way the browser could choose the most suitable image format. However, not all the browsers support the <picture> tag. And we’ve found a solution – use the picturefill.js library that adds the support of the <picture> tag to old browsers. This option works great with caching plugins and server caching. Still, it has a disadvantage. The styles used in your theme depend on your <img> tag position. That’s why you may experience some problems with the page appearance.
Replace image URLs
The plugin will replace URL addresses of JPG & PNG images to WebP if they exist and the user’s browser supports WebP. However, there is an important downside. This option won’t work if your website uses the page caching. Some caching plugins create two copies of pages so that you could use different versions of pages for different browser support. If your caching plugin supports WebP images then you can definitely use this solution.
No delivery
With this option, you can disable showing and replacing WebP images on the frontend. You can use this option while waiting for the full image optimization or choose a custom way of delivering WebP images to the frontend.
P.S. Unfortunately, there are some websites where none of the options are going to work. We will keep on improving and developing the plugin until we find a universal solution for all websites.