Especificando las dimensiones de la imagen en HTML vs CSS para la carga de la página

Question

He aprendido de algún lugar hace mucho tiempo que especificar el ancho y la altura para los elementos <img> en un documento HTML acelera y mejora la experiencia de carga de la página, y en general la práctica:

<img src="" width="100" height="100" /> 

ahora me encuentro ante una situación en la que tengo un gran número de imágenes en una sola página, y yo prefiero establecer las dimensiones a través de CSS, tanto para un control más fácil y menos repetitivas HTML código:

.whatever img {width: 100px; height: 100px;} 

Aunque este no es un tema muy serio, me pregunto si declarar las dimensiones en CSS tendrá los mismos beneficios que declarar las dimensiones en HTML, o si simplemente se debe hacer en HTML directamente.

Cualquier idea sería bienvenida.

Gracias

Answer 1

supongo que si la hoja de estilo está disponible de inmediato, las dimensiones de imagen se aplicarán inmediatamente a la disposición, que es el punto central del ejercicio.

Esa conjetura es compatible con Google's pagespeed rules. Parecen estar bien con la especificación de imágenes de esa manera (énfasis mío):

Especificar un ancho y alto para todas las imágenes permite una representación más rápida al eliminar la necesidad de reflujos y repintados innecesarios.

Cuando el navegador establece la página, necesita poder fluir alrededor de elementos reemplazables como imágenes. Puede comenzar a mostrar una página incluso antes de que se descarguen las imágenes, siempre que conozca las dimensiones para envolver los elementos no reemplazables. Si no se especifican dimensiones en el documento que lo contiene, o si las dimensiones especificadas no coinciden con las de las imágenes reales, el navegador requerirá un reflujo y volverá a pintar una vez que se descarguen las imágenes. Para evitar reflujos, especifique el ancho y alto de todas las imágenes, ya sea en la etiqueta HTML <img>, o en CSS.

Answer 2

La diferencia fundamental entre la definición de anchura y altura en un atributo (en oposición a en CSS) es que entonces se convierte en datos, no un parámetro de presentación. Solo imagine administrar una siguiente hoja de estilo

img[src='/images/tree.jpeg'] { 
    width: 100px; 
    height: 100px; 
} 

Esto innecesariamente enreda CSS con imágenes. También restringe el diseño adaptable, es decir, ya no puede tener imágenes cargadas que aún no ocupan el espacio correcto cuando se deduce una de sus dimensiones (por ejemplo, width: 100%).

Además, considere las reglas de CSS como object-fit. Puede surgir confusión sobre las propiedades de estilo width y heigth.