Ensure that images are responsive so that images are optimised for the screen size and pixel density that they are being displayed on.
Easy to implement
5 High impact score
Use image srcsets so the browser can pick the most appropriate image for the device’s resolution, rather than serving one oversized image to every screen.
Combine this with format choice: it’s where the real savings are. Moving an image from JPG to WebP alone gave an 89% reduction in total size at 75% quality in our own testing. Accepting a 45% quality reduction still returned 100% of the visual quality to the eye, and dropping to 50% quality delivered a 93% size reduction with no visible compromise. WebP has full support across modern browsers today; AVIF is smaller again but is still an emerging format with less consistent support. If you’re on Next.js, its Image component will handle this format negotiation for you automatically.