Comparison
Native lazy loadingvsResponsive images
Native lazy loading
you added one attribute and the images further down the page stopped downloading until they were near the viewport.
The `loading="lazy"` attribute, which defers fetching an image or iframe until it approaches the viewport, handled by the browser without script. It replaces the observer-based libraries that used to do this, with better heuristics and no main-thread cost. Applying it to an image above the fold delays the largest contentful paint, which is the one way it reliably makes things worse.
Full entry →Responsive images
you listed several image widths and let the browser pick one based on the screen and the layout.
Offering multiple sources with `srcset` and `sizes` so the browser downloads an appropriately sized file rather than a desktop image scaled down on a phone. It is usually the largest single byte saving available on a content page. It only works if `sizes` describes the layout accurately: a wrong value makes the browser choose too large or, worse, too small.
Full entry →