¿Debería definirse el tamaño de la imagen en los atributos de altura/ancho de la etiqueta img o en CSS?

Question

¿Es mejor la práctica de codificación definir un tamaño de imagen en los atributos img de la etiqueta width y height?

<img src="images/academia_vs_business.png" width="740" height="382" alt="" /> 

¿O en el estilo de CSS con anchura/altura?

<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" /> 

¿O ambos?

<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" /> 

Answer 1

Voy a ir contra la corriente aquí y afirmar que el principio de separar el contenido del diseño (que justificaría las respuestas que sugieren usar CSS) no siempre se aplica a la altura y el ancho de la imagen.

Cada imagen tiene un alto y ancho original innato que se puede derivar de los datos de la imagen. En el marco del diseño de contenido vs., diría que esta información derivada de altura y ancho es contenido, no diseño, y por lo tanto debe representarse como HTML como atributos de elementos.

Esto es muy similar al texto alt, que también puede decirse que se deriva de la imagen. Esto también respalda la idea de que un agente de usuario arbitrario (por ejemplo, un navegador de voz) debería tener esa información para relacionarla con el usuario. Como mínimo, la relación de aspecto podría ser útil ("la imagen tiene un ancho de 15 y una altura de 200"). Dichos agentes de usuario no necesariamente procesarían ningún CSS.

La especificación dice que los atributos width y height también se pueden usar para anular la altura y el ancho transportados en el archivo de imagen real. No estoy sugiriendo que se usen para esto. Para anular la altura y el ancho, creo que CSS (en línea, incrustado o externo) es el mejor enfoque.

Por lo tanto, dependiendo de lo que quiera hacer, debe especificar una y/o la otra. Creo que, idealmente, la altura y el ancho originales siempre se especificarían como atributos del elemento HTML, mientras que la información de estilo debería transmitirse opcionalmente en CSS.

Answer 2

Definitivamente no ambos. Aparte de eso, tendría que decir que es una preferencia personal. Usaría css si tuviera muchas imágenes del mismo tamaño para reducir el código.

.my_images img {width: 20px; height:20px} 

En el CSS a largo plazo puede ganar debido a HTML desaprobación atributo y es más probable debido al crecimiento de los formatos de imagen vectorial como SVG en que incluso se puede tener sentido para reducir las imágenes usando unidades no basadas en píxeles como% o em.

Answer 3

<img id="uxcMyImageId" src"myImage" width="100" height="100" /> 

especificando anchura y altura en la etiqueta de la imagen es una buena manera practice..this cuando se carga la página hay espacio asignado para la imagen y el diseño no sufre sacudidas, incluso si la imagen tarda mucho tiempo cargar.

Answer 4

Aunque está bien usar estilos en línea, sus propósitos se atenderán mejor si incluye un archivo CSS externo en la página. De esta forma, podría definir una clase de imagen (es decir, 'Miniatura', 'Foto', 'Grande', etc.) y asignarle un tamaño constante. Esto ayudará cuando termine con imágenes que requieren la misma ubicación en varias páginas.

De esta manera:

 
In your header: 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 

Your HTML: 
<img class="thumbnail" src="images/academia_vs_business.png" alt="" /> 

In css/style.css: 
img.thumbnail { 
    width: 75px; 
    height: 75px; 
} 

Si desea utilizar los estilos en línea, sin embargo, es probablemente la mejor manera de establecer la anchura y la altura utilizando el atributo de estilo para facilitar la lectura.

Answer 5

La razón histórica para definir alto/ancho en las etiquetas es para que los navegadores puedan ajustar el tamaño de los elementos <img> reales en la página incluso antes de que se carguen los recursos CSS y/o de imagen. Si no proporciona el alto y el ancho explícitamente, el elemento <img> se representará en 0x0 hasta que el navegador pueda dimensionarlo según el archivo. Cuando esto sucede, provoca un reflujo visual de la página una vez que se carga la imagen, y se agrava si tiene múltiples imágenes en la página. El tamaño del <img> a través de la altura/ancho crea un marcador de posición físico en el flujo de la página con el tamaño correcto, lo que permite que su contenido se cargue de manera asincrónica sin interrumpir la experiencia del usuario.

Alternativamente, si usted está haciendo el diseño móvil que responde, que es una buena práctica en estos días, es bastante común para especificar una anchura (o ancho máximo) única y definir la altura que auto. De esta forma, cuando defina consultas multimedia (por ejemplo, CSS) para diferentes anchos de pantalla, puede simplemente ajustar el ancho de la imagen y dejar que el navegador trate de mantener la relación altura/aspecto de la imagen correcta. Este es un enfoque intermedio, ya que puede obtener un poco de reflujo, pero le permite admitir una amplia gama de tamaños de pantalla, por lo que el beneficio normalmente supera el negativo.

Finalmente, hay momentos en los que no puede conocer el tamaño de la imagen (la imagen src puede cargarse dinámicamente o puede cambiar durante la vida de la página mediante script), en cuyo caso usar CSS solo tiene sentido.

La conclusión es que debe comprender las ventajas y desventajas y decidir qué estrategia tiene más sentido para lo que está tratando de lograr.

Answer 6

Opción a. fwd recta simple. Lo que ves es lo que obtienes para hacer cálculos fácilmente.

Opción b. Demasiado complicado para hacer esto en línea a menos que desee tener un sitio que se pueda estirar. IE si usaste el with:86em, sin embargo, los navegadores modernos parecen manejar esto funcionalmente de manera adecuada para mis propósitos ... Personalmente, la única vez que usaría algo como esto es si tuviera que crear un catálogo de miniaturas.

/*css*/ 
ul.myThumbs{} 
ul.myThumbs li {float:left; width:50px;} 
ul.myThumbs li img{width:50px; height:50px;border:0;} 

<!--html--> 
<ul><li> 
<img src="~/img/products/thumbs/productid.jpg" alt="" /> 
</li></ul> 

Opción c. Demasiado complicado para mantener.

Answer 7

Estoy usando contentEditable para permitir la edición de texto enriquecido en mi aplicación. No sé cómo se desliza a través de, pero cuando se inserta una imagen, y luego cambiar de tamaño (arrastrando los anclajes en su lado), genera algo como esto:

<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/> 

(posterior ensayo muestra que inserta imágenes no contenía este estilo "pícaro" attr + param).

Cuando se procesa con el navegador (IE7), el ancho y la altura del estilo anulan el parámetro ancho/alto de img (para que la imagen se muestre como yo lo desee ... cambié de tamaño a 55px x 55px). Todo salió bien por lo que parece.

Cuando llevo la página a un documento de ms-word configurando el mime tipo application/msword o pegando el renderizado del navegador en el documento msword, todas las imágenes vuelven a su tamaño predeterminado. Finalmente descubrí esa msword descarta el estilo y usa la etiqueta de ancho y altura de img (que tiene el valor del tamaño de la imagen original).

Me tomó un tiempo para fundar esto. De todos modos ... he codificado una función de JavaScript para atravesar todas las etiquetas y "transferir" los valores de img style.width y style.height a img.width y img.height, y luego borrar ambos valores en estilo, antes de continuar guardando esta pieza de datos html/richtext en la base de datos.

aplausos.

Opps .. .. mi respuesta es no. deje ambos atributos directamente debajo de img, en lugar de estilo.