WordPress 5.8 Introduces Native WebP Image Support

WebP is a modern image format that provides superior lossless and lossy compression for web images. On average, WebP images are 30% smaller than their JPEG or PNG equivalents, resulting in faster websites and reduced bandwidth consumption. According to caniuse, all modern browsers natively support WebP.

Starting with WordPress version 5.8, you can upload and use WebP images just like you currently use JPEG or PNG images (provided your hosting environment supports WebP). Converting your images to WebP format will significantly boost your site’s performance and enhance the overall visitor experience.

How WebP Improves Page Load Speeds

Because WebP images are substantially smaller than JPEGs, visitors can see the full page load much faster. Smaller images consume less transmission bandwidth, and your images still retain all the responsive benefits of srcset and lazy loading by default. Since all major browsers now support WebP, most websites can begin using them immediately.

Creating WebP Images

Most modern image editing tools support exporting in WebP format. Alternatively, you can use command-line conversion tools or web-based services like Squoosh. Once your images are saved as WebP, simply upload them to WordPress and use them as you would any other image format.

Using WebP Images in WordPress

WebP images function seamlessly in WordPress, with just a few technical considerations to keep in mind.

WebP supports both lossy and lossless compression, as well as animation and transparency. WordPress currently supports lossless WebP only when the hosting server uses the Imagick PHP library, pending future support in LibGD. Additionally, resized sub-sizes do not yet support animated or alpha formats (an uploaded animated WebP will result in lossy static sub-sizes).

Support in the Media Library requires your web server’s image processing library (Imagick or LibGD) to support the WebP format. Fortunately, these libraries have supported WebP for some time, making support widely available. If your server does not support WebP, you will see an error message when attempting to upload a WebP file.

If a significant portion of your audience uses outdated browsers like IE11, consider using a browser polyfill or avoiding WebP for critical visual elements.

Future Plans

The WordPress Media Component team is exploring options to allow WordPress to perform automatic image format conversion upon upload—using WebP as the default output format for sub-sized images. You can track the progress of this feature on the trac ticket. We are also monitoring even more modern formats like AVIF and JPEG XL, which promise even higher compression ratios.

Frequently Asked Questions

How can I fine-tune WebP compression quality?

Developers and plugins can use the wp_editor_set_quality filter to adjust quality settings. You can specify different quality levels for different MIME types as shown below:

// Use a quality setting of 75 for WebP images.
function filter_webp_quality( $quality, $mime_type ) {
  if ( 'image/webp' === $mime_type ) {
     return 75;
  }
  return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_webp_quality', 10, 2 );

What happens if I upload a JPEG while WebP sub-sizes are enabled?

By default, WordPress creates sub-sized images in the same format as the original file. If you want WordPress to automatically convert uploaded JPEGs into WebP sub-sizes, you can use specialized plugins or refer to the ongoing development in the official trac ticket.

Can all sites in a WordPress Multisite network use WebP?

In multisite environments, allowed file types are typically set per site upon creation. We are working on improving this in #53167. In the meantime, you can use a network-wide mu-plugin to ensure WebP support for all sites:

// Ensure all network sites include WebP support.
add_filter(
        'site_option_upload_filetypes',
        function ( $filetypes ) {
                $filetypes = explode( ' ', $filetypes );
                if ( ! in_array( 'webp', $filetypes, true ) ) {
                        $filetypes[] = 'webp';
                }
                $filetypes   = implode( ' ', $filetypes );

                return $filetypes;
        }
);

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *