Dónde especificar las dimensiones de la imagen para una representación más rápida: ¿en HTML o en CSS?

Question

He aprendido que es una buena práctica especificar explícitamente las dimensiones de la imagen. El navegador ya puede diseñar la página mientras sigue descargando las imágenes, mejorando así (percibido) el tiempo de renderización de la página.

¿Es esto cierto? Y si es así, ¿existe alguna diferencia al especificar las dimensiones en HTML o CSS?

• HTML: <img src="" width="200" height="100">
• CSS en línea: <img src="" style="width: 200px; height: 100px">
• CSS externa: #myImage { width: 200px; height: 200px; }

Answer 1

Según Google Page Speed, que en realidad no importa si especifica las dimensiones a través de CSS o HTML, siempre y cuando su CSS apunta a la etiqueta IMG sí mismo y no un elemento principal:

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 el alto de todas las imágenes, ya sea en la etiqueta HTML o en CSS.

Sin embargo, tenga en cuenta que aconsejan no cambiar el tamaño de la imagen utilizando estas dimensiones, es decir, utilizar siempre las dimensiones reales:

No utilizar especificaciones de anchura y altura para reducir las imágenes sobre la marcha. Si un archivo de imagen es realmente de 60 x 60 píxeles, no configure las dimensiones a 30 x 30 en HTML o CSS. Si la imagen debe ser más pequeña, mézclela en un editor de imágenes y configure sus dimensiones para que coincidan (consulte Optimizar imágenes para obtener más información.)

Answer 2

Creo CSS le da más flexibilidad: puede establecer específicamente la anchura o altura, mientras que el establecimiento de la otra dimensión a auto. Pero al establecer ambas dimensiones, no creo que haya una diferencia.

Answer 3

Tiendo a hacerlo en el CSS. Esto es ciertamente una ganancia cuando hay varias imágenes con las mismas dimensiones (por lo que puede hacer cosas como .comment img.usergroup { width: 16px; height: 16px; }), y tienen las mismas imágenes sujetas a escala en diferentes hojas de estilo, como los temas seleccionables por el usuario.

Cuando tiene imágenes completamente independientes que se usan en el sitio solo una vez, no tiene sentido abstraer su tamaño a CSS, por lo que la versión HTML probablemente sería más apropiada allí.

Answer 4

Si coloca una imagen grande en una página HTML sin dimensiones, debe notar que el diseño de la página cambia a medida que se descarga la imagen (a través de una conexión a Internet, si no localmente).

Según otras respuestas, no hace mucha diferencia si lo hace en HTML o CSS.

Answer 5

Esto no responde su pregunta directamente, pero no confiaría en las dimensiones de su imagen para el diseño de página. En su lugar, incluya la imagen en un elemento de nivel de bloque. Esto alivia tanto el HTML como el CSS de tener que contener información que realmente no debería, ya que la imagen puede cambiar de vez en cuando.