La etiqueta HTML `img`

Descubra los conceptos básicos para trabajar con imágenes y HTMLimgetiqueta y cómo hacer que respondan

Las imágenes se pueden mostrar con elimgetiqueta.

Esta etiqueta acepta unsrcatributo, que usamos para establecer la fuente de la imagen:

<img src="image.png" />

Podemos utilizar un amplio conjunto de imágenes. Los más comunes son PNG, JPEG, GIF, SVG y más recientemente WebP.

El estándar HTML requiere unaltatributo para estar presente, para describir la imagen. Esto lo utilizan los lectores de pantalla y también los robots de los motores de búsqueda:

<img src="dog.png" alt="A picture of a dog" />

Puede configurar elwidthyheightatributos para establecer el espacio que ocupará el elemento, de modo que el navegador pueda dar cuenta de él y no cambie el diseño cuando esté completamente cargado. Toma un valor numérico, expresado en píxeles.

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

Imágenes receptivas usandosrcset

lossrcsetEl atributo le permite configurar imágenes receptivas que el navegador puede usar según la densidad de píxeles o el ancho de la ventana, de acuerdo con sus preferencias. De esta forma solo puede descargar los recursos que necesita para renderizar la página, sin descargar una imagen más grande si está en un dispositivo móvil, por ejemplo.

Aquí hay un ejemplo, donde damos 4 imágenes adicionales para 4 tamaños de pantalla diferentes:

<img src="dog.png"
	alt="A picture of a dog"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

En elsrcsetusamos elwmedir para indicar el ancho de la ventana.

Dado que lo hacemos, también necesitamos utilizar elsizesatributo:

<img src="dog.png"
	alt="A picture of a dog"
	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

En este ejemplo el(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxcuerda en elsizesEl atributo describe el tamaño de la imagen en relación con la ventana gráfica, con varias condiciones separadas por una coma.

La condición de los mediosmax-width: 500pxestablece el tamaño de la imagen en correlación con el ancho de la ventana gráfica. En resumen, si el tamaño de la ventana es <500px, representa la imagen al 100% del tamaño de la ventana.

Si el tamaño de la ventana es mayor pero <900px, renderiza la imagen al 50% del tamaño de la ventana.

Y si es aún más grande, renderiza la imagen a 800 px.

losvw unit of measure can be new to you, and in short we can say that 1 vwes el 1% del ancho de la ventana, por lo que100vwes el 100% del ancho de la ventana.

Un sitio web útil para generarsrcsete imágenes progresivamente más pequeñashttps://responsivebreakpoints.com/.

Descarga mi gratisManual HTML


Más tutoriales de HTML:


Tech Wiki en línea!