How to use WebP images on WordPress blog

WebP is a relatively new image format proposed by Google Inc. in 2010. In most (but not always) cases, it will produce a smaller file with the same image quality compared to JPEG or PNG. At the same time, just like PNG, it supports transparency.

At the time of this writing, the WebP format is supported by the absolute majority of browsers (about 85%) on PCs and smartphones. But there are still those that don’t have support (Safari in particular).

The popular PageSpeed ​​Insights website speed meter strongly recommends using this format to speed up your website.

But as it turns out, WordPress doesn’t support this image format out of the box. In this article I will show you how to fix this misunderstanding and use WebP images in WordPress projects.

How to upload WebP images in WordPress

By default, the WordPress media library does not allow loading WebP images, probably for security reasons, but they are not dangerous. This indirectly confirms that the WordPress.com blogging platform allows the use of WebP images. If so, then you can enable this feature on your WordPress site.

In order for WordPress Media Library to load WebP files, you need to add the following code to your WordPress theme’s functions.php file :

// Allow loading WebP
function webp_upload_mimes ($ existing_mimes) {
    // add webp image to the list
    $ existing_mimes ['webp'] = 'image / webp';

    // return the array back to the function with our added mime type
    return $ existing_mimes;
}
add_filter ('mime_types', 'webp_upload_mimes');

After that, you can safely upload WebP images through your WordPress blog admin area.

How to use WebP images on your site

You can use the standard instructions as for PNG and JPG images.

<img src = "my_image.webp" alt = "My image">

But considering not 100% support from browsers, it is better to use the following code:

<picture>
  <source srcset = "test.webp" type = "image / webp">
  <img src = "test.jpg" alt = "test image">
</picture>

How this design works <picture>:

In the element <source>we specify a list of sources and their type (mime / type), and the browser already selects the first one that it knows.

An image (file) from the src attribute of the img tag is used as a fallback for displaying. That is, if the browser is no support for type webp , that element <source>is ignored, and instead webp images in format jpg image will be shown.

Comparing WebP to Other Image Formats

WebP takes the best from existing image formats.

In general, lossy compressed WebP images have smaller file sizes than JPG images, and WebP lossless compressed images are smaller than PNG images.

How to convert images to WEBP

For the Windows operating system, there is an excellent free raster graphics editor Paint.Net . Which can save images in webp format.

In addition to it, you can also use the free IrfanView image viewer. He also knows how to save images in the webp format.

Conclusions

The webp format allows you to create smaller files with the same image quality. Which should say positively about the site loading speed. But given the not 100% support from browsers, it is necessary to complicate the layout of the site and keep images in several formats on the site at the same time, which negatively affects the used disk space.