Guide

How to use WebP images in WordPress

WordPress accepts WebP uploads, but it won’t convert your JPEGs on its own. Here are three ways to get WebP on your site, and which one fits.

WordPress has accepted WebP uploads since version 5.8. What it doesn't do on its own is convert anything: upload a JPEG and you get a JPEG, plus a handful of smaller JPEGs for the different image sizes your theme uses.

There are three ways to change that, and the right one depends mostly on how many images you upload and who uploads them.

1. Convert before you upload

The simplest way is to upload WebP files in the first place. Convert your photos, then add the WebP files to the Media Library as usual. WordPress makes its smaller sizes from the WebP, so those come out as WebP too.

You don't need a plugin, and you pick the quality yourself. The JPG to WebP converter runs in your browser and keeps each photo at its original size. A quality of 75 to 82 works for most photos.

The catch is that it's a manual step. That's fine if you add a few images a week and less fine if several people upload to the site.

2. Use the Modern Image Formats plugin

Modern Image Formats is made by the WordPress Performance Team and was called WebP Uploads until it added AVIF. Install it from Plugins → Add New Plugin, and from then on every JPEG or PNG you upload gets its smaller sizes created as AVIF or WebP.

A few things to know before you turn it on:

  • It uses AVIF if your server can make it and WebP if it can't. When both work, you can choose under Settings → Media.
  • The file you uploaded stays a JPEG or PNG. Only the sizes WordPress generates change format.
  • An option called “Output fallback images” keeps a JPEG of every size next to the AVIF or WebP. It fills up your server faster and is rarely needed now that every current browser shows WebP.
  • It skips WebP for any size where the WebP would be larger than the JPEG.
  • It only converts new uploads. For the images already in your library, regenerate the thumbnails with the Regenerate Thumbnails plugin, or run wp media regenerate if you use WP-CLI. Take a backup first.

3. Add a few lines of code

If you'd rather not install a plugin, WordPress has had a filter for this since 5.8. Add this to your theme's functions.php or to a small plugin of your own:

add_filter( 'image_editor_output_format', function ( $formats ) {
	$formats['image/jpeg'] = 'image/webp';
	return $formats;
} );

New JPEG uploads then get their sizes created as WebP. Like the plugin, it leaves the uploaded file alone and only affects new uploads, so existing images need the same regeneration step.

If you edit a theme you didn't build, put the code in a child theme or a plugin. A theme update would wipe it from functions.php.

Check that your server can make WebP

Options 2 and 3 depend on your server's image library. Go to Tools → Site Health → Info and open Media Handling. It lists the formats ImageMagick and GD support on your host. If WEBP isn't in either list, the server can't create WebP files and nothing will be converted. Ask your host, or go back to option 1, which doesn't need the server at all.

Which one to pick

If you add a few images yourself, convert them before uploading. Less can go wrong, and you see each file before it's live.

If other people upload, or you add a lot of images, use Modern Image Formats, so nobody has to remember. The code snippet is for developers who'd rather not add another plugin.

If you're still deciding between WebP and AVIF, WebP vs AVIF vs JPEG compares them. And if PageSpeed Insights sent you here, How to fix “Improve image delivery” covers the rest of what it checks.

Try the tools

Responsive image converter

Turn one image into WebP, AVIF and JPEG at every width, with picture markup ready to paste.

2.4 MB → 142 KB

Font subsetter

Keep only the characters your site uses and ship the font as WOFF2, with @font-face CSS.

207 KB → 35 KB

SVG optimizer

Strip editor clutter from SVGs and export them as inline SVG, React components or CSS.

12 KB → 3.0 KB

Favicon generator

Turn one logo into favicon.ico, an SVG icon, home screen icons and a web manifest.

1 logo → 6 icons