Serving one image to every device is wasteful. Lazy loading, responsive srcset, and modern formats let you send the right bytes to the right device at the right time.
A web page that sends the same 2 MB image to a desktop and a phone, and loads every image immediately even if the user never scrolls, is doing unnecessary work. Modern HTML gives you three tools to fix this: lazy loading, responsive image attributes, and new image formats with fallbacks. Used together, they cut payload dramatically without changing what the user sees.
Lazy loading
The loading attribute tells the browser when to fetch an image. loading="lazy" defers the download until the image is about to enter the viewport. loading="eager" (the default) loads it immediately. The rule is simple: eager-load the hero and anything above the fold; lazy-load everything below it. Lazy-loading the hero image delays the LCP element and makes the metric worse, which is the opposite of what you want.
For the hero, pair eager loading with fetchpriority="high" and a <link rel="preload" as="image"> in the head so the browser starts the request as early as possible. For below-the-fold images, lazy loading plus width and height attributes gives you both deferred downloads and zero layout shift.
Responsive images with srcset and sizes
srcset lets you offer multiple resolutions of the same image and let the browser pick. A typical srcset lists a 400px, 800px, and 1600px version, and the browser chooses based on the device’s screen width and pixel ratio. The sizes attribute tells the browser how wide the image will be displayed at different breakpoints, so it can pick the right file before it knows the layout. The result: a phone downloads the small version, a desktop downloads the large one, and neither downloads more than it needs.
Generate the different resolutions with Resize Image, then reference them in srcset. This is one of the most effective payload reductions available, especially for image-heavy pages viewed on mobile.
Modern formats with fallbacks
WebP and AVIF produce much smaller files than JPEG and PNG at the same visual quality. AVIF is the newer of the two and typically out-compresses WebP, but it has slower encoding and less universal support. The <picture> element lets you serve the modern format to browsers that support it and fall back to JPEG for the rest:
- <picture><source srcset="hero.avif" type="image/avif">
- <source srcset="hero.webp" type="image/webp">
- <img src="hero.jpg" width="1280" height="720" alt="Hero"></picture>
The browser tries each source in order and uses the first one it understands, falling back to the img src. Convert your originals with Image Convert, then compress each version with the Image Compressor.
Decoding and priority hints
Two smaller attributes help further. decoding="async" tells the browser to decode the image off the main thread, which keeps interactions responsive while images process. fetchpriority="high" on the hero and fetchpriority="low" on decorative images lets the browser order its requests so the LCP image is not stuck behind less important assets.
Putting it together
- Hero image: eager load, fetchpriority="high", preload in head, width and height set.
- Below-the-fold images: lazy load, width and height set, decoding="async".
- Serve AVIF and WebP via <picture> with a JPEG fallback.
- Offer multiple resolutions through srcset and sizes.
- Compress every version; resize before compressing.
None of these techniques changes what the page looks like. They change how many bytes travel to the device and when. Done well, a page can look identical to the user while weighing a fraction of the original — which is exactly what Core Web Vitals reward.
Verifying the result
After applying lazy loading, responsive srcset, and modern formats, measure the impact rather than assuming it. Run Lighthouse to confirm LCP and CLS improvements in the lab, and check Search Console’s Core Web Vitals report for the field-data effect over the following weeks. Inspect the network tab in DevTools to confirm that below-the-fold images are no longer fetched on initial load and that the hero image arrives early with a modern content-type. A common regression is a CMS or plugin that strips the loading and fetchpriority attributes or re-encodes images back to JPEG, so re-check after any platform update. Performance gains from image optimisation are real and durable, but only if the markup that delivers them survives the publishing pipeline.