Optimización de imágenes para SEO técnico: formatos, carga y accesibilidad

Por qué la optimización de imágenes es “SEO técnico”

Las imágenes afectan directamente a cómo se descarga y renderiza una página (peso total, número de peticiones, estabilidad visual) y también a cómo los buscadores entienden el contenido (contexto semántico, accesibilidad, indexación en búsqueda de imágenes). En desarrollo web, optimizar imágenes significa tomar decisiones en tres frentes: formato, entrega y marcado HTML (incluyendo accesibilidad).

Selección de formatos: AVIF, WebP, JPEG, PNG, SVG

Regla práctica de elección

• Fotografías / imágenes con muchos colores: prioriza AVIF, luego WebP, y deja JPEG como fallback.
• Gráficos con transparencia: AVIF/WebP si el soporte es suficiente para tu audiencia; si necesitas compatibilidad amplia y edición simple, PNG (pero suele ser más pesado).
• Iconos, logos, ilustraciones vectoriales: SVG (escalable, nítido, suele pesar poco). Evita incrustar texto crítico sin alternativa accesible.

Cuándo usar cada uno (resumen técnico)

Entrega con <picture> y fallbacks

Para servir AVIF/WebP con fallback a JPEG/PNG, usa <picture>. Esto permite que el navegador elija el mejor formato soportado.

<picture>  <source type="image/avif" srcset="/img/producto-800.avif 800w, /img/producto-1200.avif 1200w" sizes="(max-width: 600px) 100vw, 600px">  <source type="image/webp" srcset="/img/producto-800.webp 800w, /img/producto-1200.webp 1200w" sizes="(max-width: 600px) 100vw, 600px">  <img src="/img/producto-1200.jpg" width="600" height="400" alt="Zapatilla de running modelo X en color negro"></picture>

Compresión y dimensionamiento responsivo (srcset/sizes)

Objetivo: no enviar más píxeles de los necesarios

Una causa típica de páginas pesadas es servir una imagen de 2000px para un contenedor que se muestra a 400px. La solución es generar variantes y dejar que el navegador elija con srcset y sizes.

Patrones de srcset: por anchura (recomendado)

El descriptor w funciona bien con layouts fluidos. Define varias anchuras reales que existan en tu servidor/CDN.

<img  src="/img/hero-1200.jpg"  srcset="/img/hero-640.jpg 640w, /img/hero-960.jpg 960w, /img/hero-1200.jpg 1200w, /img/hero-1600.jpg 1600w"  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 960px"  width="960" height="540"  alt="Equipo trabajando en una oficina con portátiles">

Cómo calcular sizes sin adivinar

• 1) Identifica el ancho máximo del contenedor en cada breakpoint (CSS real).
• 2) Traduce ese ancho a condiciones de media query en sizes.
• 3) Usa un último valor fijo (por ejemplo 960px) si el contenedor no crece más allá.
• 4) Verifica con DevTools: en la pestaña Network, revisa qué recurso se descargó y su “Rendered size”.

Guía práctica paso a paso (pipeline de imágenes)

• Paso 1: inventario. Lista imágenes por tipo: hero, cards, thumbnails, iconos, logos.
• Paso 2: define tamaños objetivo. Por ejemplo: 320/640/960/1200/1600 para fotos; 1x/2x para UI si aplica.
• Paso 3: genera variantes. Produce AVIF y WebP (y JPEG/PNG fallback si lo necesitas). Mantén proporciones consistentes.
• Paso 4: comprime. Ajusta calidad por tipo (fotos suelen tolerar más compresión que gráficos). Evita “calidad 100”.
• Paso 5: implementa picture + srcset/sizes. Asegura que cada URL existe y responde rápido.
• Paso 6: valida. Comprueba bytes transferidos, elección de variante, y que no haya reescalado excesivo.

Lazy loading correcto: rendimiento sin romper el LCP

Qué hacer y qué evitar

• Haz lazy en imágenes fuera de pantalla (below the fold): loading="lazy".
• No hagas lazy en la imagen que probablemente sea el LCP (por ejemplo, hero principal). Si la difieres, puede retrasar el LCP.
• Prioriza la imagen LCP con fetchpriority="high" (cuando aplique) y evita cadenas de dependencias.

Ejemplo: imagen LCP sin lazy y con prioridad

<img  src="/img/hero-1200.jpg"  srcset="/img/hero-640.jpg 640w, /img/hero-960.jpg 960w, /img/hero-1200.jpg 1200w"  sizes="100vw"  width="1200" height="675"  fetchpriority="high"  decoding="async"  alt="Vista frontal del producto en un fondo neutro">

Ejemplo: imágenes de listado con lazy

<img  src="/img/card-480.jpg"  srcset="/img/card-320.jpg 320w, /img/card-480.jpg 480w, /img/card-640.jpg 640w"  sizes="(max-width: 600px) 50vw, 300px"  width="300" height="200"  loading="lazy"  decoding="async"  alt="Detalle del tejido en color azul">

Placeholders y prevención de CLS (width/height)

Evita saltos de layout reservando espacio

Para prevenir CLS, el navegador necesita conocer el tamaño de la imagen antes de que cargue. La forma más simple es incluir width y height en el HTML (aunque luego la imagen sea responsive con CSS). Esto permite calcular la relación de aspecto y reservar el espacio.

Continúa en nuestra aplicación.

• Escuche el audio con la pantalla apagada.
• Obtenga un certificado al finalizar.
• ¡Más de 5000 cursos para que explores!

O continúa leyendo más abajo...

Descargar la aplicación

<img src="/img/foto.jpg" width="800" height="533" style="max-width:100%;height:auto;" alt="Persona usando la aplicación en un móvil">

Placeholders: útiles, pero sin engañar al usuario

• Blur-up: una versión muy pequeña y borrosa como fondo mientras llega la imagen final.
• Color dominante: un fondo aproximado para evitar flashes.
• Skeleton: contenedor con aspecto de carga (más común en tarjetas).

Recomendación técnica: el placeholder debe respetar la misma relación de aspecto que la imagen final para no introducir CLS. Si usas background-image como placeholder, mantén el contenedor con dimensiones fijas o ratio definido.

Prácticas de entrega: caching, CDN, rutas estables

Caching HTTP: reduce descargas repetidas

Las imágenes son candidatas ideales para cacheo agresivo si sus URLs cambian cuando cambia el contenido (versionado). Un patrón común es usar nombres con hash.

• URLs versionadas: /img/producto.3f2a9c.webp
• Cache-Control recomendado para assets versionados: public, max-age=31536000, immutable
• ETag/Last-Modified: útil si no puedes versionar, pero menos robusto que el hashing.

CDN y transformación en el edge

Una CDN puede servir imágenes desde ubicaciones cercanas y, según el proveedor, transformar dinámicamente (resize/format/quality). Si usas transformación, define una convención estable de parámetros para evitar duplicidad de caché.

• Evita parámetros sin control que generen infinitas variantes (por ejemplo, cualquier ?w=).
• Permite solo tamaños predefinidos (lista blanca) para mejorar hit ratio de caché.

Rutas estables y consistentes

• Mantén una estructura predecible: /img/{categoria}/{slug}-{ancho}.{ext}.
• Evita cambiar rutas sin necesidad; si cambias, gestiona redirecciones a nivel de servidor/CDN cuando aplique.
• Usa HTTPS y el mismo host preferido para evitar duplicidad de recursos.

Imágenes y sitemap: cuándo aplica

Si tu sitio depende de tráfico de búsqueda de imágenes (ecommerce, recetas, medios), puede ser útil incluir imágenes relevantes asociadas a URLs en el sitemap (extensión de imágenes). Esto ayuda a descubrir recursos que quizá no se encuentren fácilmente (por ejemplo, cargados vía JS o en galerías complejas). Úsalo para imágenes principales y representativas, no para cada icono o sprite.

Accesibilidad con impacto indirecto en SEO

alt descriptivo: qué poner y qué evitar

El texto alternativo ayuda a tecnologías asistivas y aporta contexto semántico. Debe describir la imagen en función de su propósito en la página.

• Bueno: describe lo que aporta valor. Ejemplo: alt="Gráfico de barras con crecimiento trimestral del 15%".
• Malo: relleno genérico o repetitivo. Ejemplo: alt="imagen" o listas de keywords.
• Decorativas: si no aportan información, usa alt="" (vacío) para que se ignoren por lectores de pantalla.

Nombres de archivo coherentes (cuando aportan valor)

El nombre del archivo puede ayudar en flujos de trabajo, depuración y, en algunos casos, aportar contexto adicional. No es una palanca principal, pero sí una buena práctica cuando es fácil de mantener.

• Preferible: zapatilla-running-modelo-x-negra.webp
• Evitar: IMG_4837.webp (opaco) o nombres excesivamente largos.

No incrustes texto importante dentro de imágenes sin alternativa

Si una imagen contiene información crítica (promociones, instrucciones, datos), proporciona una alternativa en texto HTML cercano o en el propio contenido. Esto mejora accesibilidad, permite traducción, y evita que el mensaje se pierda si la imagen no carga.

Checklist de implementación rápida

• Servir AVIF/WebP con fallback (si aplica) mediante <picture>.
• Generar variantes y usar srcset + sizes basados en el CSS real.
• No aplicar loading="lazy" a la imagen LCP; considerar fetchpriority="high".
• Incluir width y height para reservar espacio y evitar CLS.
• Cacheo agresivo con URLs versionadas; CDN con tamaños controlados.
• alt útil (o vacío si decorativa); evitar texto crítico solo en imágenes.