Allow for different lazy loading policies on responsive image sources.

[pmeenan]

Currently lazy loading is applied to the <img> element, even when there are multiple <source> tags for the same image within a <picture>.

For a responsive site that may have different images in the viewport based on layout (mobile vertical scroll vs desktop grid for example), a developer will need to decide which layout to optimize for and potentially slow down the performance of the other layouts.

A possible solution would be to have a given <source> to have a loading attribute that would override the lazy loading state of the <img> that it is associated with.

i.e.

<picture>
  <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" loading="lazy">
  <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)">
  <img src="https://via.placeholder.com/1500x300">
</picture>

would result in lazy loading the image but only for viewports less than 600px wide, otherwise it would load eagerly.

[pmeenan]

Thinking about it some more, sites can do responsive lazy loading using preload.

1. Add loading=lazy to the image element which will apply to all sizes, sources, srcset's and any css rules that may hide the image based on media queries.
2. Use <link rel="preload" media="xxx"> with the relevant media queries to eagerly load the versions of the image that they don't want to lazy load, only for the situations where it will be used.

That should provide the flexibility to work with all of the various scenarios where lazyloading of images may need to be split for responsive reasons. It requires a bit more markup and duplicating the image URLs but it is much more robust than handling just the picture case.