¿Debo especificar los atributos de alto y ancho para mis IMG en HTML?

Question

Si conozco el alto y el ancho de una imagen que voy a mostrar con una etiqueta de imagen, ¿debo incluir los atributos de alto y ancho, o simplemente poner la información en CSS? ¿O ambos?

Ej.

<img src="profilepic.jpg" height="64" width="64" /> 

o

<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" /> 

o

<img src="profilepic.jpg" style="height: 64px; width: 64px;" /> 

Answer 1

Según Google Page Speed, debe definir siempre el ancho y la altura de la etiqueta de imagen. Pero, para validar, no puede usar la etiqueta de estilo.

Además, siempre debe especificar el mismo alto y ancho que la imagen real para que el navegador no tenga que hacer ninguna modificación, como cambiar el tamaño.

yo sugeriría hacerlo

<img src="..." height="20" width="50"> 

---

Editar: Alguien sugirió en los comentarios que sería más rápido para no añadir ningún atributo. Según Google (no es el fin del conocimiento del navegador):

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 se requiere un reflujo y vuelve a pintar una vez que se descargan 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. - Read More

Teniendo en cuenta que, usted podría hacer las dimensiones IMG en CSS, pero para validar que tendría que hacerlo en un archivo CSS, no en línea.

BTW, Google Page Speed ​​es una serie de consejos enfocados en renderizar la página más rápido.

Answer 2

Sí, debe especificar las dimensiones, de modo que los agentes de usuario conozcan de antemano el tamaño antes de que la imagen se cargue por completo, por lo que un diseño no podría parecer roto si se basa en las dimensiones de la imagen cargada. Además, si confía en la propiedad de filtro de IE6 para insertar png's, necesitará esas dimensiones.

Answer 3

Siempre debe especificar height y width de una imagen para ayudar al navegador a colocar la página incluso antes de que se haya descargado la imagen.

Ver 13.7 Visual presentation of images, objects, and applets en la especificación HTML 4.01:

La altura y atributos de anchura dan agentes de usuario una idea del tamaño de una imagen u objeto para que puedan reservar espacio para ello y continuar renderizando el documento mientras espera para los datos de la imagen.

Son recomienda y no requiere pero que realmente, realmente debería especificarlos ;-)

También, por favor asegúrese de que las dimensiones que especifique en realidad coincide con las dimensiones de la imagen.

No hay nada peor que esperar a que se descargue una página porque esas imágenes 400x300 (!) Son en realidad más como 4000x3000 con un 95% de calidad.

Answer 4

Esta respuesta ahora es antigua y no recomendaría lo mismo que en 2009 con los navegadores modernos.

---

No importa cuál use, pero le recomendaría usar solo una.

Recomendaría el atributo sobre la solución CSS, ya que es más compatible con navegadores antiguos y personas con estilos desactivados.

Answer 5

Actualmente no es necesario que los especifique. De acuerdo con w3c specificatio n, los usa solo para anular los valores predeterminados que están incrustados en el archivo de imagen y que el navegador los lee. Cuando se use, escalará la imagen original a tamaños determinados, por lo que ponerlos es hacer un cálculo extra para el navegador.

Los atributos de alto y ancho dan a los agentes de usuario una idea del tamaño de una imagen u objeto para que puedan reservar espacio para ello y continúen representando el documento mientras esperan los datos de la imagen.

<img src="profilepic.jpg" alt="image" />