Last updated on

While performing a Google PageSpeed test, you might get the following notice:

Serve images in next-gen formats – Potential savings of 269 Kib
Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

In this article we’re going to dive into the subject; learning all about it and how to fix it.


What are next-gen image formats?

Next-gen image formats refer to newer image formats such as WebP, AVIF, and HEIF that offer improved compression and quality compared to traditional formats like JPEG and PNG. These formats are designed to reduce file sizes and improve web performance without sacrificing image quality. They often support features like transparency, animation, and high dynamic range (HDR), making them suitable for modern web applications and multimedia content


How do I serve images in a next-gen format?

WordPress does not natively include a way to convert images to next-gen formats like WebP. To serve images in these formats, you can use plugins or external services to convert your existing images.


W3 Total Cache

How to use W3 Total Cache to convert images to WebP

Step 1: Enabling W3 Total Cache Image Service

The first step to using the WebP conversion Image Service is to enable the feature in the Extensions list for W3 Total Cache. New W3 Total Cache installations will have the extension enabled by default, but existing installs will need to activate it manually.

  1. Go to Performance > Extensions
  2. Locate the Image Service item in the list of Extensions and enable it.

activated image service in w3 total cache extensions list

Step 2 (Option 1): Convert images 1 by 1

Once the Image Service extension is enabled open up your Media Library to begin converting images to the WebP format. The Image Service tool is only available while the Media Library is in List view and you can use the controls in the Media Library to switch to List mode if it is in the default Grid display.

list view option in media library

Images can be converted selecting the Convert link for each image individually or using the Bulk Actions tool and choosing W3 Total Optimize from the list.

single image conversion option in media library

bulk conversion option in media library

 

Step 2 (Option 2): Bulk convert images

Enabling the Image Service Extension also adds the Total Cache Image Service under Media in the WordPress admin menu, which allows for bulk conversions or reversions of the entire Media Library at once. Use the Convert All or Revert All buttons in the Tools section to manage your WebP image conversions for the entire Media Library at once.

convert all and revert all buttons in image service tools section

Settings

The settings page for the Image Service extension allows you to toggle the conversion type between Lossy (default) or Lossless and configure automatic conversions for new image uploads to your website. Lossless conversions can sometimes result in larger file sizes for JPEG and some other formats but will usually decrease the size when converting PNGs.

w3 total cache image service conversion settings

FAQ

Are there any limitations?

Free W3 Total Cache users have a limited number of conversions that they can run in a monthly period. W3TC Pro users however do not have this limitation and upgrading to a Pro license will be helpful if you have a large number of images that you wish to convert immediately. Upgrading to a Pro plan will allow you to finish all of your conversions in addition to providing access to all of the other Pro features like Fragment Caching, Deferred CSS, and user Statistics.

How exactly are the images converted?

All images converted with the Image Service tool are sent to a third party server maintained by the W3 Total Cache team which reduces resource consumption and allows for a large number of conversions in environments where resources can be limited such as shared hosting. Images sent to the W3TC server for conversion are only held temporarily and no permanent information is kept on the server regarding the images.

WebP optimizations with the Image Service tool do not replace the original image file and all conversions can be reverted without any loss of data.

Can I revert images to their previous format?

Images can also be reverted through the Media Library either individually or with the W3 Total Optimize Revert option in the Bulk Actions list.

single image revert control in media library

bulk revert option in media library

 

Troubleshooting

I still see the message in Google PageSpeed, why?

There might be instances where you’ve converted all of your images to WebP and still receive this message from PageSpeed Insights in the performance report.

The important note here is that the smallest image will always be served to visitors, regardless of the image format. Lossless conversion sometimes creates an image that is larger than the original, which would then cause the original image to be served instead of the WebP one.

Try switching to Lossy conversion if you still see the message, but if that doesn’t work then you can likely ignore the message since the most optimized image is already being used.

Using Plesk and NGINX caching with proxy mode

First, remove image extensions (jpg, jpeg, webp, png) from “Serve static files directly by nginx.” See these instructions from Plesk to find this setting.
Then, copy the rewrite rules from your Performance > Install menu, and use the W3 Total Cache rewrite rules in the Plesk Additional nginx directives setting.

Missing Additional Image Sizes

If you find that your original image has been converted to WebP, but other image sizes are missing WebP versions, you may need to double-check that your WordPress environment supports the WebP format.

While the original image is converted via our API service, the different sizes (e.g. Large, Medium, Thumbnail) are created by your own server. For this, you must have WordPress 5.8 and the appropriate libGD or ImageMagick package available on your server.

To check if your WordPress environment supports WebP, navigate to Site Health > Info > Media Handling and double-check that WebP is listed in the supported file formats for the library shown in the Active editor. If you find these are missing the WebP extension, consult your system administrator to set up the correct packages.

Users of cPanel CentOS 7 servers can follow these instructions to enable WebP support for ImageMagick.

“Unable to connect to the filesystem” Error

If you’re using an “Indirect” filesystem access method, such as ssh2, FTP Socket, or FTPext, you may have difficulty performing image conversions. Generally, if you’re frequently prompted for credentials when performing tasks in your dashboard, then both automatic and bulk conversions will not work. Consider setting the constant define( 'FS_METHOD', 'direct' );, or placing your credentials in wp-config.php according to these instructions from WordPress.org.

PageSpeed Testing Results

The following is a basic test demonstrating the types of improvements we achieved in PageSpeed scores by converting images to WebP. While results may vary, we have diligently documented our testing instructions for reference.

Testing Instructions

  1. Install a blank WordPress site
  2. Upload 6 images to the “Hello world” post
  3. Run Pagespeed Insights 3 times and calculate the average.You should get messages similar to:
    Serve images in next-gen formats Potential savings of 214 KiB
  4. Install and activate w3tc.
  5. Enable WebP Conversions and convert all of your images
  6. Run Pagespeed Insights 3 times and calculate the average.

The 6 images we uploaded:

The resulting page we were testing:

You can see here from our Media Library the level of compression we were able to get:

Results

The following are the results of the PageSpeed tests that we ran:

Test Score 1 Score 2 Score 3 Average
Unoptimized Images 77 86 83 82
WebP Optimized Images 92 96 91 93

Before scores:

After scores:

FAQ

What is WebP?

WebP is an image format developed by Google that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. It supports transparency (alpha channel) and animation, making it a versatile choice for various web applications. WebP images are typically 25-34% smaller in file size compared to JPEG and PNG images, resulting in faster page load times and improved website performance.

What does WebP stand for?

The name “WebP” is derived from the words “Web” and “Picture,” indicating its primary purpose as an image format optimized for web usage.

Do all browsers support webp?

Most modern browsers support WebP, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari. However, older versions of some browsers may not support WebP, so it’s important to check compatibility when designing websites or creating web content.

WebP Browser Compatibility

What is lossless and lossy compression?

Lossless and lossy compression are two methods used to reduce the size of digital files:

  1. Lossless Compression: This method reduces file size without losing any data. When the file is decompressed, it returns to its original state without any loss of quality. This is important for applications where preserving the original data is critical, such as text documents or certain image formats like PNG.
  2. Lossy Compression: This method achieves greater compression by removing some data deemed less important. This results in some loss of quality when the file is decompressed, but the reduced file size can be significant. JPEG images and MP3 audio files are common examples of lossy compression.

WebP supports both lossless and lossy compression, allowing for efficient image storage while maintaining quality.

Has Google developed any other types of image formats?

Yes, Google has developed other image formats, including AVIF (AV1 Image File Format). AVIF is a newer image format that offers improved compression efficiency compared to WebP, making it a promising alternative for web images. It is based on the AV1 video codec and supports a wide range of features, including high dynamic range (HDR) and 10-bit color depth.

Do all browsers support the avif image format?

Not all browsers support the AVIF image format yet. As of now, Google Chrome, Mozilla Firefox, and Microsoft Edge have added support for AVIF, while Safari and some other browsers do not support it. The adoption of AVIF is increasing, but it’s important to check browser compatibility when using this format for web content.

AVIF Browser Compatibility

W3 Total Cache

You haven't seen fast until you've tried PRO

   Full Site CDN + Additional Caching Options
   Advanced Caching Statistics, Purge Logs and More

Everything you need to scale your WordPress Website and improve your PageSpeed.

23 thoughts on “How to serve images in next-gen formats in WordPress?

  1. How does the webp conversion work with something like WP Offload Media? For example, if I were to enable webp conversion on an existing site that uses WP Offload Media, how is that handled with both existing images and new images? All current media files have been offloaded and are served via a CDN.

    • Hey,

      Thank you for reaching out. W3TC uses the rewrite to serve the images as a webp. We are not replacing the original images. In the case you are mentioning, depending on the CDN provider, you also need to modify the behavior of the CDN when necessary to respect the origin headers set by the W3 Total Cache. Meaning if the CDN offers any browser Caching,, it should bypass and let the W3TC to do it.
      I hope this helps!

  2. I selected bulk convert and I have 64 images stuck in “processing” it’s been about an hour and not one has converted yet.

    • Hey Malik,
      Thank you for reaching out.
      Have you converted the images in the Image Service>Convert All or in the Media library?
      Can you please check the Network tab by inspecting the source and let me know if there are any 404 ajax requests?
      Thanks!

  3. Hi There,
    We’re using W3 Total Cache Premium version on our website.
    We are unable to configure caching for webp images, can you please guide us how to set the caching rules properly in w3 total cache

    • Hello Manish,

      Are you experiencing the issue with the bulk conversion or individual images?
      Are any of the images converted?
      Please open a new topic here , and provide more details, so we can assist you with this.

  4. I receive an error message “Failed to retrieve a response. Please reload the page to try again.”
    Neither reloading nor emptying the caches help, and yes, I am using the Pro version. Any suggestions? Thx in advance

    • Hello Peter,

      Are you experiencing the issue with the bulk conversion or individual images?
      Are any of the images converted?
      Please open a new topic here , and provide more details, so we can assist you with this.

      • I guess you do not want me to open a new topic.
        I have tried both ways, single and batch conversion. Yesterday I simply got the above mentioned response, today the process takes a lot longer with remarks like “sending” and then “processing” (which wasn’t the case yesterday) before outputting the same result as yesterday. I cannot find any successfully finished file.
        Until now I find these remarks in the batch processing tab:

        Counts and filesizes by status:
        Total: 118 134,65 MB
        Converted: 0 0,00 B
        Sending: 0 0,00 B
        Processing: 8 14.77 MB
        Not converted: 2 275,44 kB
        Unconverted: 108 119.61 MB

        • Are you experiencing any problems with opening a new topic? I’ve shared the link with you and you can also check the link here.
          Can you please open a new topic and also check the network tap once the conversion is started and see if you are getting any 500 error ajax responses?

          Thanks!

  5. Hello,
    I have converted my images to webp, at first it was working, webps were loading in chrome.
    I then had to tinker with the W3 because of issues. Now after having resolved everything the webps are not loading anymore, with one exception.
    Is there anywhere in the W3 were this is configured that webps are being served?

    • Hello,

      Without knowing the specific details about the configuration and the tweaks you did in W3 Total Cache after converting images to webp, I cannot give you a specific answer.
      You can check if you have somehow reverted the images, or possibly you need to purge the CDN if you are using one.
      Please open a new topic here , and provide more details, so we can assist you with this.

  6. As I understand this, rewrite rules are used to deliver the webp content instead of the jpg. Is this compatible with hosting on IIS? So far it is not working for me, even after invalidating my CDN cache.

    • Hi Assad,

      The Monthly limit for free users 100000 images and it’s subject to change.
      We have graciously higher limits for free plugin users for the initial release. Please do note that the order of the conversion takes into account if the user has a Pro license or not.
      Thanks!

  7. Hi i’m trying out this service today. I can see some images already converted.
    But when i view them, they are still in jpeg format. When i check in google inspector / network it’s still showing original jpeg with full size and no sign of converted image.

      • Hi,
        im using pro version of W3TC.
        I am testing webp converting option and i have the same issue. After I manualy convert a few jpg and “All caches successfully emptied.” i still get the old jpg version.

        The only way to update the iages is to refetch the images into each post.

        Is there any way to automaticaly update the old version of images (jpg;s) with the converted ones?

Leave a Reply to Marko Cancel Reply

Your email address will not be published. Required fields are marked *