Why compression is the first bottleneck to fix
Image and media files account for most of the bytes on the average web page. A page's HTML, CSS, and JavaScript combined are often smaller than a single unoptimized photograph, and compression attacks exactly that weight without sacrificing visible quality. It is the cheapest performance win available: no infrastructure, no build orchestration, just the right encoder settings applied consistently.
WebP: the balanced default
WebP supports lossy and lossless compression plus transparency, so it replaces both JPEG and PNG for most web use. For photos it reliably lands 25-35% smaller than an equivalent-quality JPEG, and browser support is effectively universal on any device released in the last several years. It is the format to choose when you want one answer that works everywhere.
AVIF: when you need the last word
AVIF takes compression further, frequently another 20-30% smaller than WebP on high-detail photos, because it can leverage intra-frame prediction and transforms that JPEG-style encoders cannot. The trade-offs are real: encoding is slower, and some very old browsers still require a fallback. Reserve AVIF for controlled environments like a modern frontend serving its own formats, with WebP or JPEG as the fallback.
What about PNG and SVG?
Blindly exporting everything to a photo format is a mistake. Screenshots, logos, and line art with sharp edges and transparency belong in PNG, and most logos and icons belong in SVG - which scales to any size at a fraction of the bytes and costs nothing to generate. The format decision carries more weight than any quality slider.
How to choose a quality level
Quality is a trade with diminishing returns. A JPEG or WebP at quality 70-80 is typically indistinguishable from the original at normal viewing size while weighing a fraction as much. Evaluate at the actual rendered dimensions, not by zooming to 100% - the only artifacts that matter are the ones people can see. For images with large smooth areas, high quality settings waste bytes; for fine textures, keep quality a little higher.
Building it into a pipeline
Manual compression works for hero art and rarely survives content at scale. The robust approach converts assets automatically at build or upload time: resize to the intended display width, encode to WebP (or AVIF where supported), and keep the original in storage. That way every new image inherits the same budget-enforcing settings without a human in the loop.
Measure before and after
Approach compression like any performance work: measure. Note the page weight and image byte totals before, then re-check after the format and quality changes. A page that dropped from several megabytes to a few hundred kilobytes shows a small difference in your build, and a large difference in load time - which is exactly the signal you want to report and maintain.