Which WebP files delivery method is the best for me?
ShortPixel image optimization plugin for WordPress can help you generate WebP versions of your images for free*. That's why we also implemented a few solutions for delivering them to the compatible browsers. Each of them is reversible, and we recommend you to make some tests before choosing which solution is the best for you.
- Using the <PICTURE> tag syntax. Each <img> is replaced with a <picture> tag. For browsers that don't support the <picture> tag, picturefill.js file will be loaded. Using the <picture> tag means that there is a fallback in case a browser cannot display WebP images. You have 2 ways to use this method:
- Only via Wordpress hooks (like the_content, the_excerpt, etc). It works better when you use image slider plugins, but there could be images that aren't served as WebP in the compatible browsers. This is a more limited, but a bit safer method.
- Global (processes the whole output buffer before sending the HTML to the browser). This method fits the most use cases, but there could be a few situations when it breaks the image sliders/galleries plugins. This method ensures more independence from any third-party tools that might not operate through the official WordPress channels and methods.
Please note that this method might break some third party plugins and/or styles that depend on <img> tags.
Without altering the page code (via .htaccess): Delivering WEBP images via HTACCESS. There are some WordPress configurations that don't allow this, like sites that run on Nginx servers or other rules in .htaccess which might interfere. Here's how you can configure ShortPixel Image Optimizer to work with Nginx web server.
This method cannot be used if you are using a CDN, and it will always return the same image extension regardless whether the image is a JPEG, PNG or WebP.So, for example, an image could be called "test.jpg" but the JPEG or the WebP image will be served instead depending on the browser's capabilities. This is why it won't work properly with a CDN, because the CDN will cache the first one that is requested (JPEG or WebP) and will serve it to all the requesting browsers, regardless of their capabilities.
Important: if you use Cloudflare, please note that you should configure it correctly: I use Cloudflare and my WebP images aren't served, why is that?
*Generation of WebP is free of charge, but optimization of the original image will spend a credit as usual. Optimizing an image is required to create a WebP file.