Learn & Understand

Images Are the Biggest Page Weight: srcset, Next-Gen Formats, and Lazy Loading

The companion calculator gives the pixel widths to generate for a responsive image's srcset across screen densities. That is one piece of a bigger truth: images are typically the largest contributor to page weight, which makes optimizing them the single highest-leverage performance improvement available. Understanding the full toolkit, serving the right-sized image with srcset and picture, adopting next-generation formats that shrink files dramatically, and deferring off-screen images with lazy loading, turns a width calculation into a comprehensive strategy for the assets that matter most to speed.

Images Dominate Page Weight

On most websites, images account for the majority of the bytes a page transfers, far more than the HTML, CSS, and JavaScript combined. This makes them the obvious target for optimization: shaving image weight does more for load time and bandwidth cost than almost any other change. The reason responsive-image techniques exist at all is that serving images naively, one large file to everyone, wastes enormous bandwidth on users who do not need the full resolution. Because images are the heaviest asset, getting them right is where performance work pays off most, which is why the modern web offers such a rich set of image-optimization tools.

Serving the Right Image: srcset and picture

The core idea of responsive images is to let the browser choose the most appropriate image for each user rather than serving one size to all.

With srcset you provide several versions of an image at different widths, exactly what the calculator sizes, and the browser downloads the one best matching the user's screen density and the image's display size, avoiding sending a huge image to a small or low-density screen. The picture element goes further, enabling art direction, serving a differently cropped or entirely different image under different conditions, and choosing between formats. Together they ensure each visitor gets an image sized for their device, which is the essence of responsive-image savings. The two failure modes this avoids are blurry images on high-density screens and needlessly huge downloads on standard ones.

Next-Generation Formats

Beyond serving the right size, using a more efficient format shrinks every image substantially. Modern formats like WebP and AVIF compress images significantly smaller than the older JPEG and PNG at comparable quality, often dramatically so for AVIF. Adopting them can cut image bytes, and thus page weight, meaningfully with no visible quality loss. Because browser support varies, the picture element is used to serve a next-gen format to browsers that support it while falling back to a traditional format for those that do not. Switching to efficient formats is one of the easiest large wins in web performance, since it reduces the size of the heaviest assets across the board.

Lazy Loading

The final lever is not loading images the user may never see. Lazy loading defers the download of off-screen images until the user scrolls near them, so a long page does not load every image up front, only those actually about to be viewed. This speeds the initial load, since the browser is not competing to fetch images far below the fold, and it saves bandwidth for images that are never reached if the user leaves early. Native lazy loading makes this trivial to apply. Combined with right-sizing and efficient formats, lazy loading ensures the browser downloads only the images it needs, at the size it needs, when it needs them, addressing image weight from every direction.

Optimizing the Heaviest Assets

Use the calculator to generate the right image widths for srcset, and pursue the full image strategy: serve appropriately sized images with srcset and picture so no one downloads more resolution than their screen can use, adopt next-generation formats like WebP and AVIF to shrink every file, and lazy-load off-screen images so the browser fetches only what is needed. The calculation sizes the variants; understanding that images dominate page weight is what makes optimizing them the biggest speed win you can get.