How WebP Can Cut Image Size and Boost Page Speed: A Practical Guide

Background

Images are a major source of bandwidth on e‑commerce sites. Reducing image size while preserving visual quality improves page‑response time.

WebP format

WebP supports both lossy and lossless compression. Google tests show lossless WebP is about 26 % smaller than PNG, and lossy WebP is 25‑34 % smaller than JPEG at comparable quality.

Browser support

Native support includes Chrome and Opera on desktop, and Chrome for Android, the Android native browser, and Opera Mini on mobile. Roughly 42 % of current browsers can display WebP directly.

Command‑line tools

Install on macOS: brew install webp Install on CentOS (compile from source):

yum install -y gcc make autoconf automake libtool libjpeg-devel libpng-devel
wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.5.0.tar.gz
tar -zxvf libwebp-0.5.0.tar.gz
cd libwebp-0.5.0
./configure
make
make install

Conversion commands:

cwebp [-preset <options>] input_file [-o output_file]
dwebp input_file [options] [-o output_file]

The quality parameter q ranges from 0 to 100; a typical value is 80.

Advantages

Smaller file size – e.g., a test on 100 product images with 80 % quality lossless WebP reduced size by about 60 % while visual difference was negligible.

Higher visual quality at the same file size compared with JPEG/PNG.

Disadvantages

Encoding is roughly 10× slower and decoding about 1.5× slower than JPEG. The decoding overhead is usually offset by the reduced download size, but it may matter for latency‑critical scenarios.

Performance test

Equal‑quality WebP and JPEG images were measured for load time. Although WebP adds decoding overhead, its smaller payload shortens overall page rendering, especially as the number of images grows.

Implementation strategies

JavaScript feature detection

Detect WebP support in the browser and serve the appropriate format:

function check_webp_feature(feature, callback) {
  var kTestImages = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
  };
  var img = new Image();
  img.onload = function() { var result = (img.width > 0) && (img.height > 0); callback(feature, result); };
  img.onerror = function() { callback(feature, false); };
  img.src = "data:image/webp;base64," + kTestImages[feature];
}

Lazy loading

Combine the detection code with a lazy‑loading library so that the src attribute is replaced with a WebP URL only for browsers that support it, allowing the page to render quickly while images load in the background.

Nginx PageSpeed module

Google’s PageSpeed module can rewrite PNG/JPEG to WebP on the fly for browsers that send Accept: image/webp:

pagespeed on;
pagespeed FileCachePath "/var/cache/ngx_pagespeed/";
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;

After enabling the filter, image URLs are automatically rewritten to .webp versions for supporting browsers.

Conclusion

WebP provides substantial bandwidth savings and faster page loads with modest decoding overhead. By using the command‑line utilities, JavaScript detection, lazy loading, or server‑side conversion (e.g., Nginx PageSpeed), developers can adopt WebP to improve user experience and reduce network traffic.