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

style html

Question

Aprendí 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, lo que mejora el tiempo de representación de la página.

¿Es esto cierto? Y si es así, ¿hay alguna diferencia en la especificación de 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 externo: #myImage { width: 200px; height: 200px; } #myImage { width: 200px; height: 200px; }

Answer 1

Creo que CSS te da más flexibilidad: puedes establecer específicamente el ancho o alto mientras configuras la otra dimensión en auto . Pero al establecer ambas dimensiones, no creo que haya una diferencia.

Answer 2

De acuerdo con Google Page Speed , realmente no importa si especifica las dimensiones a través de CSS o HTML, siempre que su CSS apunte a la etiqueta IMG en sí y no a un elemento principal:

Cuando el navegador despliega la página, debe poder fluir alrededor de elementos reemplazables como imágenes. Puede comenzar a representar una página incluso antes de que se descarguen las imágenes, siempre que conozca las dimensiones para envolver elementos no reemplazables. Si no se especifican las dimensiones en el documento que contiene, o si las dimensiones especificadas no coinciden con las de las imágenes reales, el navegador requerirá un reflujo y repintado 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 utilice las especificaciones de ancho y alto para escalar imágenes sobre la marcha. Si un archivo de imagen es en realidad 60 x 60 píxeles, no establezca las dimensiones en 30 x 30 en el HTML o CSS. Si la imagen necesita ser más pequeña, escántela en un editor de imágenes y establezca sus dimensiones para que coincidan (consulte Optimizar imágenes para obtener más detalles).

Answer 3

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

Answer 4

Si coloca una imagen grande en una página HTML sin dimensiones, definitivamente debería 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 es local).

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

Answer 5

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

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