Resize to the rendered dimensions
A 4000-pixel image displayed at 600 CSS pixels may carry far more image data than the page needs. Resize to a practical target while allowing for high-density screens and responsive layouts. Keep an original master so future layout changes do not require enlarging a small derivative.
For a responsive site, create a few deliberate size variants and let HTML select one. A single tiny file may look soft on a large display, while a single huge file wastes bandwidth on phones.
Adjust quality and verify
Lower quality in small steps and inspect the output rather than chasing a target percentage. Fine texture and text can degrade quickly; large photographic backgrounds often tolerate more compression. This is lossy WebP compression, so a lower file size can mean fewer image details.
If the WebP is already highly optimized, another pass may increase size. Try another source or encoder, or keep the existing file. GZ's browser canvas re-encodes a still image and is intended for convenient one-off WebP optimization, not lossless WebP compression or exhaustive codec tuning.
Frequently asked questions
Can I target an exact file size?
This tool shows the actual result after encoding but does not promise an exact target size; encoder output varies with image content.