Web performance
Optimize images for the web by changing fewer things, in the right order
A practical image optimization workflow for faster pages: resize first, choose the right format, compress carefully, and remove metadata.
Most slow web images are not slow because someone picked the wrong magic quality number. They are slow because the source image is much larger than the slot it appears in.
Fix dimensions first. Then choose the format. Then compress.
Match the displayed size
If a card image is displayed at 640px wide, shipping a 3000px-wide source wastes bandwidth and decode time. Start by checking where the image will appear:
- Hero image.
- Product card.
- Avatar or logo.
- Blog inline image.
- Open Graph preview.
Export the image close to the largest size it will actually need, with room for high-density screens when appropriate.
Pick the format based on the content
Use the content of the image to choose the format:
- JPG for photos and complex gradients.
- PNG for transparency or crisp UI captures when file size is still reasonable.
- WebP for broad modern compression support.
- AVIF when your target browsers support it and you want smaller photo-like files.
No format wins every time. A screenshot with sharp text can look worse than expected if you force it through aggressive photo compression.
Compress until the damage shows, then back off
The right quality setting is where the file is smaller and the visible damage is still acceptable for the image’s job.
Check edges, text, skin tones, and flat background areas. Those are where compression artifacts become obvious first.
Remove metadata for production assets
Production web images usually do not need camera metadata. Removing it makes files a little smaller and keeps private capture details out of public assets.
Use Optimize Images for a local browser workflow that combines resizing, compression, format conversion, and metadata cleanup without uploading the original file.
Do not optimize the same file repeatedly
Repeatedly opening an already-compressed JPG and exporting it again can stack artifacts. Keep a high-quality source file, then generate final web versions from that source.
For a production site, that usually means one source image and several purpose-built exports, not one battered JPG reused everywhere.