How to use WebP Images in WooCommerce

A cutting-edge image format called WebP offers better lossless and lossy compression for images on the internet. Webmasters and web developers can produce smaller, richer images using WebP that speed up the web.

When compared to PNGs, WebP lossless pictures are 26% smaller in size. WebP lossy images at equivalent SSIM quality index are 25–34% smaller than comparable JPEG images.

Transparency (also known as the alpha channel) is supported by lossless WebP at a cost of only 22% more data. Lossy WebP also allows transparency for situations where lossy RGB compression is acceptable, usually offering 3 smaller file sizes than PNG. 

Animated WebP pictures can offer smaller sizes than GIF and APNG because they can support lossy, lossless, and transparency.

WebP images typically have a 25–35% reduction in file size compared to their JPEG and PNG peers. This reduces web page sizes and enhances the performance.

According to YouTube, switching to WebP thumbnails speed up website loads by 10%.

When Facebook moved to using WebP, they saw savings of 25–35% in file size for JPEGs and 80% in file size for PNGs.

Lossy WebP compression uses optimize and predictive coding for encode the images, the same method used by the VP8 video codec to compress keyframes in videos.

In predictive coding, the values of adjacent blocks of pixels are used to forecast the values in a block, and only the difference is encoded.

Now a days WebP is default support on different browser like Chrome, Safari, Firefox, Edge, Opera and many other tools and libraries.

Some of the popular tool for converting images to WebP: cwebp command line tool, imagemin webp.

The Imagemin WebP plugin is generally the best choice if your project uses build scripts or build tools (e.g. Webpack or Gulp), whereas the CLI is a good choice for simple projects or if you’ll only need to convert images once. You can also find lots of online tool on web.

Use Imagemin

Just setup few line of code and convert:

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
})

Before

<img src="webkul-logo.png" alt="">

After

<picture>
  <source type="image/webp" srcset="webkul-logo.webp">
  <source type="image/jpeg" srcset="webkul-logo.png">
  <img src="webkul-logo.png" alt="">
</picture>

The <picture>, <source>, and <img> tags, including how they are ordered relative to each other, all interact to achieve this end result.

You can check your pages are using WebP format of images by Lighthouse. Run the Lighthouse Performance Audit (Lighthouse > Options > Performance) and look for the results of the Serve images in next-gen formats audit. Lighthouse will list any images that are not being served in WebP. You can also verify it by some online tool: pagespeed, gtmatrix, webpagetest

If you need custom WordPress Development services then feel free to reach us and also explore our exclusive range of WordPress WooCommerce Extensions.

Happy coding!!