The Web Image Optimization Playbook
Ship images that load fast without looking cheap — formats, sizing, and compression in the right order.
Pick the right format first
Format is the biggest lever. Photographs belong in a lossy format like WebP or JPG; flat graphics and screenshots with sharp edges belong in PNG or, when supported, WebP.
Choosing correctly before you touch a quality slider often saves more bytes than any amount of tuning afterwards.
Resize before you compress
A four-thousand-pixel photo displayed at eight hundred pixels wastes most of its data. Resize to the largest size the layout actually shows before doing anything else.
Downscaling is essentially free in perceived quality and multiplies the effect of compression.
Compress to the sweet spot
With the right format and size, compression is the finishing pass. For photos, 80–85% quality is invisible while cutting file size dramatically.
Preview at full size and only push lower if the file genuinely needs to be smaller.
Serve modern formats
Once your images are sized and compressed, deliver WebP or AVIF to browsers that support them and fall back to JPG or PNG elsewhere.
The payoff is smaller downloads with no visible quality cost for the majority of your visitors.