How to Serve Images in Next-Gen Formats - WordPress

Serving Images in next-Gen Formats

Serving images in next-gen formats like WebP, AVIF, or JPEG 2000 can significantly improve the loading times and performance of your WordPress site because these formats offer better compression and quality characteristics compared to traditional formats like JPEG or PNG. Here’s how you can start serving next-gen image formats in WordPress:

1. Use a Plugin

Several WordPress plugins make it easy to convert and serve images in next-gen formats:

W3 Total Cache: This plugin allows for the automatic conversion of images to the WebP format using various methods, including GD, Imagick, and cwebp. You can configure it to serve WebP images to browsers that support the format while falling back to the original image formats for browsers that don’t.
ShortPixel Image Optimizer: A comprehensive image optimization plugin that not only compresses images but also converts them into next-gen formats. It requires an API key, which you can get for free with limited monthly conversions, or you can choose a paid plan for more volume.
EWWW Image Optimizer: This plugin optimizes images on the fly and can automatically convert images to WebP format when uploaded to your WordPress site. It also offers cloud optimization features if you don’t want to handle image processing on your server.

2. Modify Your .htaccess File (for Apache Servers)

If you prefer not to use a plugin and you’re comfortable with server configurations, you can manually set up your .htaccess file to serve WebP images when supported by the browser:

This setup checks if the browser accepts WebP images and if the WebP version of the requested image exists. If both conditions are true, it serves the WebP image instead of the original JPEG or PNG.

3. Use a CDN That Supports Automatic Image Conversion

Some Content Delivery Networks (CDNs) like Cloudflare, KeyCDN, or BunnyCDN offer features to automatically convert images to next-gen formats when serving them:

Cloudflare: Offers automatic image optimization through its Polish feature, which includes WebP conversion.
BunnyCDN: Provides on-the-fly image optimization and conversion to WebP with their Bunny Optimizer.
KeyCDN: Has an automatic WebP conversion feature as part of its CDN delivery services.

4. Modify Your Server Settings (Nginx)

If you’re using an Nginx server, you can configure it to serve WebP images similarly to the .htaccess method for Apache. This involves setting up server blocks to check for the existence of WebP images and serve them if the browser supports it.

5. WordPress Core Support

As of WordPress 5.8, there is native support for WebP images. You can simply upload WebP images to your media library, and WordPress will handle them like any other image file. However, this does not automatically convert existing images to WebP; it only supports uploading and serving WebP directly.

Implementing next-gen formats for your images can drastically reduce the bandwidth and improve the loading speed of your WordPress site, enhancing user experience and SEO.