Especificar dimensiones de imagen para mejorar el rendimiento del navegador

Recientemente realicé una auditoría en mi sitio web usando las Herramientas para desarrolladores de Google. Todas mis imágenes son del mismo tamaño (500 horizontales por 300 píxeles verticales), así que pensé que sería mejor si omitiera los atributos de tamaño de la imagen, ya que no habría necesidad de calcular un tamaño de imagen cuando ya es el tamaño correcto.

En Utilización de redes, especifique las dimensiones de la imagen. Veo lo siguiente

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Ahora estoy confundido. ¿Debo realmente agregar atributos de ancho y alto a mis imágenes, aunque ya tengan el tamaño correcto? Parece redundante

Los navegadores descargan datos en paralelo e intentan comenzar a procesar la página lo antes posible.

Si no especifica el tamaño, el navegador no tiene idea de cuán grande será la imagen hasta que la descarga de la imagen se haya completado por completo.

Este retraso obliga al navegador a volver a pintar o redistribuir el diseño, lo que retrasa el tiempo de carga de la página.

Cuantas más imágenes tengan este problema, más lenta se cargará la página.

Si especifica los tamaños de imagen, ya sea en HTML o CSS, el navegador puede evitar repintar y refluir el contenido.

Debido a esto, siempre debe especificar los tamaños de imagen. Google tiene algunos consejos sobre esto.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Para obtener más información sobre el proceso de representación del navegador, consulte: http://taligarsiel.com/Projects/howbrowserswork1.htm

No estoy seguro de qué tan actualizado está esto, pero brinda información sobre cómo funcionan los navegadores y por qué es posible que desee hacer cosas como no usar CSS en línea para anular las hojas de estilo.

El diseño receptivo normalmente no utiliza ningún atributo de ancho o alto

Las Herramientas de desarrollo de Google son una guía y no debería necesitar hacer cumplir todo lo que lee en su sitio, de hecho, algunas de las cosas están desactualizadas. La mayoría de los sitios web receptivos no usan widtho heightporque quieren que las imágenes se adapten al tamaño de la pantalla y al usar un ancho y una altura fijos, <img>lo que amortiguaría la experiencia del usuario y Google ha declarado que este es uno de los factores más importantes.

Solución de CSS

Puede optar por usar un elemento de nivel de bloque que tenga el ancho y la altura, personalmente no usaría uno, pero esto es lo que Google dice sobre el nivel de bloque.

Asegúrese de especificar dimensiones en el elemento de imagen o en el elemento primario de nivel de bloque Asegúrese de establecer las dimensiones en el elemento mismo o en un elemento primario de nivel de bloque. Si el padre no está a nivel de bloque, las dimensiones serán ignoradas. No establezca dimensiones en un antepasado que no sea un padre inmediato.

Me imagino que esto se vería así:

Diseño estático .ic {width:500px;height:500px;}

Diseño de respuesta:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Luego, necesitaría usar JavaScript u otra solución para detectar el punto de vista y servir 4 versiones diferentes de la imagen, lo que nuevamente es poco práctico. Entonces, si está utilizando un diseño receptivo, entonces seguiría adelante con seguridad y no me molestaría en agregar ancho y alto para que su sitio web sea fluido, sin importar qué pantalla lo vea.

Acabo de responder una pregunta similar en Wordpress Stack Exchange. Vuelva a colocarlo aquí (administradores / moderadores: si esto no está permitido, avíseme la forma correcta de ayudar).

en realidad no significa que deba especificar el ancho y el alto en el html. Lo que significa es que debe reservar el espacio adecuado y cuando se carga la imagen, el navegador no tiene que volver a fluir y volver a pintar la página.

Además, si codifica las dimensiones, derrota el comportamiento receptivo. Si su diseño no responde, está bien, pero si desea mantener cierta capacidad de respuesta, puede usar solo CSS para lograr los resultados.

La mayoría de las veces, usar tanto el ancho como max-width:100el trabajo, pero esta publicación de Smashing Magazine tiene una técnica interesante: en lugar de usar max-width: 100%, puedes usar The Padding-Bottom Hack :

"Con la técnica, definimos la altura como una medida relativa al ancho. El relleno y el margen tienen propiedades intrínsecas, y podemos usarlos para crear relaciones de aspecto para elementos que no tienen ningún contenido. Porque el relleno tiene esta capacidad , podemos establecer padding-bottom para que sea relativo al ancho de un elemento. Si también establecemos la altura en 0, obtendremos lo que queremos. [...]

El siguiente paso es colocar una imagen dentro del contenedor y asegurarse de que llena el contenedor. Para hacer esto, necesitamos colocar la imagen absolutamente dentro del contenedor, así: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

El proceso es algo como esto:

1. leer el archivo .html
2. desde el encabezado del archivo .html, lea .css, archivos .js (.js debe estar DESPUÉS de .css ...)
3. leer img y script de la página

Por lo tanto, las etiquetas de imagen se leen "tarde". Sin embargo, para calcular el formato de su página, tener el tamaño de la imagen es algo bueno (de lo contrario, los navegadores usan un tamaño "aleatorio" como 1x1, 25x25, ... lo que el navegador haya programado).

Entonces, para evitar tener una página que parece rota hasta que se leen las imágenes, poner los atributos de ancho y alto permite al navegador calcular el diseño de página adecuado de inmediato. Es por eso que es una buena idea tenerlos allí, incluso si son del mismo tamaño.