Skip to content

WordPress WebP Conversion

Image of a phone that says Page Speed Optimization and then has a meter that shows that it's 90 out of 100

Looking to resolve the “Serve images in next-gen formats” warning in PageSpeed Insights? This is a step-by-step guide for a WordPress website. This is for sites that are using S3 to host all media. The implementation that inspired this post used WP Offload Media, but the steps involving that tool are likely simple enough that they’ll carry over to other offloading plugins, so I’ve abstracted that part of the instructions to be plugin-agnostic.


  1. Add the EWWW Image Optimizer plugin to your project (WP Packagist has it at the time of writing).
  2. Activate EWWW and go to its settings page
  3. Turn on Ludicrous Mode so you can see all settings
  4. Ensure both WebP Conversion and Force WebP are turned on (Force WebP is regrettable, but it’s necessary if you don’t have local copies of your images, as specified in the linked article).
  5. Save your settings changes.
  6. If you have pre-existing media, you’ll want to run a Bulk Optimize as outlined below to make sure all your images have a WebP version available.
    1. Use your media offloading plugin to copy all media from the bucket to the server if they aren’t there already.
    2. Run EWWW’s Bulk Optimize tool (Media > Bulk Optimize) with the WebP Only and Force re-optimize options checked. Theoretically, it should work without these checked, but both seem to skip over some items unnecessarily when unchecked, leading to an incomplete bulk optimization. If you want to compress as well, it may be best to do that in a separate optimization step.
    3. After all media has been converted, copy everything back to the bucket from the server.
  7. Now you need to choose a WebP delivery method. Go back to the EWWW settings and scroll to the bottom of the Basic tab where it says “WebP Delivery Method”. Picture WebP Rewriting was chosen for my implementation since it uses native browser functionality designed for exactly this purpose and requires no JS injection. If you have extra URL patterns that you want to be rewritten, add them to the WebP URLs section as described in this article, which is the same as the one linked for the Force WebP option above.

Hopefully, if you followed these instructions, you should now be serving WebP images to customers whose browsers support the format, all from your S3 bucket. You can delete the images from the server now if you want them only stored on the bucket.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project


Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is the best web development framework?
Many people commonly ask “what is a framework in web development?” Web development frameworks can easily be confused with web development tools, languages, or parts of the web development stack (like .NET, PHP, JavaScript, or Ruby).
Learn More about What is the best web development framework?
What is the best programming language for web development?
If there was one “best” programming language, then everything else would be obsolete. The reality is that there are so many different programming languages because there is no “best” language for any situation.
Learn More about What is the best programming language for web development?
How much does web development cost?
Web development can vary from a few hundred to millions of dollars depending on what is needed. You may simply need some changes to something that already exists, or you'd like to build a large or complex application.
Learn More about How much does web development cost?
What is web design and development?
People often lump web design and development together, so what's the difference? As the Internet has evolved, the skills required to produce a high quality website or web application have changed.
Learn More about What is web design and development?
What is React web development?
React is a popular JavaScript library. It is primarily used for building interactive user interfaces (UI).
Learn More about What is React web development?
What is PHP web development?
PHP is a back end language primarily used for custom applications, content management systems (such as Wordpress), eCommerce engines (such as Magento), or even massive sites like Facebook.
Learn More about What is PHP web development?
What is bootstrap in web development?
Bootstrap is a framework used in front-end development to save time, specifically for mobile-first development. It combines CSS and JavaScript templates and libraries to speed up the development process.
Learn More about What is bootstrap in web development?