Why Should You Use The Advanced WebP Image File Format

Posted on Feb 7, 2024 By Nathan Krasney

What is WebP

Using WebP, webmasters and web developers can create smaller, richer images that make the web faster

WPage speed insight recommendation considers WebP to be an advanced format.

WebP was developed by Google and announced in September 2010

The browser support for WebP is very good

Motivation for WebP

In short, WebP makes the image file smaller and improves the performance

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index
Excellent choice for both images and animated images. WebP offers much better compression than PNG or JPEG, supporting higher color depths, animated frames, transparency, etc. AVIF offers slightly better compression but could be better supported in browsers and supports progressive rendering. Support: Chrome, Edge, Firefox, Opera, Safari
According to mdn WebP is the best among all image formats

When Not To Use WebP

Lossless Compression for Photographs

Although WebP supports lossless compression, the benefits might be less significant for photographs compared to lossy formats like JPEG. Lossless formats like PNG might be preferred when maintaining the highest quality is crucial.

File Size Considerations

In some cases, especially for tiny images or thumbnails, the overhead of the WebP format might not be justified compared to simpler formats like JPEG or PNG. Always consider the trade-off between file size and quality.

Conversion Tools

cwebp
sharp
Note that sharp is a package also used by next.js Image component and has 4.3M weekly downloads as of Jan 2024

A typical use case for this high-speed Node-API module is to convert large images in standard formats to smaller, web-friendly JPEG, PNG, WebP, GIF, and AVIF images of varying dimensions. But you can do much more; here are the complete API categories.
- Input metadata
- Output options
- Resizing images
- Compositing images
- Image operations
- Color manipulation
- Channel manipulation
You can see below code samples for 'Output options' to convert image file to WebP format and 'Resizing images' to scale WebP file size
WebP / Avif image converter

Convert Image File Format Using sharp Package API

The following code is an example from sharp-helper-utils.ts

async function convertToWebP(
  inputImagePath: string,
  outputImagePath: string): Promise 
  {
    return sharp(inputImagePath).webp().toFile(outputImagePath);
  }

Scale Image Files Width \ Height Using Sharp Package API

The following code is an example from sharp-helper-utils.ts

async function scaleOne(
    newWidthPx: number,
    sourceImageFullPath: string,
    targetImageFullPath: string
  ): Promise {
    // Resize the image using sharp and await for the operation to finish
    return sharp(sourceImageFullPath)
      .resize({ width: Math.round(newWidthPx) })
      .toFile(targetImageFullPath);
  }

Next js and WebP

WebP is used by default on the fly by next.js Image component

Repository

image-processing-with-sharp-playground (tag 0.4)

References

Post updated on Feb 8, 2024 By Nathan Krasney

Post2Video