You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Thinking about it some more, sites can do responsive lazy loading using preload.
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.
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.
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 aloading
attribute that would override the lazy loading state of the<img>
that it is associated with.i.e.
would result in lazy loading the image but only for viewports less than 600px wide, otherwise it would load eagerly.
The text was updated successfully, but these errors were encountered: