Before any image goes on a site I run it through Squoosh. It is a free browser tool from the Chrome team, it works offline and nothing gets uploaded to a server.
Tips:
– Use the side by side slider to push quality down until you actually see a difference, then go one step back. Usually lands around 70 to 80 for WebP.
– Resize to the real display width first. Most bloated pages I audit are serving 4000px photos into 800px containers.
– Try AVIF on hero images. It often beats WebP by a good margin, just keep a fallback.
– Compare file sizes shown at the bottom for each codec before picking one.
Downside: it is one image at a time in the browser. Fine for a blog post, painful for a product catalogue. For bulk work I use the CLI tools or a plugin instead.
https://squoosh.app/
.
