Si tienes un elemento <picture> con fuentes de imagen en diferentes relaciones de aspecto en diferentes puntos de interrupción, ¿cuál es la mejor manera de minimizar CLS utilizando las relaciones de aspecto y media queries en CSS?
Para <picture>, debería estar bien mientras cada imagen de <source> tenga la misma relación de aspecto en su fragmento de imagen receptiva:
<img width="1000" height="1000" src="puppy-1000.jpg" srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w" alt="Cachorro con globos"/>Para <picture> donde cada <source> tiene una relación de aspecto diferente, los navegadores esperan la estandarización de que se recomiende el ancho / alto para cada <source> para el caso de uso de la dirección de arte:
<picture> <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279"> <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300"> <img src="https://via.placeholder.com/1500x300" width="1500" height="300"> </picture>Mientras tanto, puede proporcionar height a través de trucos de CSS con padding-top, con diferentes media queries para cada punto de quiebre de <picture>.
El elemento de origen que admite atributos de dimensión ahora forma parte del estándar HTML - https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
La estandarización coincide con la implementación de ejemplo proporcionada por @addyo.
Para el caso de uso de dirección de arte de un <picture>, donde cada <source> tiene una relación de aspecto diferente, cada <source> puede proporcionar su propio valor de width y height.
<picture> <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279"> <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300"> <img src="https://via.placeholder.com/1500x300" width="1500" height="300"> </picture> La implementación para el soporte del navegador está en marcha y debería poder seguirse pronto en caniuse.