Skip to content
Latchkey

cwebp: Convert Images to WebP in CI

cwebp -q 80 input.png -o output.webp encodes an image to WebP, typically much smaller than the JPEG/PNG source.

cwebp (from Google's libwebp) is the reference WebP encoder used in asset pipelines. The quality flag and lossless mode are the main controls.

What it does

cwebp reads a PNG, JPEG, TIFF, or WebP input and encodes WebP. By default it is lossy with quality -q (0-100); -lossless switches to lossless mode (best for graphics/PNG sources); -resize and -crop transform before encoding.

Common usage

Terminal
# lossy WebP at quality 80
cwebp -q 80 input.png -o output.webp
# lossless (good for screenshots/logos)
cwebp -lossless input.png -o output.webp
# resize then encode
cwebp -q 75 -resize 1280 0 input.jpg -o output.webp
# near-lossless for photos
cwebp -near_lossless 60 input.png -o output.webp

Options

FlagWhat it does
-q <0-100>Lossy quality (higher = better/larger)
-losslessLossless encoding
-near_lossless <n>Lossless preprocessing strength 0-100
-resize <w> <h>Resize before encoding (0 keeps aspect ratio)
-o <file>Output WebP path
-m <0-6>Compression method (slower = smaller)

In CI

Use -lossless for PNG-sourced UI graphics and -q 75-82 lossy for photos. cwebp does not decode SVG, so rasterize SVGs first (with rsvg-convert) and feed the PNG. Generate WebP alongside originals so the site can serve both with a <picture> fallback.

Common errors in CI

"cwebp: command not found" means libwebp is not installed; apt-get install -y webp (Debian/Ubuntu) or brew install webp. "Error! Could not process file ... Unsupported input file format" means the input is not a format cwebp reads (e.g. SVG or GIF); convert it first. "Cannot open output file" is a path/permissions issue. A WebP larger than the source usually means lossless mode on a photo; switch to lossy -q.

Related guides

Run this faster and cheaper on Latchkey managed runners. Start free →