Optimizing images for the web with WebP

I recently converted all images on this site from PNG and JPEG to WebP. The results were better than I expected, so here are some quick notes.

Why WebP

WebP produces smaller files than PNG and JPEG at comparable visual quality. Browser support is effectively universal now — every modern browser has supported it for years. There is no reason to keep serving older formats for new content.

Converting with cwebp

The cwebp command-line tool (part of the libwebp package) handles conversion:

# Convert a single PNG
cwebp -q 80 input.png -o output.webp

# Batch convert all PNGs in a directory
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

Quality 80 is a good starting point. For screenshots and diagrams, you can often go lower (65–75) without visible degradation. For photographs, 80–85 tends to preserve detail well.

Actual savings

On this site, the conversion reduced total image weight by about 60%. A few specific examples:

These are meaningful savings, especially for visitors on slower connections.

In Hugo

For a Hugo site, I keep WebP files in the static/images/ directory and reference them directly in posts:

![Description of image](/images/example.webp)

No special Hugo configuration needed. If you want to get more advanced, Hugo’s image processing pipeline can convert images at build time, but for a small site with a handful of images, manual conversion is simpler.

One caveat

WebP’s lossy compression is not always the best choice. For images with very fine text or pixel-precise detail, PNG remains better. I keep a few images as PNG where lossless reproduction matters. For everything else, WebP is the default.