How to Use WebP Images in WordPress

Does WordPress support WebP?

Yes. WordPress added support for WebP uploads in version 5.8, so you can add WebP files to the media library and insert them into posts and pages the usual way. WordPress also creates its smaller image sizes from your upload.

Creating those sizes needs an image library on your server that can handle WebP. Most modern hosts have it, but if your sizes are not created, ask your host.

Step by step

1. Resize the image to the width you need with Resize Image.
2. Convert it with JPG to WebP or PNG to WebP at about 80% quality.
3. In WordPress, open Media > Add New and upload the .webp file.
4. Add an alt text and a clear file name before you insert it.
5. View the page and check how it looks and loads.

Prepare images before uploading

WordPress creates several copies of every image, such as thumbnail, medium and large. If you start with an oversized file, every copy comes from a heavy source. Resize to the largest width your layout needs, usually around 1200 to 1600 pixels for content images, then convert.

Name files in plain words, for example red-running-shoes.webp, rather than IMG_4021.webp.

Featured images and social previews

Featured images can be WebP too. Most current services show WebP in link previews, but a few older tools may not. After you publish, test one link in the social platforms you use. If a preview fails, use a JPG for that one social image.

Replacing images you already have

You do not have to convert everything at once. Start with the largest images and the pages that get the most visits, upload WebP versions, and replace them in your posts. Keep the original files in a backup folder in case you need them again.

Plugins or converting yourself?

Whichever you choose, compare file sizes and look at the images on a real page.

Check the result

• Open the page and view the image at full size.
• In your browser developer tools, open the Network tab and check the image size.
• Run a page speed test and compare with the earlier version.
• Check that the alt text is still set.

Common mistakes

• Uploading oversized images and relying on WordPress to shrink them.
• Using a very low quality that blurs text and logos.
• Deleting the original files.
• Forgetting alt text on new images.

File names and alt text

Search engines and screen readers rely on text to understand images. Give each file a plain descriptive name, such as blue-running-shoes.webp, and write an alt text that describes what the image shows. Avoid stuffing keywords. Describe the picture the way you would to someone who cannot see it.

Loading and sizes

WordPress adds lazy loading to images by default, so pictures further down the page load later. That works well with smaller WebP files. Make sure the image is not much bigger than the space it fills, because a huge file still costs time even if it loads late.

Themes and page builders

Some themes and page builders have their own image settings and may regenerate sizes or add effects. After you switch to WebP, open a few pages that use sliders, galleries or background images and check that everything still displays correctly.

Back up before bulk changes

If you plan to replace many images, back up your site and keep the original JPG and PNG files. That way you can undo a change without hunting for the source images.

Measure the difference

Test a page before and after, for example with a page speed test, and note the total page weight. Seeing the saving is the best way to decide how far to take the change. For more ideas, read how to reduce image file size.

Frequently Asked Questions