Shipping lighter images without losing quality

Images are usually the heaviest thing on a page, so they're also the biggest, easiest win for performance. The goal isn't "smaller at any cost" — it's the smallest file that still looks right on the screen it lands on. Here's a workflow that gets there without eyeballing every export.

Resize before you compress

The single biggest saving is usually dimensions, not the codec. A 4000px hero served into an 800px slot wastes ~96% of its pixels before compression even starts. Decide the real display size, account for high-DPR screens (2× is plenty for most photos), and downscale to that first. Compress a right-sized image and every later step has less to do.

Pick the right format for the job

Photos: AVIF or WebP, with a JPEG fallback if you still need it. Flat UI, logos and screenshots: lossless PNG or WebP. Don't ship a PNG of a photograph or a JPEG of a screenshot — both are the wrong tool and cost you bytes and quality. When in doubt, encode it both ways and keep the winner.

Set a perceptual quality target

"Quality 80" means different things across encoders, so target a perceptual result instead of a magic number. A SSIMULACRA2 score around 80–90 is visually lossless for most photos; below ~70 you'll start to see it on gradients and skin. Pick a floor, let the encoder hit it, and you get consistent quality across a whole library instead of per-file guesswork.

# Resize to display size, then convert at a quality floor
imageforge hero.png --resize 1600 --convert avif --quality 82
imageforge ./gallery/*.jpg --convert webp --quality 80 --recursive

Automate it

A workflow only sticks if it's boring to run. Batch a whole folder, keep the originals untouched, and let the tool report what it saved so you can trust the result. The point is to make "lighter" the default path, not a manual chore someone forgets before launch.

Ship the smallest file that still looks right — not the smallest file. The difference is the whole job.

Measure, don't guess

Close the loop by checking the actual savings and the actual quality, not just the file size. A 90% smaller file that looks degraded isn't a win; a 60% smaller one that's visually identical is. Track both and you can push settings confidently instead of playing it safe.