Problem/Motivation
While playing with lazy loading attribute that is coming from the core and our own implementation in #3060605: Support lazy loading of images @sasanikolic noticed that responsive image tag is missing width and height attribute. This bothered me because core lazy loading implementation will not work for these cases at all. Why the core is not setting these attributes for lazy image loading which basically disable lazy loading for all responsive images?
I've read quite a bit of info related to lazy loading and images and responsive images in next resources:
- https://www.smashingmagazine.com/2020/03/setting-height-width-images-imp...
- https://github.com/whatwg/html/pull/4952
- https://bugs.chromium.org/p/chromium/issues/detail?id=979891
- https://bugzilla.mozilla.org/show_bug.cgi?id=1547231
- https://bugs.webkit.org/show_bug.cgi?id=201641
In short, at least as I understand, the problem with lazy loading and responsive images was that in one moment browsers were not properly supporting width/height attributes when images were lazy-loaded. So the browsers were not able to calculate the aspect ratio of images and show image area while image was still loading - and this resulted in recalculating page layout on image loaded. However, this should be fixed in most or all browsers now and this combination should work.
Steps to reproduce
Create an image field with the responsive display, check HTML and you will see that width and height attributes are missing.
Proposed resolution
Add width and height attributes to the responsive image tag.
Remaining tasks
Test picture tag implementation.
User interface changes
None.
API changes
None.
Data model changes
None.