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.
The WebP versions of the images are only generated when the images are being optimized. So if you need to create the WebP versions of the images after you optimized the images, the easiest way would be to:
- Restore the images to their originals
- Make sure you activate the option “WebP Images” located on Settings > ShortPixel > Advanced.
- 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 using one of this methods:
- Using the <PICTURE> tag syntax. This method alters the page code.
- Without altering the page code (via .htaccess). This option will insert a new block of code into the .htaccess file.
Please have a look at this article to know more about which one you should use: Which WebP files delivery method is the best for me?
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:
You 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.
How to check if the WebP files are on your server
Using the WP File Manager plugin, you could check inside the path wp-content/uploads/ if your images have a .webp counterpart.
You could also make the same test using cPanel File Manager, FTP or SSH.