Imágenes

Las imágenes suelen ser lo que más pesa en un sitio web y, a la vez, lo que más vende. En esta lección aprenderás a insertarlas correctamente, a elegir el formato ideal, a optimizarlas y a servir la imagen adecuada para cada pantalla. Esto impacta directamente en la velocidad, el SEO y la experiencia de tus clientes.

Concepto

Una imagen en HTML no se "pega" dentro del documento: el HTML solo contiene una referencia al archivo, y el navegador lo descarga aparte. Por eso cada imagen pesada es una descarga más que hace esperar al usuario, sobre todo en datos móviles.

El elemento básico es <img>, un elemento vacío:

<img src="img/latte.webp" alt="Latte con arte en forma de corazón" width="800" height="600">

• src: ruta del archivo (relativa o absoluta).
• alt: texto alternativo (obligatorio).
• width y height: dimensiones intrínsecas en píxeles (muy recomendados).

El atributo alt

El alt describe la imagen para quien no puede verla: personas ciegas con lector de pantalla, usuarios con imágenes bloqueadas o mala conexión, y Google.

<!-- ✅ Describe lo que importa en este contexto -->
<img src="barista.jpg" alt="Barista sirviendo leche sobre un espresso">

<!-- ✅ Imagen dentro de un enlace: describe el destino -->
<a href="/"><img src="logo.svg" alt="Café Aroma - Ir al inicio"></a>

<!-- ✅ Imagen decorativa: alt vacío para que el lector la ignore -->
<img src="adorno-granos.svg" alt="">

<!-- ❌ Mal -->
<img src="foto1.jpg" alt="imagen">
<img src="foto1.jpg" alt="foto1.jpg">
<img src="foto1.jpg">  <!-- sin alt: el lector lee el nombre del archivo -->

Consejos para un buen alt:

• No empieces con "Imagen de…" o "Foto de…": el lector ya anuncia que es una imagen.
• Sé breve (una frase) y concreto.
• Si la imagen contiene texto (un banner con "50% de descuento"), ese texto debe estar en el alt.

Formatos de imagen

Formato	Ideal para	Transparencia	Animación	Notas
JPG	Fotografías	No	No	Universal; buena compresión con pérdida.
PNG	Capturas, gráficos con texto, transparencia	Sí	No	Sin pérdida; pesa mucho en fotos.
WebP	Casi todo (fotos y gráficos)	Sí	Sí	25–35% más ligero que JPG. Soporte universal moderno.
AVIF	Fotos de alta calidad	Sí	Sí	Aún más ligero que WebP; codificación más lenta.
SVG	Logos, iconos, ilustraciones	Sí	Sí (CSS)	Vectorial: se ve nítido a cualquier tamaño.
GIF	Animaciones simples (antiguo)	Sí (1 bit)	Sí	Pesadísimo; mejor usa video MP4 o WebP.

Regla práctica para proyectos de clientes:

• Logos e iconos → SVG.
• Fotos → WebP (o AVIF con respaldo).
• Capturas de pantalla → WebP o PNG.

Optimización

Una foto directa de un celular puede pesar 4–8 MB y medir 4000px de ancho. En una web basta con 100–300 KB. Proceso profesional:

1. Redimensiona al tamaño máximo en que se mostrará (por ejemplo 1600px para un hero a pantalla completa, 800px para una tarjeta).
2. Comprime y convierte a WebP/AVIF con herramientas como Squoosh, TinyPNG o la línea de comandos (sharp, cwebp).
3. Nombra los archivos de forma descriptiva: latte-arte-corazon.webp, no IMG_20260312.jpg (también ayuda al SEO).
4. Para SVG, limpia el código con SVGOMG.

Buena práctica

Como referencia: un hero no debería pasar de ~250 KB, y las imágenes de tarjetas de ~80 KB. Revisa el peso total en la pestaña Network de las herramientas de desarrollador.

width y height: evita saltos de diseño

Si no indicas width y height, el navegador no sabe cuánto espacio reservar hasta que la imagen se descarga, y el contenido "salta" hacia abajo. Google mide esto como CLS (Cumulative Layout Shift) y penaliza los sitios que saltan.

<img src="latte.webp" alt="Latte" width="800" height="600">

/* Con este CSS la imagen sigue siendo responsive y conserva su proporción */
img {
  max-width: 100%;
  height: auto;
}

Los valores de width/height son las dimensiones reales del archivo (o su proporción); el tamaño visual lo controla CSS.

Carga diferida: loading="lazy"

<img src="galeria-1.webp" alt="Mesa con postres" width="600" height="400" loading="lazy">

Con loading="lazy" la imagen solo se descarga cuando el usuario se acerca a ella al hacer scroll. Ahorra datos y acelera la carga inicial.

Error común

Poner loading="lazy" en la imagen principal (hero o logo) que se ve al abrir la página. Eso la retrasa. Para esa imagen usa lo contrario: fetchpriority="high".

<!-- Imagen principal, visible al cargar -->
<img src="hero.webp" alt="Interior de la cafetería" width="1600" height="900" fetchpriority="high">

Imágenes responsivas: srcset y sizes

¿Para qué descargar una imagen de 1600px en un celular de 390px de ancho? Con srcset le das al navegador varias versiones y él elige la mejor:

<img
  src="cafe-800.webp"
  srcset="cafe-400.webp 400w,
          cafe-800.webp 800w,
          cafe-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         600px"
  alt="Taza de café sobre una mesa de madera"
  width="1600" height="1067"
  loading="lazy">

Cómo leerlo:

• srcset: lista de archivos con su ancho real (400w = 400 píxeles de ancho).
• sizes: qué ancho ocupará la imagen en pantalla: en pantallas de hasta 600px ocupa el 100% del viewport; hasta 1200px, la mitad; en pantallas más grandes, 600px fijos.
• src: respaldo para navegadores antiguos.

El navegador combina sizes con la densidad de la pantalla (las pantallas retina tienen 2 o 3 píxeles por punto) y descarga el archivo más pequeño que se vea nítido.

Para imágenes de tamaño fijo (como un logo de 200px) puedes usar descriptores de densidad:

<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="Café Aroma" width="200" height="60">

El elemento picture

<picture> te da control total. Dos usos principales:

1. Formatos modernos con respaldo

<picture>
  <!-- El navegador usa la primera fuente que soporte -->
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <!-- img es obligatorio: respaldo y lugar donde van alt, width, height -->
  <img src="hero.jpg" alt="Interior de la cafetería" width="1600" height="900">
</picture>

2. Dirección de arte (distinta imagen según pantalla)

<picture>
  <!-- En móvil, una foto vertical recortada -->
  <source media="(max-width: 600px)" srcset="hero-vertical.webp">
  <!-- En escritorio, la foto panorámica -->
  <img src="hero-panoramica.webp" alt="Barra de la cafetería" width="1600" height="700">
</picture>

figure y figcaption

Cuando una imagen tiene un pie de foto, envuélvela en <figure>:

<figure>
  <img src="productores.webp" alt="Familia de productores en un cafetal de Veracruz" width="800" height="533" loading="lazy">
  <figcaption>Nuestros granos vienen de productores de Coatepec, Veracruz.</figcaption>
</figure>

<figure> también sirve para gráficas, diagramas, fragmentos de código o citas que se entienden por sí solos.

Imágenes de fondo en CSS o img

• Si la imagen es contenido (foto de producto, del equipo, de un platillo) → <img> con alt.
• Si es decoración (textura, degradado, fondo abstracto) → background-image en CSS.

Casos de uso reales

• Tienda en línea: fotos de producto en WebP con srcset, loading="lazy" en la galería y width/height para evitar saltos.
• Hero de una landing: <picture> con AVIF/WebP/JPG, fetchpriority="high" y una versión vertical para móvil.
• Logo: SVG en un enlace al inicio, con alt descriptivo.
• Portafolio de fotógrafo: miniaturas pequeñas que enlazan a la versión grande.

Ejercicios

1. Escribe el código de una imagen de producto taza-negra.webp (1200×1200) que se muestre perezosamente, con buen alt y sin saltos de diseño.
2. Crea un <picture> que sirva equipo.avif, luego equipo.webp y como respaldo equipo.jpg, con pie de foto "Nuestro equipo en 2026".
3. Escribe un srcset con versiones de 480, 960 y 1440px para una imagen que ocupa todo el ancho en móvil y un tercio en pantallas mayores a 900px.

Ver solución

<!-- Ejercicio 1 -->
<img src="img/taza-negra.webp" alt="Taza de cerámica negra mate de 350 ml"
     width="1200" height="1200" loading="lazy">

<!-- Ejercicio 2 -->
<figure>
  <picture>
    <source srcset="img/equipo.avif" type="image/avif">
    <source srcset="img/equipo.webp" type="image/webp">
    <img src="img/equipo.jpg" alt="Cinco baristas sonriendo detrás de la barra"
         width="1200" height="800" loading="lazy">
  </picture>
  <figcaption>Nuestro equipo en 2026</figcaption>
</figure>

<!-- Ejercicio 3 -->
<img
  src="img/foto-960.webp"
  srcset="img/foto-480.webp 480w, img/foto-960.webp 960w, img/foto-1440.webp 1440w"
  sizes="(min-width: 900px) 33vw, 100vw"
  alt="Granos de café recién tostados"
  width="1440" height="960" loading="lazy">

Resumen

• <img> necesita src, alt y, de preferencia, width y height.
• alt describe la imagen; usa alt="" para imágenes decorativas.
• SVG para logos e iconos; WebP/AVIF para fotos; optimiza siempre antes de subir.
• loading="lazy" para imágenes fuera de pantalla; fetchpriority="high" para la principal.
• srcset + sizes sirven el tamaño adecuado; <picture> permite formatos modernos y dirección de arte.
• <figure> + <figcaption> para imágenes con pie de foto.