tamaño - ¿Debo especificar los atributos de alto y ancho para mis IMG en HTML?
mostrar imagen en html (5)
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?
Ex.
<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;" />
De acuerdo con Google Page Speed , siempre debe definir el ancho y el alto en la etiqueta de la 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 realizar ninguna modificación, como cambiar el tamaño.
Sugeriría hacerlo
<img src="..." height="20" width="50">
Editar: Alguien sugirió en los comentarios que sería más rápido simplemente no agregar ningún atributo. Según Google (no es que sean el final de todo el 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 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. - Leer más
Dado que, puedes hacer las dimensiones img en CSS, pero para validar debes hacerlo en un archivo CSS, no en línea.
Por cierto, Google Page Speed es una serie de consejos enfocados en renderizar la página más rápido.
En realidad, no tienes que especificarlos. De acuerdo con la especificación w3c, 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 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" />
Esta respuesta ahora es anticuada y no recomendaría lo mismo que hice en 2009 con los navegadores modernos.
En realidad, no importa cuál uses, pero recomendaría usar solo uno.
Recomendaría el atributo sobre la solución CSS, ya que es más compatible con navegadores más antiguos y personas con estilos desactivados.
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, de modo 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, necesitará esas dimensiones.
Siempre debe especificar la height y el width de una imagen para ayudar al navegador a colocar la página incluso antes de que la imagen se haya descargado.
Consulte 13.7 Presentación visual de imágenes, objetos y applets en la especificación de HTML 4.01:
Los atributos 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.
Son recomendados y no obligatorios, pero usted realmente debería especificarlos ;-)
Además, asegúrese de que las dimensiones que especifique realmente coincidan con las dimensiones de la imagen.
No hay nada peor que esperar que se descargue una página simplemente porque esas 400x300 (!) Son en realidad más parecidas a 4000x3000 con un 95% de calidad.