Etiqueta HTML <img>
Aprende la etiqueta HTML <img>: src y alt, srcset/sizes responsivo, carga diferida, width/height para CLS, formatos de imagen y manejo de errores.
La etiqueta <img> se utiliza para insertar una imagen en un documento HTML. La imagen en sí no se inserta directamente en el documento; el navegador la muestra a partir de la fuente especificada en la etiqueta <img>.
Hay dos atributos obligatorios para un elemento <img>: src, que indica la fuente de la imagen, y alt, que define un texto alternativo para la imagen.
Para que las imágenes HTML sean clicables, debes colocar la etiqueta <img> dentro de la etiqueta <a>, que se utiliza para insertar un enlace de imagen HTML.
Sintaxis
La etiqueta <img> es vacía, lo que significa que la etiqueta de cierre no es necesaria. Solo contiene atributos. Sin embargo, en XHTML, la etiqueta <img> debe cerrarse sobre sí misma (<img />).
Ejemplo de la etiqueta HTML <img>:
Ejemplo de uso de la etiqueta HTML <img>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Podemos usar CSS para cambiar la apariencia inicial de una imagen.
Ejemplo de la etiqueta <img> con estilos CSS:
¿Cómo aplicar estilos a una etiqueta HTML <img> usando las propiedades CSS vertical-align y padding?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
border-radius: 50%;
border: 4px dashed #077cb9;
width: 300px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
</div>
</body>
</html>Atributos src y alt
El atributo src (source) indica la fuente de la imagen. Es obligatorio, ya que define la ruta hacia la imagen. El valor del atributo src puede ser el nombre del archivo o su URL.
El atributo alt define un nombre alternativo para la imagen. También es obligatorio en la etiqueta <img>. Su valor es un texto descriptivo que se muestra en el navegador antes de que la imagen se cargue, o cuando la imagen no puede cargarse.
Imágenes decorativas vs. significativas
Si alt debe contener texto depende del propósito de la imagen:
- Imágenes significativas (una foto de producto, un gráfico, un logotipo que transmite información) necesitan un
altbreve y descriptivo que comunique la misma información que la imagen. Describe lo que muestra, no "imagen de". - Imágenes decorativas (bordes, separadores, elementos ornamentales que no aportan contenido) deben usar un
alt=""vacío. Esto indica a los lectores de pantalla que omitan la imagen. No omitas el atributoaltpor completo — si falta, algunos lectores de pantalla anuncian el nombre del archivo en su lugar.
<!-- Meaningful: describe the content -->
<img src="ararat.jpg" alt="Snow-capped Mount Ararat at sunrise" />
<!-- Decorative: empty alt so assistive tech skips it -->
<img src="divider.png" alt="" />Para las imágenes significativas, incluye palabras clave relevantes en el texto alternativo donde encajen de forma natural. Un texto alt preciso beneficia tanto la accesibilidad como el posicionamiento de la imagen en los motores de búsqueda.
Uso de "data:image/[type];base64,[base64-string]" para el atributo src
El formato data:image/[type];base64,[base64-string] puede utilizarse como valor del atributo src de una etiqueta img para mostrar una imagen directamente desde el código HTML, sin necesidad de cargarla desde un archivo externo.
Aquí tienes un ejemplo de cómo usar este formato para mostrar una imagen en una etiqueta img:
Uso de "data:image/[type];base64,[base64-string]" para el atributo src
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Tiny base64-encoded sample image"
width="5"
height="5">En este ejemplo, image/png especifica el tipo MIME de la imagen, y la cadena larga después de base64, son los datos reales de la imagen codificados en base64. La cadena anterior es un PNG completo (aunque diminuto) de 5×5.
Ten en cuenta que usar imágenes codificadas en base64 puede aumentar el tamaño del archivo HTML y ralentizar la carga de la página. En general, se recomienda usar este formato para imágenes pequeñas o iconos, y utilizar archivos externos para imágenes más grandes.
Ejemplo de la etiqueta HTML <img> con los atributos src y alt:
Ejemplo de la etiqueta img con los atributos src y alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
</body>
</html>Por qué establecer width y height
Establece siempre los atributos width y height (en píxeles, sin unidades) para que coincidan con el tamaño intrínseco de la imagen. Esto permite al navegador calcular la relación de aspecto de la imagen y reservar el espacio correcto antes de que el archivo termine de descargarse. Sin estos atributos, la página se renderiza inicialmente sin espacio para la imagen y luego da un salto cuando esta llega — una mala experiencia que perjudica tu Cumulative Layout Shift (CLS), uno de los Core Web Vitals de Google.
<!-- Browser reserves a 4:3 box immediately, so no layout shift -->
<img src="photo.jpg" alt="Mountain view" width="800" height="600">Aún puedes redimensionar la imagen con CSS. Un patrón común y seguro es establecer los atributos width y height para la relación de aspecto y luego usar CSS para hacerla fluida:
img {
height: auto; /* preserve aspect ratio */
max-width: 100%; /* never overflow its container */
}Los atributos loading y decoding
El atributo loading difiere la carga de imágenes (e iframes) hasta que el recurso esté cerca de ser mostrado. Es una característica estándar compatible con todos los navegadores modernos.
Valores admitidos para el atributo loading:
lazy— difiere la carga hasta que la imagen alcanza un umbral de distancia desde el viewport. Úsalo para imágenes fuera de pantalla / debajo del pliegue.eager(el valor predeterminado) — carga el recurso de inmediato.
<img src="defer.png" loading="lazy" alt="Gallery thumbnail" width="500" height="400">No apliques carga diferida a la imagen más importante visible sin desplazamiento (a menudo el elemento Largest Contentful Paint, o LCP). La carga diferida retrasa su solicitud y hace que la página parezca más lenta. Para esa imagen usa loading="eager" o simplemente omite el atributo.
El atributo relacionado decoding indica al navegador cómo debe decodificar la imagen. decoding="async" permite al navegador decodificar la imagen fuera del hilo principal, evitando bloquear el renderizado del contenido circundante:
<img src="photo.jpg" alt="Landscape" width="800" height="600"
loading="lazy" decoding="async">La carga diferida pospone la carga de recursos hasta que son necesarios, en lugar de cargar todo de antemano. Esto mejora el rendimiento y reduce el consumo innecesario de datos en el dispositivo del usuario.
Imágenes responsivas con srcset y sizes
Una imagen fija única o desperdicia ancho de banda en pantallas pequeñas o se ve borrosa en pantallas grandes. Los atributos srcset y sizes permiten al navegador elegir el archivo más adecuado según el tamaño y la densidad de píxeles de la pantalla del dispositivo, manteniendo un único elemento <img>.
srcsetenumera los archivos de imagen candidatos, cada uno etiquetado con un descriptor de anchura (el ancho real de la imagen en píxeles, por ejemplo480w).sizesindica al navegador el ancho con el que se mostrará la imagen en diferentes puntos de ruptura, para que pueda elegir antes de que se calcule el diseño.
<img
src="photo-800.jpg"
srcset="photo-480.jpg 480w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 50vw,
800px"
alt="Coastline at sunset"
width="800" height="600">Aquí el navegador lee sizes, calcula cuántos píxeles CSS necesita la imagen, los multiplica por la relación de píxeles del dispositivo y descarga la coincidencia más cercana de srcset. El src simple permanece como alternativa para navegadores que no admiten srcset.
Cuando necesitas servir recortes diferentes para distintos diseños (art direction) u ofrecer formatos modernos con alternativa (como AVIF/WebP con respaldo en JPEG), usa el elemento <picture>.
Formatos de imagen admitidos
Los formatos de archivo de imagen son medios estandarizados para organizar y almacenar imágenes digitales. Un formato puede almacenar datos sin compresión, con compresión (que puede ser sin pérdida o con pérdida) o en formato vectorial. (Wikipedia).
Cada agente de usuario admite distintos formatos de imagen. A continuación se muestra la lista de formatos comunes:
| Abreviatura | Formato de archivo | Tipo MIME | Extensión(es) | Compatibilidad con navegadores |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| AVIF | AV1 Image File Format | image/avif | .avif | Chrome 85+, Firefox 93+, Safari 16+, Opera |
| GIF | Graphics Interchange Format | image/gif | .gif | Chrome, Edge, Firefox, Opera, Safari |
| ICO | Microsoft Icon | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Opera, Safari |
| PNG | Portable Network Graphics | image/png | .png | Chrome, Edge, Firefox, Opera, Safari |
| SVG | Scalable Vector Graphics | image/svg+xml | .svg | Chrome, Edge, Firefox, Opera, Safari |
| WebP | Web Picture format | image/webp | .webp | Chrome, Edge, Firefox, Opera, Safari 14+ |
JPEG y PNG son universalmente compatibles y siguen siendo las opciones más seguras. WebP y AVIF son formatos modernos que producen archivos notablemente más pequeños con calidad similar — AVIF suele comprimir mejor, WebP tiene mayor compatibilidad. Dado que algunos navegadores más antiguos aún no admiten AVIF, sirve estos formatos a través del elemento <picture> con una alternativa en JPEG o PNG, en lugar de colocarlos directamente en un <img src>.
Errores al cargar imágenes
Pueden producirse errores al cargar una imagen. Si se ha establecido un controlador de eventos onerror para el evento de error, ese controlador será llamado. A continuación se describen las situaciones en que esto puede ocurrir:
- El atributo src está vacío ("") o es null.
- La URL del src y la URL de la página que el usuario está visitando son la misma.
- La imagen está dañada e impide que se cargue.
- Los metadatos de la imagen están dañados de tal manera que es imposible obtener sus dimensiones, y no se especifican dimensiones en los atributos de la etiqueta
<img>. - El formato no es compatible con el agente de usuario.
Puedes escuchar ese evento error con el atributo onerror y mostrar una imagen alternativa, para que los usuarios vean un marcador de posición en lugar del icono de imagen rota:
<img
src="profile.jpg"
alt="User profile photo"
width="200" height="200"
onerror="this.onerror=null; this.src='fallback.png';">Establecer this.onerror=null primero es importante: elimina el controlador antes de cambiar el src, para que si la imagen alternativa también falla al cargarse, no se vuelva a activar el controlador y se genere un bucle infinito.
Atributos
Estos son los atributos estándar actuales del elemento <img>. Los atributos obsoletos se enumeran por separado a continuación.
| Atributo | Valor | Descripción |
|---|---|---|
| alt | texto | Define el texto alternativo de la imagen. Usa alt="" para imágenes puramente decorativas. |
| crossorigin | anonymous | use-credentials | Define si se usa CORS al cargar la imagen. Las imágenes cargadas mediante CORS pueden usarse en el elemento <canvas> sin limitar su funcionalidad. |
| decoding | sync | async | auto | Indica al navegador cómo debe decodificar la imagen. async decodifica fuera del hilo principal. |
| height | píxeles | Define la altura de la imagen. Establécelo junto con width para reservar espacio y evitar el desplazamiento de diseño. |
| ismap | ismap | Especifica que el contenido de la etiqueta es un mapa de imagen del lado del servidor. |
| loading | eager | lazy | Controla si la imagen se carga de inmediato o se difiere hasta que esté cerca del viewport. |
| sizes | condiciones de medios + longitudes | Indica al navegador el ancho mostrado de la imagen por punto de ruptura, usado junto con srcset. |
| src | URL | Define la fuente de la imagen. |
| srcset | URL + descriptores | Lista separada por comas de imágenes candidatas y sus descriptores de anchura (w) o densidad (x). |
| usemap | #mapname | Especifica un enlace al elemento <map>, que contiene las coordenadas del mapa de imagen del lado del cliente. |
| width | píxeles | Define el ancho de la imagen. Establécelo junto con height para reservar espacio y evitar el desplazamiento de diseño. |
La etiqueta <img> también admite los Atributos globales y los Atributos de eventos.
Atributos obsoletos
Estos atributos están en desuso en HTML5. En su lugar, usa las alternativas CSS.
| Atributo | Valores | Descripción | Alternativa |
|---|---|---|---|
| align | left right top bottom middle | Define la alineación de la imagen con respecto a los elementos circundantes. Centra la imagen HTML con respecto a los elementos circundantes. | Las propiedades CSS float y/o vertical-align. |
| border | píxeles | Define el ancho del borde alrededor de la imagen. | La propiedad CSS border. |
| hspace | La propiedad CSS margin en su lugar. | ||
| name | Especifica un nombre para el elemento. | El atributo id. | |
| vspace | píxeles | Define el espacio en la parte superior e inferior de la imagen. | Usa la propiedad CSS margin en su lugar. |