Start with the largest files
Camera photos and screenshots are often larger than a web page needs. Check prominent images first, since their downloads can delay the main content.
Resize and compare formats
Resize images for their display size, then compare WebP, AVIF, JPEG, or PNG as appropriate. Check the result for readable text, sharp edges, and visible compression artifacts.
Serve the right size
Use responsive image sources so the browser can select a file suited to the screen. Include width and height to reserve space and help prevent layout shifts.
Check the published page
Lazy-load off-screen images where appropriate, keep the main visible image available promptly, and test on mobile. Compare file sizes and loading behavior while checking visual quality.