Getting Started with WebP Images

Unlike the other conversion options, WebP conversion is possible for every PNG, JPG, and GIF image on your entire WordPress site. It is not limited to the Media Library. So theoretically, you could put the root path to your WordPress site in folders to optimize, run a Bulk Optimize, and EWWW IO would create WebP copies of all images where WebP is the smaller of the two formats.

Easy IO Sites

When the Easy IO CDN is enabled on your site, no further configuration is necessary. You do not need any other WebP options, and you do not need to run a Bulk Optimize. All WebP images will be stored on our CDN servers, which saves you space, and a lot of time. You can stop reading now, and go do something fun!

Conversion vs. Delivery

There are two things we need to do to get WebP images to your visitors:

WebP Conversion - this will make copies of your images in the WebP format, and happens automatically for new images, while existing images can be converted with the Bulk Optimizer.
WebP Delivery - any delivery method should make sure supported browsers get a WebP image, and older browsers still get an image that they can display (JPG, PNG or GIF).

Advanced Tweaks

Sharp YUV

There are some cases where the compression from WebP doesn't fare so well, notably sharp edges from text and graphic overlays, and areas of very bright colors. Fortunately, there is a solution that generally works quite well for these cases, which is to enable the Sharp YUV encoding option. In EWWW IO this can be done with the EIO_WEBP_SHARP_YUV constant. Define it to true in your wp-config.php like so:

define( 'EIO_WEBP_SHARP_YUV', true );

External CSS images

There may be other uses for this, but if you have image URLs in external CSS files and can't use server-based rewriting (like Apache .htaccess rewrites or Nginx server rules), you might be a bit stumped. In order to help third-party developers, when you use JS WebP Rewriting, we add a "webp-supported" class to the body tag. This lets you target the .webp version of background images based on the webp-supported class, and use non-webp images otherwise.