Using WebP in WordPress
I’ve been using the WebP image format in some of my client projects and of course my personal website.
WebP is a great format that offers better compression than traditional JPEG but at the moment the only browsers that support WebP are Chrome and Opera.
Don’t let the browser support dissuade you if a lot of your visitors are using Chrome or Opera than using WebP can offer great image sizes (ie 100kb vs 52kb) and lower the loading time of your WordPress site.
Using it for images in your theme
This method will apply to images hardcoded within your theme.
You’ll first need to convert your image to WebP, I typically use WebPonize (Mac) or Online WebP Converter (Online). There is a Photoshop plugin to convert your images to WebP but I could never get it to work on Photoshop CC.
Next, you’ll need to use the <picture> tag to serve up either a JPEG or WebP version of the image:
<picture>
<source srcset='your/path/image.webp' type='image/webp' />
<img src='your/path/image.jpg' alt="" />
</picture>
Using it in background images
I use Modernizr to detect WebP feature support in the user’s browser and use the CSS classes (.no-webp and .webp) inserted to serve up either JPEG or WebP versions of the background image in my CSS.
The Modernizr CSS classes are inserted into the <html> tag and will need to be scoped accordingly in your CSS:
.no-webp .site-header{
background-image:url('image.jpg');
}
.webp .site-header{
background-image:url('image.webp');
}
Using it for existing/new images in your media library
You can use the Photon image service provided by Jetpack to convert and serve up any existing and new images uploaded to your media library.
This method is the easiest and fastest way to get the benefits of WebP while doing the least amount of work. Photon will convert and serve up WebP or JPEG versions of your images (in your media library) depending on browser support.
hi, we have converted our images in Webp format but we face the problem when we upload the webp images in WordPress its doesn’t accepting to upload the webp format image. Help us.
By default WordPress doesn’t allow uploading of webp images but you can enable this by adding this function to your themes/child theme functions.php file:
function webp_mime_types($mimes) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter('upload_mimes', 'webp_mime_types');