Cutting page weight with modern image formats
On almost every site we review, images make up most of the page weight. The fix is rarely complicated.
Serve the right size
A photo displayed at 600 pixels wide does not need to be 4000 pixels wide. Generate a few sizes and let the browser choose with srcset.
<img src="team-800.webp"
srcset="team-400.webp 400w, team-800.webp 800w, team-1600.webp 1600w"
sizes="(max-width: 700px) 100vw, 700px" alt="Our team">Use modern formats
WebP and AVIF are supported by all current browsers and are typically 30–60% smaller than JPEG at similar quality.
Lazy-load below the fold
Add loading="lazy" to images that are not visible on the first screen. It is one attribute and it helps on slow mobile connections.