How to serve WebP files using SPIO
Starting with our new 4.1 version of the ShortPixel Image Optimization plugin, we’ve added the possibility to also create a WebP image alongside the existing images, free of charge, when optimizing your images with our service.
WebP is a modern image format created by Google, that provides superior lossless and lossy compression for images on the web. According to Google, WebP lossless images are 26% smaller in size compared to PNGs.
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.
How do I create a WebP image alongside the existing images?
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.
he WebP 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 “WebP Versions”
- Relaunch the bulk optimization.
Make sure that your images are served in the front-end
Starting with version 4.12.2, you’ll be able to display WebP versions of the images in your WordPress website’s pages:
How to test if the WebP images are served correctly
You can test it using the Developer Tools of the browser. First, go to your website and then press F12. A window on the right will appear, like this:
Then press CTRL + R on Mac or F5 on Windows into the window to reload the images on the website. It will look like this:
ou should see all the images with Type WebP, regardless of the extension of the file. There’s a chance you will also see some other “weird” stuff, like svg+xml, or text/html. You can ignore it.
If you can see the WebP extension type, then you are now successfully serving WebP images to compatible web browsers.