En HTML, para añadir una imagen/foto a una página se usa la etiqueta <img>. Funciona tanto con una URL (desde un servidor remoto) como con una ruta de archivo local.

Uso básico

<img src="imagen.jpg" alt="Descripción de la imagen">

<img> es una etiqueta autónoma — no tiene cierre (</img>).

Atributos importantes

• src: la URL o ruta de archivo de la imagen (obligatorio).
• alt: texto alternativo — si la imagen no carga o para lectores de pantalla (se considera obligatorio).
• width / height: tamaño en píxeles.
• title: descripción breve que se muestra al pasar el ratón.

Dos métodos: URL vs local

1. Con URL (remota)

<img src="https://www.burakbayram.com/wp-content/uploads/2026/foto.jpg" alt="Paisaje">

2. Archivo local

En la misma carpeta que el archivo HTML:

<img src="foto.jpg" alt="Paisaje">

En una subcarpeta:

<img src="images/foto.jpg" alt="Paisaje">

2026 — Buenas prácticas modernas de <img>

• loading=”lazy”: no se carga hasta que llega a su posición en pantalla. Velocidad de página +.
• decoding=”async”: el navegador decodifica en segundo plano.
• srcset: archivos de imagen distintos para diferentes resoluciones de pantalla.
• sizes: tamaño para distintos viewports.
• Formatos WebP / AVIF: entre un 50 y un 80% más pequeños que JPG/PNG.
• La etiqueta <picture>: art direction y fallback de formatos.

Ejemplo moderno

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Paisaje"
       width="800" height="600"
       loading="lazy" decoding="async">
</picture>