Compression starts before you touch a quality slider. Serving a PNG photograph is the single most common mistake on the web: PNG is lossless by design, which sounds virtuous but produces enormous files for photographic content. For photos use JPEG, WebP or AVIF; for flat-colour graphics, logos and icons, PNG or SVG stay the right call.
01Choose the right format first
The modern hierarchy: AVIF produces the smallest files for photos; WebP lands close behind with universal support; JPEG is the safe fallback. A well-compressed AVIF is consistently, meaningfully smaller than an equivalent JPEG — enough to justify the extra <picture> element.
02Dial the quality setting intelligently
Most people leave quality too high. JPEG quality 100 isn’t "perfect", it’s "enormous". 80–85 is the sweet spot: size falls steeply below 100 while quality stays effectively indistinguishable. In Squoosh, AVIF quality 60 often looks like JPEG 85 at a fraction of the size. The numbers aren’t portable across codecs — the principle is: compress to the threshold of visible degradation, then back off one notch.
03Resize to the actual display size
Quality settings matter far less than pixel dimensions. A 4000×3000 photo scaled by CSS into an 800-pixel column is roughly 25× the data the browser needed. Resize to the largest displayed dimension (plus a 2× for high-density screens) before compressing:
magick input.jpg -resize 1600x1600\> -quality 82 output.jpg04Strip the metadata you don’t need
Camera files carry EXIF — GPS, camera model, timestamps — useful in a library, wasteful and privacy-leaking on the web. ImageMagick’s -strip clears it all in one pass; keep the embedded sRGB profile, or strip it only if you’re certain the export is already sRGB.
Format first, size next, quality third, metadata last — work the gates in order and the numbers take care of themselves.