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:

  1. Restore the images to their originals
  2. Check the option “WebP Versions
  3. 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:

1. 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. If it doesn't, WebP won't be served.
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 files without altering any of the page code.
2. Altering the page code ("Using the <PICTURE> tag syntax")
Now you can use the WebP format by simply checking the corresponding “Altering the page code, 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 choose the best version according to its capabilities. 
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). By default, "Only via Wordpress hooks (like the_content, the_excerpt, etc.)" is selected.

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.

Troubleshooting

Still need help? Contact Us Contact Us