4 ms·

Avoiding image layout shifts (CLS): aspect-ratio vs. width and height

53 points by angelmm 4y ago

chiefalchemist 4y ago
I think I'd rather put the aspect-ratio on the element that wraps the img. And then use object-fit on the img. Two reasons: - Allows for using the img tag sizes (and srcset) - When using sizes (w/ srcset) I don't have to worry if the image the browser picks from the srcset isn't the correct size and/or aspect ratio.
- Vanderson 4y ago
  I think you are agreeing with the article, but the details are different. I like how he distinguishes between specific use case, user generated content, or part of the site design. > So, which method should we use? > We've got one solution, aspect-ratio, which is CSS-based. And the other solution, presentational hinting, which uses width and height attributes. The question is very similar to "should this image be a <img> or a CSS background-image?" and the answer is the same: Is it content or design?
- itsuka 4y ago
  I also use the wrapper pattern for my recent projects, but the primary reason is for avoiding layout shifts (I didn't know a simpler solution exists until I read this article). The approach is quite different than what the article suggests: rather than setting a specific width and height on the img element, I simply set it to 100% for the wrapper and img elements (and the rest are the same as yours: I set aspect-ratio on the wrapper and object-fit on the img element).
  - clairity 4y ago
    i really dislike wrapper patterns of any kind, as they add needless markup. sure, it's ok if used sparingly to paper over the inadequacies of current html/css, but it's often used excessively nowadays, just like tables in days past. the element itself, not a superfluous wrapper, should provide the parameters necessary (implicitly or explicitly) to specify layout and prevent layout shift. it sounds like the author takes an either-or approach to this, using either aspect-ratio (for design images) or height and width (for content images). having only skimmed, i haven't yet digested why hinting via attr(height) and attr(width) isn't the (future) preferred best-of-both-worlds, other than it not being supported yet ( https://caniuse.com/css3-attr https://caniuse.com/css3-attr ).
    - jaffathecake 4y ago
      The lack of support is the only reason, but that's a pretty big reason. Hopefully, in future, web devs will be able to add the same feature to things like iframes via attr(width number) - the number casting will still be necessary.
      - clairity 4y ago
        yah, i can’t wait for attr() to be fully supported. it’s going to both simplify css and reduce js reliance. i’m also really excited by :has() which i think will be the biggest improvement to css since grid. firefox has just started working on it, while safari and chrome already have an initial implementation in place.
    - chiefalchemist 4y ago
      Not a fan either. But when working with WordPress it takes extra work to ensure all the images in the srcset have the same aspect ratio. So the only way to ensure cover is object-fit. Note: this is also useful for background images in the sense totoo often the same large HD+ image is served to mobile devices.
  - jaffathecake 4y ago
    Even if you set width and height attributes, you can still set the image to 100% width using CSS. That's how all the examples in the article work. You don't need a wrapper element.
- jaffathecake 4y ago
  The point in the article is you don't need that wrapper. Just add the width & height to the image, and give the image `height:auto`.
  - chiefalchemist 4y ago
    And what about object-fit? Best I can tell, the article works if you are 100% certain that all the images in the srcset have the same aspect ratio. With, for example WordPress, that is often not the case.
    - jaffathecake 4y ago
      All images in the srcset are supposed to be the same aspect ratio. If WordPress is doing something different then it's a bad implementation. From https://html.spec.whatwg.org/multipage/images.html#introduction-3:viewport-based-selection-2 https://html.spec.whatwg.org/multipage/images.html#introduct... > The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image). If you want different representations of the content, those should be different <source>s. From https://html.spec.whatwg.org/multipage/images.html#introduction-3:art-direction-3 https://html.spec.whatwg.org/multipage/images.html#introduct... > The picture element and the source element, together with the media attribute, can be used to provide multiple images that vary the image content (for instance the smaller image might be a cropped version of the bigger image). More details on responsive images in general https://jakearchibald.com/2015/anatomy-of-responsive-images/ https://jakearchibald.com/2015/anatomy-of-responsive-images/.
      - jaffathecake 4y ago
        I just threw together a test page, and it seems like WordPress does the right thing https://jakesdemosite975920295.wordpress.com/2022/07/12/test-post-title/ https://jakesdemosite975920295.wordpress.com/2022/07/12/test.... Maybe you're using a custom theme that introduces buggy behaviour?

53 points by angelmm 4y ago

I think I'd rather put the aspect-ratio on the element that wraps the img. And then use object-fit on the img. Two reasons: - Allows for using the img tag sizes (and srcset) - When using sizes (w/ srcset) I don't have to worry if the image the browser picks from the srcset isn't the correct size and/or aspect ratio.

Vanderson 4y ago
I think you are agreeing with the article, but the details are different. I like how he distinguishes between specific use case, user generated content, or part of the site design. > So, which method should we use? > We've got one solution, aspect-ratio, which is CSS-based. And the other solution, presentational hinting, which uses width and height attributes. The question is very similar to "should this image be a <img> or a CSS background-image?" and the answer is the same: Is it content or design?
itsuka 4y ago
I also use the wrapper pattern for my recent projects, but the primary reason is for avoiding layout shifts (I didn't know a simpler solution exists until I read this article). The approach is quite different than what the article suggests: rather than setting a specific width and height on the img element, I simply set it to 100% for the wrapper and img elements (and the rest are the same as yours: I set aspect-ratio on the wrapper and object-fit on the img element).
- clairity 4y ago
  i really dislike wrapper patterns of any kind, as they add needless markup. sure, it's ok if used sparingly to paper over the inadequacies of current html/css, but it's often used excessively nowadays, just like tables in days past. the element itself, not a superfluous wrapper, should provide the parameters necessary (implicitly or explicitly) to specify layout and prevent layout shift. it sounds like the author takes an either-or approach to this, using either aspect-ratio (for design images) or height and width (for content images). having only skimmed, i haven't yet digested why hinting via attr(height) and attr(width) isn't the (future) preferred best-of-both-worlds, other than it not being supported yet ( https://caniuse.com/css3-attr https://caniuse.com/css3-attr ).
  - jaffathecake 4y ago
    The lack of support is the only reason, but that's a pretty big reason. Hopefully, in future, web devs will be able to add the same feature to things like iframes via attr(width number) - the number casting will still be necessary.
    - clairity 4y ago
      yah, i can’t wait for attr() to be fully supported. it’s going to both simplify css and reduce js reliance. i’m also really excited by :has() which i think will be the biggest improvement to css since grid. firefox has just started working on it, while safari and chrome already have an initial implementation in place.
  - chiefalchemist 4y ago
    Not a fan either. But when working with WordPress it takes extra work to ensure all the images in the srcset have the same aspect ratio. So the only way to ensure cover is object-fit. Note: this is also useful for background images in the sense totoo often the same large HD+ image is served to mobile devices.
- jaffathecake 4y ago
  Even if you set width and height attributes, you can still set the image to 100% width using CSS. That's how all the examples in the article work. You don't need a wrapper element.
jaffathecake 4y ago
The point in the article is you don't need that wrapper. Just add the width & height to the image, and give the image `height:auto`.
- chiefalchemist 4y ago
  And what about object-fit? Best I can tell, the article works if you are 100% certain that all the images in the srcset have the same aspect ratio. With, for example WordPress, that is often not the case.
  - jaffathecake 4y ago
    All images in the srcset are supposed to be the same aspect ratio. If WordPress is doing something different then it's a bad implementation. From https://html.spec.whatwg.org/multipage/images.html#introduction-3:viewport-based-selection-2 https://html.spec.whatwg.org/multipage/images.html#introduct... > The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image). If you want different representations of the content, those should be different <source>s. From https://html.spec.whatwg.org/multipage/images.html#introduction-3:art-direction-3 https://html.spec.whatwg.org/multipage/images.html#introduct... > The picture element and the source element, together with the media attribute, can be used to provide multiple images that vary the image content (for instance the smaller image might be a cropped version of the bigger image). More details on responsive images in general https://jakearchibald.com/2015/anatomy-of-responsive-images/ https://jakearchibald.com/2015/anatomy-of-responsive-images/.
    - jaffathecake 4y ago
      I just threw together a test page, and it seems like WordPress does the right thing https://jakesdemosite975920295.wordpress.com/2022/07/12/test-post-title/ https://jakesdemosite975920295.wordpress.com/2022/07/12/test.... Maybe you're using a custom theme that introduces buggy behaviour?