\n
\n
Step 1: Install and Activate W3 Total Cache<\/h3>\n
Download and activate the W3 Total Cache plugin from the WordPress plugin repository.<\/p>\n
Step 2: Enabling W3 Total Cache Image Service<\/h3>\n
The first step to using the WebP conversion Image Service is to enable the feature in the Extensions<\/b> 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.<\/p>\n
\n
Go to <\/span>Performance<\/b> > <\/span>Extensions<\/b><\/li>\n
Locate the Image Service<\/b> item in the list of Extensions<\/b> and enable it.<\/li>\n<\/ol>\n $\"activated$ <\/a><\/p>\n
Step 3 (Option 1): Convert images 1 by 1<\/h3>\n
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.<\/span><\/p>\n
$\"list$ <\/a><\/p>\n
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.<\/span><\/p>\n
$\"single$ <\/a><\/p>\n
$\"bulk$ <\/a><\/p>\n
<\/p>\n
Step 3 (Option 2): Bulk convert images<\/h3>\n
Enabling the Image Service Extension also adds the <\/span>Total Cache Image Service<\/b> under <\/span>Media<\/b> in the WordPress admin menu, which allows for bulk conversions or reversions of the entire Media Library at once. Use the <\/span>Convert All<\/b> or <\/span>Revert All<\/b> buttons in the <\/span>Tools<\/b> section to manage your WebP image conversions for the entire Media Library at once.<\/span><\/p>\n
$\"convert$ <\/a><\/p>\n
Settings<\/h3>\n
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.<\/p>\n
$\"w3$ <\/a><\/p>\n
\t \n\t
\n\t\t
\n\t\t\t+9<\/span>\n\t\t\tPoints<\/span>\n\t\t<\/div>\n\t\t
\n\t\t\t
In a recent test, we converted all of our images to WebP and added 9 points to the Google PageSpeed score<\/strong>! Review the test results<\/a> to see how we did it!<\/p>\n\t\t\t
\n\t\t\t\t Upgrade to W3 Total Cache Pro<\/a> and improve your PageSpeed Scores today!\n\t\t \t<\/p>\n\t\t\t
\n\t\t\t\t
Audit:<\/strong> Google PageSpeed Score<\/div>\n\t\t\t\tBefore:<\/strong> 84.67<\/div>\n\t\t\t\tAfter:<\/strong> 93.83<\/div>\n\t\t\t<\/div>\n\t \t<\/div>\n\t<\/div>\n\t \n <\/p>\nWebP Browser Compatibility<\/h2>\n
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<\/a> when deciding when and how to serve images in next-gen formats.<\/p>\n
$\"WebP$ <\/p>\n
FAQ<\/h2>\n
What is WebP?<\/h3>\n
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<\/a> compared to JPEG and PNG images, resulting in faster page load times and improved website performance.<\/p>\n
What does WebP stand for?<\/h3>\n
The name “WebP” is derived from the words “Web” and “Picture,” indicating its primary purpose as an image format optimized for web usage.<\/p>\n
Are there any limitations?<\/h3>\n
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, Delay Scripts and Eliminate Render Blocking CSS.<\/p>\n
How exactly are the images converted?<\/h3>\n
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.<\/span><\/p>\n
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.<\/span><\/p>\n
Can I revert images to their previous format?<\/h3>\n
Images can also be reverted through the Media Library either individually or with the W3 Total Optimize Revert option in the Bulk Actions list.<\/span><\/p>\n
$\"single$ <\/a><\/p>\n
$\"bulk$ <\/a><\/h3>\n
What is lossless and lossy compression?<\/h3>\n
Lossless and lossy compression are two methods used to reduce the size of digital files:<\/p>\n
\n
Lossless Compression<\/strong>: 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.<\/li>\n
Lossy Compression<\/strong>: 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.<\/li>\n<\/ol>\n
WebP supports both lossless and lossy compression, allowing for efficient image storage while maintaining quality.<\/p>\n
Has Google developed any other types of image formats?<\/h3>\n
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.<\/p>\n
Do all browsers support the avif image format?<\/h3>\n
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.<\/p>\n
AVIF Browser Compatibility<\/a><\/p>\n
Troubleshooting<\/h2>\n
I still see the message in Google PageSpeed, why?<\/h3>\n
There might be instances where you’ve converted all of your images to WebP and still receive the serve images in next-gen formats<\/strong> message from PageSpeed Insights in the performance report.<\/p>\n
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.<\/p>\n
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.<\/p>\n
Using Plesk and NGINX caching with proxy mode<\/span><\/h3>\nFirst, remove image extensions (jpg, jpeg, webp, png) from “Serve static files directly by nginx.<\/a>” See these instructions<\/a> from Plesk to find this setting.<\/p>\n
Then, copy the rewrite rules from your Performance > Install<\/strong> menu, and use the W3 Total Cache rewrite rules in the Plesk Additional nginx directives<\/strong> setting.<\/p>\n
Missing Additional Image Sizes<\/h3>\n
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.<\/p>\n
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.<\/p>\n
To check if your WordPress environment supports WebP, navigate to Site Health > Info > Media Handling<\/strong> and double-check that WebP is listed in the supported file formats<\/strong> for the library shown in the Active editor<\/strong>. If you find these are missing the WebP extension, consult your system administrator to set up the correct packages.<\/p>\n
Users of cPanel CentOS 7 servers can follow these instructions to enable WebP support for ImageMagick<\/a>.<\/p>\n
$\"webp$ <\/a><\/p>\n
“Unable to connect to the filesystem” Error<\/h3>\n
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' );<\/code>, or placing your credentials in wp-config.php<\/code> according to these instructions from WordPress.org<\/a>.<\/p>\n
\t \n\t
\n\t\t\n\t\t\t+9<\/span>\n\t\t\tPoints<\/span>\n\t\t<\/div>\n\t\t\n\t\t\tIn a recent test, we converted all of our images to WebP and added 9 points to the Google PageSpeed score<\/strong>! Review the test results<\/a> to see how we did it!<\/p>\n\t\t\t \n\t\t\t\tUpgrade to W3 Total Cache Pro<\/a> and improve your PageSpeed Scores today!\n\t\t \t<\/p>\n\t\t\t \n\t\t\t\tAudit:<\/strong> Google PageSpeed Score<\/div>\n\t\t\t\tBefore:<\/strong> 84.67<\/div>\n\t\t\t\tAfter:<\/strong> 93.83<\/div>\n\t\t\t<\/div>\n\t \t<\/div>\n\t<\/div>\n\t \n <\/p>\nLearning how to serve images in next-gen formats like WebP is a smart move for any WordPress site. It improves load times, enhances SEO, and delivers a better user experience. With the W3 Total Cache<\/strong> plugin, you can seamlessly convert and serve optimized images, ensuring your site stays fast and competitive.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":" 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. Images are a vital part of any website, enhancing both […]<\/p>\n","protected":false},"author":880,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Serve Images in Next-Gen Formats in WordPress","bgseo_description":"Learning how to serve images in next-gen formats will help you improve Google PageSpeed Insights results and make your WordPress website faster.\r\n","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[747,692],"tags":[],"class_list":["post-44514","post","type-post","status-publish","format-standard","hentry","category-user-experience","category-w3-total-cache"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/44514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/880"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=44514"}],"version-history":[{"count":25,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/44514\/revisions"}],"predecessor-version":[{"id":151570,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/44514\/revisions\/151570"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=44514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=44514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=44514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Step 1: Install and Activate W3 Total Cache<\/h3>\nDownload and activate the W3 Total Cache plugin from the WordPress plugin repository.<\/p>\n

Can I revert images to their previous format?<\/h3>\nImages can also be reverted through the Media Library either individually or with the W3 Total Optimize Revert option in the Bulk Actions list.<\/span><\/p>\n

Step 1: Install and Activate W3 Total Cache<\/h3>\n
Download and activate the W3 Total Cache plugin from the WordPress plugin repository.<\/p>\n

Can I revert images to their previous format?<\/h3>\n
Images can also be reverted through the Media Library either individually or with the W3 Total Optimize Revert option in the Bulk Actions list.<\/span><\/p>\n
$\"single$ <\/a><\/p>\n