Imágenes HTML
Aprende a insertar imágenes con la etiqueta img de HTML: src y alt, ancho/alto para evitar el desplazamiento del diseño, srcset y picture responsivos, y carga diferida.
Para insertar una imagen en una página web, utiliza la etiqueta <img>.
La etiqueta <img> admite varios atributos obligatorios y opcionales, que proporcionan información adicional sobre ella.
Sintaxis
La etiqueta <img> está vacía, lo que significa que no se requiere la etiqueta de cierre. Solo contiene atributos. Sin embargo, en XHTML, la etiqueta (<img>) debe cerrarse (<img/>).
Atributos obligatorios de imagen: src y alt
El atributo src (fuente) especifica el nombre o la ubicación de la imagen que se va a mostrar. Su valor puede ser una ruta relativa (un archivo de tu propio proyecto) o una URL absoluta (una imagen alojada en otro lugar).
Ruta relativa — la imagen se encuentra en tu proyecto, junto al archivo HTML:
<img src="images/example.jpg" alt="A description of the image" />URL absoluta — la imagen está alojada en otro servidor:
<img src="https://www.example.com/images/example.jpg" alt="A description of the image" />El atributo alt proporciona un texto alternativo que se muestra si la imagen no se carga (conexión lenta, ruta incorrecta) y que los lectores de pantalla leen en voz alta. Hay dos casos:
- Imágenes significativas — proporciona a
altuna descripción breve y precisa de lo que transmite la imagen (alt="Bar chart of 2024 sales"). - Imágenes decorativas que no aportan nada al contenido — usa un
alt=""vacío. Los lectores de pantalla omiten entonces la imagen en lugar de anunciar un nombre de archivo sin sentido.
Incluye siempre el atributo. Omitir alt por completo es diferente de alt="" y se marca como un error de accesibilidad.
Nota: el comportamiento del texto emergente al pasar el cursor se controla con el atributo title, no con alt.
La sintaxis de la etiqueta <img> con los atributos obligatorios src y alt tiene este aspecto:
Ejemplo de imagen HTML
<img src="example.jpg" alt="HTML tutorial" />Usa el atributo alt en todas las imágenes para proporcionar una descripción clara y concisa del contenido de la imagen, lo que mejora la accesibilidad y ayuda a los motores de búsqueda a comprender tu página.
Atributos de imagen recomendados: width y height
Establece siempre los atributos width y height en un <img>. Le indican al navegador la relación de aspecto de la imagen antes de que el archivo se haya descargado, de modo que pueda reservar exactamente el espacio correcto en el diseño desde el principio.
Sin ellos, la página se reorganiza en el momento en que llega cada imagen: el texto y otros elementos saltan hacia abajo para hacer espacio. Este salto visual se denomina Cumulative Layout Shift (CLS), uno de los Core Web Vitals de Google y una fuente habitual de clics incorrectos. Proporcionar las dimensiones lo evita.
Ejemplo de imagen HTML
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Los atributos aceptan números de píxeles sin unidades (width="200", no width="200px"). Puedes redimensionar la imagen con CSS — el navegador usa los valores de los atributos solo para calcular la relación de aspecto y evitar el desplazamiento del diseño.
Ejemplo de la etiqueta <img> de HTML con los atributos src, alt, width y height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<p>This is Aleq's photo</p>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Resultado
Mantén los atributos width y height para la relación de aspecto y luego usa las propiedades CSS max-width o max-height para añadir flexibilidad. Esto evita que las imágenes grandes desborden el diseño en pantallas pequeñas.
Hacer imágenes fluidas (responsivas)
Para evitar que una imagen desborde su contenedor en pantallas estrechas, aplícale esta regla CSS. Es la línea de CSS más útil para imágenes:
img {
max-width: 100%;
height: auto;
}max-width: 100% limita la imagen renderizada al ancho de su contenedor, por lo que se reduce en pantallas pequeñas pero nunca se amplía más allá de su tamaño natural y se vuelve borrosa. height: auto permite que la altura se ajuste para que la imagen mantenga sus proporciones en lugar de estirarse.
Esto funciona en conjunto con los atributos width/height: los atributos reservan el espacio de la relación de aspecto (sin CLS), mientras que el CSS hace que el tamaño renderizado sea fluido.
Flotación de imágenes
De forma predeterminada, un elemento <img> es en línea, por lo que se sitúa dentro de la línea de texto. Puedes ajustar texto alrededor de una imagen con la propiedad CSS float — establece float: left o float: right.
Float es una técnica heredada para este tipo de diseño. Para cualquier cosa más allá de simplemente rodear un párrafo con una imagen — galerías, medios lado a lado, tarjetas — recurre a Flexbox o CSS Grid en su lugar. Ofrecen alineación, espaciado y ajuste sin las peculiaridades de limpieza que requiere float.
Para mostrar la imagen a la izquierda y el texto a la derecha, agrega float: left. Prefiere una clase CSS en lugar de un atributo style en línea para facilitar el mantenimiento.
Ejemplo de la etiqueta <img> y la propiedad CSS float para flotar una imagen a la izquierda:
Ejemplo de una imagen con float|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>Añadir el atributo style="float:right" a la etiqueta <img> posiciona el texto a la izquierda y la imagen a la derecha.
Ejemplo de la etiqueta <img> y la propiedad CSS float para flotar una imagen a la derecha:
Ejemplo con un atributo float:right|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>Resultado
Cómo añadir un hipervínculo a una imagen
Como la etiqueta <a> se usa para insertar hipervínculos, solo necesitas colocar la imagen dentro de la etiqueta <a> para que tu imagen sea clicable.
Ejemplo de las etiquetas <a> e <img> para añadir un hipervínculo a una imagen:
Ejemplo de una imagen con un hipervínculo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Imágenes responsivas: servir el archivo adecuado
Una sola imagen rara vez se adapta a todas las pantallas. Enviar una foto de 2000px a un teléfono desperdicia ancho de banda; enviar una pequeña a una pantalla 4K se ve borrosa. HTML te proporciona dos herramientas para que el navegador elija el mejor archivo para cada dispositivo.
srcset y sizes (misma imagen, distintos tamaños)
Usa los atributos srcset y sizes en <img> cuando tengas la misma imagen en varios anchos y quieras que el navegador descargue la más apropiada.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
width="800"
height="600"
alt="A scenic mountain lake"
/>srcsetenumera los archivos candidatos con sus anchos intrínsecos (400wsignifica que el archivo tiene 400px de ancho).sizesle indica al navegador qué tan ancha se mostrará la imagen — aquí, el ancho completo del viewport por debajo de 600px, la mitad en caso contrario. El navegador combina esto con la densidad de píxeles del dispositivo para elegir el archivo más pequeño que siga viéndose nítido.srcpermanece como respaldo para navegadores muy antiguos.
El elemento picture (diferentes formatos o dirección de arte)
El elemento <picture> envuelve varios elementos <source> y un <img>. El navegador recorre las fuentes de arriba a abajo y usa la primera que admite, recurriendo al <img> si ninguna coincide.
El uso clásico es servir un formato moderno y más pequeño con un respaldo garantizado:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" />
</picture>Un navegador que entiende AVIF descarga el archivo AVIF; uno que solo entiende WebP usa ese; todo lo demás recurre al JPEG. El <img> es obligatorio — proporciona el texto alt y el respaldo. También puedes usar <picture> para la dirección de arte: mostrar una imagen recortada y en vertical en teléfonos y una amplia en escritorios mediante atributos media en cada <source>.
Carga diferida y decodificación
De forma predeterminada, el navegador descarga ansiosamente todas las imágenes de la página. Para las imágenes muy por debajo del pliegue, eso es un esfuerzo innecesario. Añade loading="lazy" para que el navegador solo cargue la imagen cuando se aproxime al viewport:
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" loading="lazy" />Usa loading="lazy" para imágenes fuera de pantalla, pero no para tu imagen más grande por encima del pliegue (como un hero o un elemento LCP) — diferirla ralentiza la carga percibida.
También puedes añadir decoding="async", que permite al navegador decodificar la imagen fuera del hilo principal para no bloquear el renderizado del contenido circundante.
Qué formato de imagen elegir para la web
Hay tres tipos principales de formatos de imagen compatibles con los navegadores:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF tiene 256 colores únicos que permiten gráficos simples y de carga rápida. Puedes usar GIF para dibujos pequeños, diagramas, gráficos, botones y otros gráficos simples que no impidan que tu página cargue rápido.
JPEG es típicamente un formato de 24 bits que combina luz roja, azul y verde para mostrar millones de colores. Por eso se usa principalmente para fotografías. Este formato te da la flexibilidad de elegir cuánto comprimir tu imagen, desde el 0% (compresión máxima) hasta el 100% (sin compresión). Puedes elegir este formato si no te importa sacrificar algo de calidad a cambio de una reducción de tamaño. Evita usar JPEG para imágenes con texto, formas o grandes bloques de color, porque cuando el archivo se comprime, las líneas se difuminan y los colores se desplazan.
El formato PNG combina los beneficios de JPEG y GIF: admite millones de colores y permite compresión sin pérdidas. Puedes usar PNG para gráficos web que requieren transparencia, gráficos con muchos colores y gráficos complejos o fotografías.
Formatos de imagen modernos
Dos formatos modernos son ahora ampliamente compatibles en los navegadores y producen archivos más pequeños y de carga más rápida que JPEG o PNG.
WebP, diseñado por Google, admite tanto compresión sin pérdidas como con pérdidas, además de transparencia y animación. Los archivos WebP son típicamente entre un 25 y un 35% más pequeños que un JPEG o PNG equivalente y son compatibles con todos los principales navegadores actuales. (WebP - Wikipedia)
AVIF es un formato más reciente basado en el códec de vídeo AV1. Generalmente comprime mejor que WebP con la misma calidad visual y admite una amplia gama de colores, lo que lo hace excelente para fotografías. La compatibilidad con navegadores es ahora amplia, aunque ligeramente por detrás de WebP.
Dado que no todos los navegadores de los visitantes admiten el formato más nuevo, sírvelos con un elemento <picture> y un respaldo JPEG o PNG, como se muestra en la sección de imágenes responsivas anterior. El navegador elegirá entonces el mejor formato que entienda.
Es posible que aún encuentres formatos más antiguos como BPG y HEIC de Apple. Ninguno de los dos es compatible con los navegadores web, así que evítalos para imágenes en la web: convierte a WebP o AVIF en su lugar.