tamaño - ¿Sigue siendo relevante especificar el atributo width y heigth en las imágenes en HTML?

mostrar imagen en html (7)

Encontré una pregunta similar aquí , con la respuesta: " siempre debe definir el ancho y el alto en la etiqueta de la imagen ". Pero es de 2009.

Mientras tanto, muchas cosas han cambiado en frontend. Todos estamos haciendo un diseño de página sensible ahora, para muchos dispositivos y tamaños simultáneamente (móvil, tableta, escritorio ...).

Por lo tanto, me pregunto si todavía es necesario especificar los atributos de ancho y alto en 2016, y por qué motivo (para la velocidad de la página sensible, de la página ...)?

Los buenos estándares siempre merecen una recomendación. Con un poco de código adicional, es bastante fácil fusionar los valores estáticos (px) de la etiqueta img y los valores genéricos (em,%) suministrados por CSS. Y aún más simple, deshazte de la etiqueta img por completo y establece la imagen como fondo de un div con una ID única. Si tiene varias imágenes, use sprites y asigne cada imagen a su div correspondiente. Sus fuentes de margen se verían así como <div id="image_001"></div> - eso es todo. Escala todo por sí mismo; no es necesario bloatware como JQuery, etc.

Un elemento img tiene atributos de ancho y alto, pero no son necesarios en ningún DOCTYPE .

Los atributos de ancho y alto solo fueron ''necesarios'' o relevantes para reservar el espacio en la página y evitar que la página se mueva mientras se carga, lo cual es importante. Esto se puede lograr utilizando CSS en lugar de proporcionar las cargas de CSS lo suficientemente rápido; es probable que se cargue antes de las imágenes de todos modos, por lo que todo debería ser bueno.

También es posible (y válido) especificar solo un atributo, ancho o alto y el navegador calculará el valor omitido para mantener la relación de aspecto correcta.

Puede especificar valores porcentuales en los atributos si es necesario. No necesita usar CSS para esto, si eso es lo que está implicando.

Además, es relevante agregar: en HTML5, el ancho y el alto solo pueden tomar un valor de píxel, en otras palabras, un entero válido no negativo.

Si usa los atributos de ancho y alto puede depender de su diseño. Si tiene muchas imágenes de diferentes tamaños, ¿desea agrupar todas las dimensiones en el CSS o incluirlas con el img?

Si hablamos de respuesta, puede usar bootstrap (si no, empiece a hacer esto). Cuando trabaje con imágenes, debe agregar la clase img-responsive, esto modificará el ancho de la imagen si es necesario y la altura será automática, por lo que si el ancho disminuye, la altura también disminuirá.

Siempre tendrá una imagen que conserva el mismo% de su contenedor y nunca perderá la relación de aspecto.

No hay relación con las declaraciones de tamaño de imagen y SEO. La velocidad de la página será la misma siempre, por lo que si la imagen es de 800 x 600 px, cargará la imagen completa, incluso si la declara como de 60 x 40 px.

Debe pensar que, incluso utilizando img-responsive, el ancho y alto máximos de esta imagen será el tamaño real de la imagen. Entonces, si tenemos una imagen de 800 x 600 px, no la ampliará (porque perderá calidad).

Por lo tanto, en 2016, es recomendable NO declarar el alto y el ancho de una imagen. En su lugar, utilice la clase img-responsive de bootstrap, otra clase de framework sensible que obtenga el mismo resultado, o el jquery y css adecuados para alcanzar la misma.

¡Espero eso ayude!

Bueno, la respuesta básica a esta pregunta (como con la mayoría de los problemas de codificación) es esta: depende de la situación en cuestión.

Diría que la "mejor práctica" de especificar siempre los atributos de height y width de las imágenes que marcan una diferencia significativa en la velocidad de representación de la página se remonta a los días en que los diseñadores presentaban sus sitios web utilizando tablas y GIF espaciadores. Hemos recorrido un largo camino desde entonces.

Una indicación para el futuro es la introducción del nuevo elemento de picture redactado en HTML. El elemento de picture es efectivamente un envoltorio para el elemento img existente, que le permite especificar varias imágenes de diferentes tamaños a través de un elemento de source , y el agente de usuario mismo realmente determina qué versión se utiliza.

<picture> <source media="(min-width: 64em)" src="high-res.jpg"> <source media="(min-width: 37.5em)" src="med-res.jpg"> <source src="low-res.jpg"> <img src="fallback.jpg" alt="This picture loads on non-supporting browsers."> <p>Accessible text.</p> </picture>

Como puede ver en este ejemplo de código anterior (tomado del artículo de Intel Developer Zone sobre el elemento de picture HTML5 ), no hay atributos de height o width en el elemento img .

Aquí hay una selección de recursos que lo ayudarán a decidir el método más apropiado para declarar tamaños de imagen:

SÍ, quiere declarar el ancho y el alto de una imagen en 2016.

Para hacerlos listos para la retina

Si desea que su imagen esté lista para la retina, debe definir un ancho y una altura inferiores a los píxeles reales. Si la imagen es de 800x600, especifique <img width="400" height="300" /> .

Para evitar el salto de página

Sin el ancho ni la altura, la imagen no sabe qué tan grande es, lo que provoca un salto no deseado en la página a medida que se carga (vuelve a fluir). Declarar alto y ancho resuelve este problema.

Tenga en cuenta que:

Las imágenes con un ancho y una altura definidos aún pueden responder. Simplemente agregue max-width y max-height a su CSS. Esto causará que la imagen se incline hacia abajo (no hacia arriba) cuando no se ajusta a la pantalla ( vea este gatito dulce sensible a la retina ). Definir un min-width y min-height hará lo contrario.
Se recomienda agregar una gran cantidad de compresión a su JPG (alrededor del 50%) para mantener el tamaño del archivo bajo cuando usa una sola imagen (relativa grande) para todos los tamaños de pantalla.

Sí , todavía es relevante especificar el atributo de ancho y alto en las imágenes en HTML.

Las imágenes suelen tardar más en cargarse que el código HTML que compone el resto de la página. Por lo tanto, es una buena idea especificar el tamaño de la imagen para que el navegador pueda representar el resto del texto en la página y dejar la cantidad correcta de espacio para la imagen que aún se está cargando.

Por lo tanto, especificar el atributo de ancho y alto en la imagen mejorará el rendimiento de la página web al proteger contra el retraso en la carga.

Depende de si su imagen es de contenido o diseño.

Las imágenes de contenido siempre deben tener atributos de ancho y alto. Supongamos que tiene una imagen muy estrecha, pero alta en una resolución muy alta, pero con una compresión JPG muy alta y con letras en ella. Esta imagen podría ser una ilustración de una invitación que se ha enviado. En este caso, la imagen está contenida y la altura de esta imagen es 100% específica de la imagen (a diferencia del diseño específico). Debe establecer los atributos de ancho y alto en esta imagen por razones de usabilidad. Cuando su contenido se mueve a otro sitio web o el tema cambia, no desea que se rompa. El ancho y el alto de la imagen son parte del contenido y, por lo tanto, deben declararse en los atributos del contenido / imagen. Tenga en cuenta que las imágenes con ancho y alto establecidas en sus atributos aún pueden hacerse fácilmente receptivas, usando CSS.

Las imágenes de diseño no deben tener atributos de ancho y alto. Si las imágenes no se usan en línea, como separadores, ilustraciones de encabezado, iconos o para otros propósitos de diseño, su diseño pertenece al tema / al CSS. Si el estilo de sus sitios web cambia, quiere poder cambiar esto con un simple ajuste de CSS.