La etiqueta HTML <img>

Antes de colocar una imagen en una página web debemos preguntarnos y tener claro cuál es el objetivo de dicha imagen en nuestro sitio web. Las imágenes utilizadas en una página web pueden ser de dos tipos:

• Imágenes que pretenden mostrarse como parte del contenido de la web.
• Imágenes que se muestran como parte de decoración de la web.

En el primer caso, si la imagen pertenece al contenido y tema tratado en esa página, sería conveniente incluirla mediante la etiqueta HTML <img>. Un ejemplo muy sencillo sería el siguiente:

<img src="https://lenguajehtml.com/assets/logo.png" alt="Logo de HTML5">

Si por el contrario, la imagen pertenece a la decoración de la página, sería más conveniente incluirla como un fondo mediante la propiedad CSS background-image.

Atributos principales

Como hemos mencionado, para incluir imágenes en el contenido de una página utilizaremos la etiqueta <img>. Se trata de una etiqueta muy sencilla, que como hemos visto, necesita al menos incluir obligatoriamente los atributos src y alt.

Veamos que atributos pueden ser utilizados en esta etiqueta:

Atributo	Descripción
src	Indica el nombre o la URL de la imagen a mostrar. Atributo obligatorio.
alt	Establece un texto alternativo que describa la imagen a mostrar. Atributo obligatorio.
width	Indica el ancho de la imagen en píxels (sin la unidad). Se puede hacer desde CSS.
height	Indica el alto de la imagen en píxels (sin la unidad). Se puede hacer desde CSS.

El atributo src

El atributo src sirve para indicar la dirección o URL de una imagen, ya sea mediante una ruta relativa o absoluta. El navegador descargará esa imagen y la mostrará en el lugar donde se indica en el documento HTML. Este atributo es obligatorio y debe ser indicado siempre en una etiqueta <img>.

La imagen puede estar en varios formatos diferentes, dependiendo del soporte del navegador, como por ejemplo .jpg, .png, .gif u otros que comentaremos un poco más adelante.

El atributo alt

El atributo alt sirve para indicar un texto alternativo a la imagen, que se mostrará en el caso que la imagen no pueda ser mostrada o descargada. Este atributo también es obligatorio en la etiqueta <img>, por lo que siempre debe ser utilizado.

Este atributo es muy importante en aspectos de accesibilidad, ya que en el caso de que estemos leyendo una página web con un lector de voz para invidentes, la imagen no podrá ser leída, por lo que leerá el texto alternativo.

Los atributos width y height

Aunque estos atributos no son obligatorios como los anteriores, es posible indicar los atributos width y height en la etiqueta <img> con valores numéricos (que se interpretarán como píxels) o porcentajes. De indicar sólo uno de estos atributos, los navegadores actuales adaptarán el otro para respetar la proporción de la imagen.

<img src="https://lenguajehtml.com/assets/logo.png"
     alt="Logo de HTML5" width="400" height="453" />

Aunque pueda parecer lo contrario, indicar los atributos width y height en una etiqueta <img> se considera una buena práctica, ya que se fuerza a reservar el espacio necesario incluso antes de la descarga. Ten en cuenta que la imagen tendrá unas dimensiones específicas que el navegador desconoce hasta que es descargada y procesada, por lo que durante ese tiempo las dimensiones serán 0 si no se indican y provocarán un molesto comportamiento de cambio de tamaño al ser cargada.

Formatos de imágenes

En el ámbito informático existen múltiples formatos de imágenes (¡muchísimos!) pero no todos son aptos o adecuados para utilizar en web. Demos un repaso a los formatos más utilizados y apropiados para sitios webs:

Formato	Características	¿Recomendado?
Formatos tradicionales
PNG	Soporta transparencia. Compresión sin pérdidas. Imágenes «lisas».	✅
JPG	Compresión con pérdidas. Ideal para imágenes con texturas.	✅
SVG	Formato vectorial. Ideal para imágenes escalables.	✅
GIF	Imágenes pequeñas. Soporta animación. Pesado. Poca calidad.	⚠️ Evitar. Usar MP4 o APNG.
Formatos modernos
WEBP	Alternativa libre de Google al JPEG, PNG y GIF. Transparencias y animaciones.	✅ Buen soporte
JPEG2000	Formato evolución de JPEG. Poco utilizado.	❌ Solo Safari
JPEG-XR	Alternativa libre de Microsoft al JPEG. Poco utilizado.	❌ Solo IE
APNG	Alternativa libre a GIF. Compatible con PNG. Soporta animaciones.	✅ Buen soporte
Formatos de nueva generación
AVIF	Formato de imagen basado en AV1. No confundir con videos AVI.	⚠️ Con precaución
JPEG-XL	Alternativa competidora a AVIF. Evolución moderna de JPEG.	⚠️ Aún poco soporte

Cualquier otro formato no mostrado en esta lista no está recomendado para utilizar en web. Formatos como BMP, TIFF, RAW, NEF, PSD, CDR son formatos no orientados para su uso en la web, además de ser propietarios y muy pesados. Asegúrate utilizar uno de los recomendados de la tabla anterior.

Algunos formatos no recomendados en la tabla superior pueden utilizarse hoy si se utiliza un enfoque progresivo con fallbacks, utilizando la etiqueta HTML <picture>, de modo que si el navegador no lo soporta, intenta con otro formato. Lo explicaremos en el próximo artículo.

Carga de imágenes

En muchos casos, podríamos tener una página que está repleta de imágenes que deben descargarse y que, por lo tanto, ralentizarán la página y harán que la experiencia de usuarios sea peor. Existen ciertos atributos que tienen que ver con el rendimiento a la hora de cargar imágenes y mediante las cuales podemos ajustar la forma en que se van a procesar y descargar las imágenes de las etiquetas <img>.

Son los siguientes atributos:

Atributo	Descripción
loading	Indica si el navegador debe descargar inmediatamente la imagen o posponer la descarga.
decoding	Indica como y cuando debe procesar el navegador las imágenes para mostrarlas.
fetchpriority	Indica la prioridad que va a tener la descarga del recurso de imagen.

El atributo loading

El atributo loading es un atributo mediante el cuál podemos hacer Lazy Loading en imágenes. El término lazy loading (carga perezosa) se refiere a que podemos posponer la descarga de ciertas imágenes, para que el navegador le de prioridad a otras que son más importantes.

Se suele utilizar en páginas donde hay muchas imágenes que no están inicialmente en la región visible del navegador del usuario y, puede ser probable que nunca lo lleguen a estar, ya sea porque el usuario no llega hasta esa parte de la página o porque requiere una acción específica para que se muestren, por lo que no tiene sentido gastar recursos en descargarla si el usuario no la va a ver.

Los valores que se pueden indicar en este atributo son los siguientes:

Valor	Descripción
eager	Valor por defecto. El navegador descarga inmediatamente la imagen.
lazy	El navegador pospone la descarga de este recurso hasta que sea necesario.

Algunos navegadores permiten hacer lazy loading mediante el atributo loading en etiquetas <iframe>, y no sólo en etiquetas de imagen <img>.

El atributo fetchpriority

Mediante el atributo fetchpriority podemos establecer la prioridad con la que se descargará la imagen. Esto es útil para refinar el rendimiento de una página y darle prioridad a elementos que visualmente son muy importantes en el primer impacto visual de carga de la página, e incluso pueden ayudar para mejorar las Core Web Vitals (métricas de Google para determinar la velocidad de carga de una página).

Este atributo puede tomar los siguientes valores:

Valor	Descripción
auto	Valor por defecto. El navegador establece automáticamente la prioridad.
high	Se establece una prioridad alta para este elemento.
low	Se establece una prioridad baja para este elemento.

El atributo decoding

El atributo decoding permite indicarle al navegador como debe hacer el proceso de decodificación de la imagen, esto es, convertir los datos de la imagen en un formato más apto para representarlo visualmente en el navegador. Este proceso puede tardar tiempo, por lo que podemos modificar como actua el navegador para mejorar el rendimiento.

Los valores que puede tomar son los siguientes:

Valor	Descripción
auto	Valor por defecto. El navegador decidirá cómo y cuando decodificar la imagen.
sync	El navegador se centrará en decodificar esta imagen antes de pasar a otras.
async	El navegador se centrará en decodificar otras imágenes antes de esta.

Múltiples imágenes

En algunas ocasiones nos podría interesar indicar al navegador que debe descargarse una imagen concreta si el dispositivo tiene una cierta resolución (por ejemplo, dispositivo móvil), pero en el caso de ser un dispositivo de alta resolución (por ejemplo, escritorio) descargue una imagen de mayor resolución. De esta forma no desperdiciamos recursos o tiempo de descarga. Lo mismo con pantallas que tengan una densidad de píxeles mayor, y pueda mostrar imágenes a mejores resoluciones.

Atributo	Descripción
srcset	Indica un conjunto de imágenes y cargará una cuando se cumplan ciertos criterios.
sizes	Indica un conjunto de condiciones de medios para aplicar al srcset.

El atributo srcset

Mediante el atributo srcset se puede indicar una lista de recursos (imágenes) separados por coma, que se utilizarán en situaciones concretas cuando se cumplan determinados criterios como los indicados anteriormente. Los valores de srcset tendrían el siguiente formato:

imagen_400w.jpg 400w, imagen_900w.jpg 900w, imagen_1200w.jpg 1200w

En este caso, observa que se indican 3 imágenes, cada una de ellas separada por espacio con un número y una letra que indica el criterio para cargar dicha imagen.

Dicho criterio se define de la siguiente forma:

Criterio	Descripción	Ejemplos
Ancho	Ancho de pantalla en píxeles, seguido de la letra w.	400w, 800w
Densidad	Densidad de píxeles con decimales, seguido de la letra x.	3x, 2.5x

Veamos un ejemplo real utilizando la etiqueta <img> con estos atributos:

<img src="imagen_400w.jpg" alt="Logotipo HTML5"
     srcset="imagen_400w.jpg 400w, imagen_900w.jpg 900w, imagen_1200w.jpg 1200w">

Observamos varias cosas:

• Los atributos src y alt son obligatorios, por lo que deben indicarse siempre.
• Si el navegador es muy antiguo y no soporta srcset, hará lo definido en src.
• Si el dispositivo cumple uno de los criterios definidos, usa esa imagen en src.

El atributo sizes

De la misma forma que vimos con el atributo srcset, con el atributo sizes se puede establecer una lista de condiciones de medios, ver media queries, que se aplicarán en cada uno de los criterios del srcset.

Estos seguirán el siguiente formato:

<img src="imagen_1200w.jpg" alt="Logotipo HTML5"
     srcset="imagen_1200w.jpg 1200w,
             imagen_900w.jpg 900w,
             imagen_400w.jpg 400w"
     sizes="(width > 900px) 900px,
            ((width > 480px) and (width <= 800px)) 480px,
            ((width <= 480px)) 320px">

Observa que ahora estamos estableciendo una condición que en el caso de cumplirse, se aplicará el recurso correspondiente del atributo srcset. Observa que el atributo sizes está formado por una consulta de medios con el mismo formato que los media queries, y una medida optativa que se utilizará para la imagen cuando se cumpla una cierta consulta de medios.