[HN Gopher] Avoiding image layout shifts (CLS): aspect-ratio vs....
       ___________________________________________________________________
        
       Avoiding image layout shifts (CLS): aspect-ratio vs. width and
       height
        
       Author : angelmm
       Score  : 22 points
       Date   : 2022-07-11 19:26 UTC (3 hours ago)
        
 (HTM) web link (jakearchibald.com)
 (TXT) w3m dump (jakearchibald.com)
        
       | chiefalchemist wrote:
       | 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.
        
         | itsuka wrote:
         | I also use the wrapper pattern for my recent projects, but the
         | primary reason is for avoiding layout shifts. 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).
        
         | Vanderson wrote:
         | 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?
        
       ___________________________________________________________________
       (page generated 2022-07-11 23:01 UTC)