Cómo insertar una imagen en HTML
Usa el elemento <img>. src es el archivo de imagen, alt la describe, y width y height dan su tamaño en píxeles. <img> es un elemento vacío: no tiene etiqueta de cierre.
Aquí el src es un pequeño SVG escrito dentro de la URL (un data URI) para que el ejemplo funcione sin conexión. En un sitio real, src es la ruta a un archivo:
src | Carga |
|---|---|
photo.jpg | photo.jpg en la misma carpeta que el archivo HTML |
images/photo.jpg | Desde la carpeta images junto al archivo HTML |
../photo.jpg | Desde una carpeta más arriba |
/images/photo.jpg | Desde la carpeta images en la raíz del sitio |
https://example.com/photo.jpg | Desde otro sitio (puede moverse o desaparecer) |
Las rutas distinguen mayúsculas y minúsculas en la mayoría de los servidores web: Photo.JPG y photo.jpg son archivos distintos.
Texto alternativo
El texto alt sustituye a la imagen. Los lectores de pantalla lo leen en voz alta, y el navegador lo muestra cuando la imagen no se puede cargar. Las dos imágenes de aquí apuntan a archivos que no existen:
La primera muestra su texto alt, "Coddy logo", donde debería estar la imagen. La segunda tiene un alt vacío, así que no hay texto que mostrar, y los lectores de pantalla la saltan. Cómo escribir el alt:
- Describe lo que importa en ese contexto. "Gráfico de barras: las ventas se duplicaron de marzo a junio" dice más que "gráfico".
- No empieces con "Imagen de". Los lectores de pantalla ya la anuncian como imagen.
- Usa
alt=""para la decoración (un separador, un adorno de fondo) para que los lectores de pantalla la salten. - Nunca omitas
alt. Sin él, algunos lectores de pantalla leen el nombre del archivo, como "IMG guion bajo 4032 punto jpg". - Para una imagen dentro de un enlace, describe el destino:
<a href="/"><img src="logo.svg" alt="Home"></a>.
Definir el tamaño de la imagen
Los atributos width y height van en píxeles, sin unidad. Los tamaños en CSS los sobrescriben. El CSS más útil para las imágenes es esta pareja, que deja que una imagen se reduzca con su contenedor pero nunca se estire más allá de su ancho natural:
La primera imagen mantiene sus 300 píxeles y se sale de la caja de 180 píxeles. La segunda se reduce a 180 por 120 y conserva su forma 3:2. height: auto importa: sin él, el atributo height="200" mantendría la imagen a 200 píxeles de alto y la aplastaría.
Escribe siempre width y height en el HTML, incluso en las imágenes responsive. El navegador los usa para reservar el espacio justo antes de que llegue el archivo, así el texto de abajo no salta cuando la imagen carga.
Recortar con object-fit
Cuando una imagen debe llenar una caja de otra forma (un avatar cuadrado a partir de una foto ancha, tarjetas de la misma altura), object-fit decide qué pasa con lo que sobra:
La fuente es una imagen 2:1 de un círculo, mostrada en cajas cuadradas:
fill(el valor por defecto) estira la imagen hasta la caja, así que el círculo se vuelve un óvalo.containencaja la imagen entera dentro y deja franjas vacías.coverllena la caja y recorta lo que sobra, manteniendo el círculo redondo. Es la opción habitual para miniaturas y avatares.
object-position elige qué parte queda visible al recortar, por ejemplo object-position: top para retratos.
Pies de foto con figure y figcaption
Un pie de foto que pertenece a una imagen va en <figcaption>, y los dos van dentro de <figure>. Eso los une para los lectores de pantalla, y la figura se puede estilizar como una unidad:
El pie de foto no sustituye a alt. alt dice lo que muestra la imagen; el pie de foto añade lo que también necesitaría alguien que la ve.
El hueco debajo de una imagen
Una imagen se apoya en la línea base del texto, como una letra, así que su contenedor deja espacio debajo para los trazos descendentes de letras como g e y. Un borde hace visible el hueco:
El primer borde tiene una franja blanca bajo la imagen azul. display: block en la imagen (segunda caja) la elimina; también vertical-align: middle si la imagen debe seguir en línea.
Carga diferida y fuentes responsive
Para imágenes que están más abajo en una página larga, loading="lazy" retrasa la descarga hasta que el lector se acerca a ellas al desplazarse:
<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">
No uses carga diferida en la imagen principal de la parte superior de la página; retrasa lo primero que ven los lectores.
Para enviar archivos más pequeños a las pantallas pequeñas, lista varios tamaños en srcset e indica al navegador con sizes a qué ancho se mostrará la imagen. El navegador elige el archivo:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Harbor at dusk" width="800" height="533">
<picture> va más allá y ofrece formatos distintos, con el <img> como alternativa, que además lleva el alt:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>
Formatos de imagen
| Formato | Ideal para |
|---|---|
| JPEG | Fotos |
| PNG | Capturas de pantalla, imágenes que necesitan bordes nítidos o transparencia |
| WebP | Fotos y gráficos, más ligero que JPEG y PNG, con transparencia |
| AVIF | Fotos, normalmente más ligero que WebP |
| SVG | Logos, iconos y diagramas; escala a cualquier tamaño sin perder nitidez |
| GIF | Animaciones cortas, aunque un <video> silenciado en bucle pesa mucho menos |
Errores comunes
- Una ruta de tu propio ordenador, como
src="C:\Users\me\photo.jpg". Solo funciona en tu máquina. Pon el archivo junto a tu HTML y usa una ruta relativa. - Falta el
alt. Todo<img>necesita uno, vacío para la decoración. - Definir
widthyheighten CSS con valores de otra proporción. La imagen se deforma. Define uno y deja el otro enauto, o usaobject-fit. - Sin atributos
widthyheight, así que la página salta mientras cargan las imágenes. - Archivos enormes reducidos con CSS. Una foto de 4000 píxeles mostrada a 400 píxeles se descarga entera igualmente. Redimensiónala o usa
srcset. - Una etiqueta de cierre
</img>.<img>es vacío; no hay nada que cerrar.
Las imágenes de los ejemplos de arriba son pequeños SVG en línea. Para probar el mismo código con tus propias fotos, pégalo en el editor de HTML en línea.
Preguntas frecuentes
¿Cómo inserto una imagen en HTML?
Usa la etiqueta <img> con el archivo en src y una descripción en alt: <img src="photo.jpg" alt="Una bicicleta roja" width="600" height="400">. <img> no tiene etiqueta de cierre.
¿Cómo cambio el tamaño de una imagen en HTML?
Pon los atributos width y height en píxeles, o usa CSS como img { width: 300px; height: auto; }. Si defines solo una dimensión y dejas la otra en auto, se mantienen las proporciones.
¿Por qué no se ve mi imagen en HTML?
Normalmente la ruta de src está mal: es relativa al archivo HTML, los nombres de archivo distinguen mayúsculas y minúsculas en la mayoría de los servidores, y una ruta como C:\photos\cat.jpg solo existe en tu ordenador. Abre la URL de la imagen directamente en el navegador para comprobarla.
¿Qué es el texto alt en HTML?
El atributo alt es un texto que sustituye a la imagen. Los lectores de pantalla lo leen, y los navegadores lo muestran cuando la imagen no carga. Describe lo que muestra o hace la imagen; usa alt="" para imágenes puramente decorativas.
¿Cómo hago una imagen responsive?
Añádele max-width: 100%; height: auto; en el CSS. La imagen se reduce entonces para caber en un contenedor estrecho y nunca crece más allá de su ancho natural.
¿Por qué hay un hueco debajo de mi imagen?
Las imágenes son en línea por defecto y se apoyan en la línea base del texto, lo que deja espacio debajo para los trazos descendentes de las letras. Pon display: block en la imagen, o vertical-align: middle, para quitar el hueco.
