Note from 9 December 2021

Looks like @archdigestindia could improve #WebPerf for their readers and reduce bandwidth invoices…

  1. the photo is 564.5px wide
  2. but the sizes says the image is full width
  3. so the browser downloads an image 414 % bigger

An image much bigger than necessary on Architectural Digest India

  1. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?