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 users 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 Poton 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.

Leave a Reply