Website image optimization works best as a repeatable process rather than a search for one magical format or quality number.
1. Start with display dimensions
Do not send a 5000-pixel camera image into a 700-pixel content column unless there is a real need for that resolution. Reducing unnecessary dimensions often saves more data than changing format alone.
2. Match the format to the image
Photographs, transparent graphics, screenshots and illustrations have different characteristics. JPEG, PNG, WebP and AVIF each make sense in different situations.
3. Compress while looking at the image
Use quality settings as starting points, not guarantees. Examine important areas such as faces, text, gradients and sharp edges.
4. Keep a source master
Generate web derivatives from a high-quality source rather than repeatedly re-saving previously compressed delivery files.
5. Test responsive delivery
Serve sizes appropriate to different screens when your platform supports it. A phone often does not need the same number of pixels as a large desktop display.
6. Recheck performance
Measure real page behavior after deployment. Image optimization should improve user experience without sacrificing the visual quality required by the content.