How to use webp images with WordPress

By default WordPress does not support webp images. Yet according to Google’s analysis, webp images can help shrink the size of your images by up to 36% thus speeding up every image download. So you probably want to get on that, eh?

The trouble is some browsers, like Apple’s Safari browser, do not support webp so you can’t just replace all your images with webp. Whatever solution you use must serve the webp image files to the browsers that support it, and fall back to other image formats like jpg and png for the browsers that do not. There’s a few different ways to help make this happen, but no matter what you do, you’ll need to use a plugin that converts images to multiple formats. Enter Imagify or ShortPixel our two recommended plugins for handling image conversion.

If you use WP Rocket

So you’ve got WP Rocket (check out our how to speed up WordPress guide) and you’ve got ShortPixel or Imagify to optimize and compress your images.

You might have noticed, both ShortPixel and Imagify have the option to create/convert images to WebP format. Enable that option, but do not enable the option to automatically serve the webp images.

This is because the options within each plugin to deliver those WebP images to the front-end do not always have the desired result. In fact, in some situations, it just doesn’t work at all. Never fear, WP Rocket has an option to play nice with both ShortPixel and Imagify’s WebP images built right in!

Go to your WP Rocket settings, and head over to the Media tab. Scroll to the bottom of the page and you’ll see a setting dedicated to WebP. Click the checkbox there, and WP Rocket will automatically opt to use the converted WebP images when delivering its cached content. Easy peasy!

If you use any other caching plugin

Always check in your cache plugin’s settings first and use *those* settings to enable delivery of webp on the front-end. Only if your cache plugin does not support this functionality should you try using the option for this within your image conversion utility of choice.

If your caching plugin does not support serving webp images

In this case, try using the built-in option in ShortPixel or imagify to serve the images:

• ShortPixel’s option: Deliver the webp images in the front end
• Imagify’s option: Display images in webp format on the site

Each one also provides the “picture” option or “rewrites” option. Try out the picture option and if that doesn’t work for you, go for rewrites. Whether <picture> tags work or not will depend on your WordPress theme.