20 de abril de 2026 · SEO Toolkit

Optimización de imágenes para SEO: WebP, AVIF, lazy loading y alt text (guía 2026)

Guía completa para optimizar imágenes y mejorar tu SEO: formatos modernos, dimensiones correctas, alt text útil, lazy loading bien aplicado y cómo aparecer en Google Images.

Las imágenes son la principal causa de webs lentas. Y las webs lentas no posicionan, no convierten y queman dinero en hosting.

La buena noticia: optimizar imágenes es de las acciones SEO con mejor relación esfuerzo/resultado. Bien hecho, puedes reducir el peso de tu web un 60-80% y subir tu Core Web Vitals 30-40 puntos sin tocar nada más.

En esta guía te explico todo lo que necesitas saber: formatos modernos (WebP/AVIF), dimensiones correctas, alt text útil, lazy loading bien aplicado, y cómo conseguir tráfico desde Google Images.

Por qué las imágenes son tan críticas para el SEO

Pesan más que todo lo demás junto

En una web promedio, las imágenes representan el 60-70% del peso total de la página. Reduce ese peso y reduces directamente:

TTFB (tiempo a primer byte): menos transferencia de datos.
LCP (Largest Contentful Paint): la imagen del hero suele ser el LCP element.
Tiempo total de carga: menos espera = mejor UX.

Google Images es tráfico ignorado

Google Images mueve más del 20% del tráfico de búsqueda total a nivel global. Aun así, casi nadie optimiza activamente para aparecer ahí. Si tu nicho tiene componente visual (recetas, moda, viajes, productos, decoración), estás dejando dinero en la mesa.

Afectan tres Core Web Vitals a la vez

LCP: si tu imagen del hero está sin optimizar, tu LCP está malo.
CLS: si las imágenes no tienen width y height, hay layout shift.
INP (indirecto): imágenes muy pesadas saturan la red y ralentizan todo.

Optimizar imágenes mueve la aguja de los CWV como ninguna otra cosa.

Formatos modernos: WebP y AVIF

El estándar antiguo

JPG y PNG llevan con nosotros desde los años 90. Funcionan, pero son enormemente ineficientes comparados con los formatos modernos.

WebP (Google, 2010)

Soporte navegador: 100% desde 2020.

25-35% más ligero que JPG con misma calidad visual.
Soporta transparencia (sustituye también a PNG).
Soporta animación (sustituye a GIF).
Genera con: ImageMagick, Sharp, Squoosh, herramientas online.

# Ejemplo con cwebp (línea de comandos)
cwebp -q 85 imagen.jpg -o imagen.webp

AVIF (Alliance for Open Media, 2019)

Soporte navegador: 95% en 2026 (Safari lo soportó tarde, Chrome desde 2020).

50% más ligero que JPG, 20% más ligero que WebP.
Soporta HDR.
Tarda más en codificar (ralentiza tu build).

# Ejemplo con avifenc
avifenc --min 0 --max 50 imagen.jpg imagen.avif

Cuál usar

Recomendación: sirve AVIF con fallback a WebP con fallback a JPG mediante <picture>:

<picture>
  <source srcset="imagen.avif" type="image/avif">
  <source srcset="imagen.webp" type="image/webp">
  <img src="imagen.jpg" alt="Descripción" width="1200" height="630">
</picture>

El navegador elige el primer formato que soporta. Garantizas:

Carga el más ligero posible (AVIF en navegadores modernos).
Funciona en navegadores antiguos (fallback a JPG).
Cumples accesibilidad y SEO (alt siempre presente).

Si no quieres complicarte

Solo WebP ya es suficiente para el 99% de los casos:

<img src="imagen.webp" alt="Descripción" width="1200" height="630">

WebP solo te da el 90% del beneficio de AVIF con el 10% de la complejidad. Vale la pena.

Dimensiones correctas: el error más común

No sirvas una imagen de 4000×3000 píxeles para mostrarla a 800×600. Es algo que veo en el 80% de las webs que audito.

El problema

El navegador descarga la imagen completa (digamos 2 MB) y la escala con CSS al tamaño del viewport (donde solo necesitabas 200 KB). Estás malgastando 1.8 MB de transferencia por imagen.

La solución: `srcset` y `sizes`

Sirve múltiples versiones de la imagen y deja que el navegador elija la apropiada:

<img
  src="imagen-800.webp"
  srcset="
    imagen-400.webp 400w,
    imagen-800.webp 800w,
    imagen-1200.webp 1200w,
    imagen-1600.webp 1600w
  "
  sizes="
    (max-width: 600px) 400px,
    (max-width: 900px) 800px,
    1200px
  "
  alt="Descripción"
  width="1200"
  height="630"
>

El navegador:

Lee el viewport actual y la densidad de píxeles.
Aplica la regla sizes para saber qué tamaño necesita.
Descarga del srcset la versión que mejor encaje.

Reducción de peso típica: 50-70%.

Generar las versiones automáticamente

WordPress: plugins como ShortPixel, Smush o el propio core (lo hace desde 5.3).
Astro/Next.js/Nuxt: hay componentes <Image> que generan todo automáticamente.
Build manual: usa Sharp (Node.js) o ImageMagick para generar las versiones en CI.

Lazy loading: cuándo SÍ y cuándo NO

Qué es lazy loading

Cargar imágenes solo cuando el usuario está a punto de verlas (cuando entran en el viewport).

<img src="imagen.webp" loading="lazy" alt="..." width="800" height="600">

Soporte navegador: 100% nativo desde 2022.

Beneficios

Reduce el peso inicial de la página.
Mejora el LCP (menos competencia por la red).
Ahorra ancho de banda del usuario.

Cuándo NO usar lazy loading

NUNCA en la imagen del hero ni en imágenes above the fold.

<!-- ❌ MAL: imagen visible al cargar la página -->
<img src="hero.webp" loading="lazy" alt="...">

<!-- ✅ BIEN: imagen del hero sin lazy + fetchpriority high -->
<img src="hero.webp" fetchpriority="high" alt="..." width="1200" height="630">

Si pones loading="lazy" en una imagen visible inicialmente, retrasas el LCP (porque el navegador no la prioriza). Es uno de los errores más graves y comunes.

Regla práctica

Posición de la imagen	`loading`
Hero / above the fold	(omitir) o `eager`
LCP candidate	(omitir) + `fetchpriority="high"`
Below the fold	`lazy`
Imágenes del footer	`lazy`

Alt text: SEO + accesibilidad

El atributo alt es obligatorio desde el punto de vista de accesibilidad (lectores de pantalla) y muy importante para SEO (Google lo usa para entender qué muestra la imagen y para Google Images).

Cómo escribir alts buenos

✅ Descriptivo y conciso

✅ <img alt="Tortilla de patatas dorada cortada a la mitad mostrando el interior jugoso">

5-15 palabras describiendo qué se ve. Sin repeticiones, sin palabras vacías.

❌ Errores comunes

<!-- 1. Genérico -->
❌ alt="img1.jpg"
❌ alt="imagen"

<!-- 2. Empezar con "imagen de" -->
❌ alt="imagen de un perro corriendo"
✅ alt="Labrador dorado corriendo en la playa"

<!-- 3. Keyword stuffing -->
❌ alt="hidratante facial mejor hidratante facial barata 2026"
✅ alt="Hidratante facial Nivea Soft de 100ml en su envase"

<!-- 4. Vacío en imágenes informativas -->
❌ <img src="grafico-ventas.png" alt="">
✅ <img src="grafico-ventas.png" alt="Gráfico de ventas Q1 2026 mostrando crecimiento del 23%">

Cuándo dejar alt vacío

alt="" es válido y necesario en imágenes puramente decorativas que no aportan información.

<!-- Icono decorativo de adorno -->
<img src="estrella-decorativa.svg" alt="" aria-hidden="true">

<!-- Foto decorativa sin contexto -->
<div class="hero">
  <img src="textura-fondo.jpg" alt="">
  <h1>Mi Empresa</h1>
</div>

Lectores de pantalla lo saltan, y Google entiende que no hay que indexarla.

Cómo aparecer en Google Images

Google Images mueve mucho tráfico, pero exige trabajo SEO específico:

1. Filename descriptivo

❌ DSC_8472.jpg
❌ image-1.png
✅ tortilla-de-patatas-tradicional.webp

Google usa el filename como señal de qué muestra la imagen.

2. Alt text con keyword natural

Como vimos arriba: descriptivo, sin stuffing.

3. Caption / texto adyacente

Google también lee el texto alrededor de la imagen para entender el contexto.

<figure>
  <img src="tortilla.webp" alt="Tortilla de patatas dorada">
  <figcaption>
    Receta tradicional de tortilla de patatas con cebolla pochada,
    cocinada a fuego lento durante 45 minutos.
  </figcaption>
</figure>

4. Schema markup `ImageObject`

Si la imagen es importante (foto principal de receta, producto, evento), añade schema:

{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "image": "https://miweb.com/tortilla.webp",
  "name": "Tortilla de patatas"
}

5. Imagen accesible

Asegúrate de que la URL de la imagen es pública (no bloqueada por robots.txt). Algunos plugins WordPress bloquean /wp-content/uploads/ por error — esto te elimina de Google Images.

# robots.txt — asegúrate de tener esta línea
Allow: /wp-content/uploads/

Genera tu robots.txt correcto con nuestro Generador de robots.txt.

6. Sitemap de imágenes (opcional)

Si gran parte de tu tráfico depende de Google Images (blogs de recetas, fotografía, decoración), genera un sitemap específico:

<url>
  <loc>https://miweb.com/receta-tortilla</loc>
  <image:image>
    <image:loc>https://miweb.com/tortilla.webp</image:loc>
    <image:title>Tortilla de patatas tradicional</image:title>
    <image:caption>Receta paso a paso con trucos profesionales</image:caption>
  </image:image>
</url>

Calidad de compresión: encontrando el punto óptimo

No hay un valor mágico, pero estos son los rangos seguros:

Tipo de imagen	Calidad recomendada (WebP)
Foto realista (paisaje, retrato)	75-85
Captura de pantalla con texto	90-95
Imagen con transparencia (logo)	95-100
Iconos pequeños	90
Imagen del hero (importante visualmente)	85-90

Siempre comprueba visualmente la imagen comprimida. Si ves artefactos (bandas, pixelación), sube la calidad.

Herramientas útiles

Compresores online

Squoosh (Google) — el mejor: WebP, AVIF, JPG, PNG, MozJPEG, etc.
TinyPNG — JPG/PNG/WebP, 20 imágenes/mes gratis.
Compressor.io — varios formatos.

Herramientas de línea de comandos

Sharp (Node.js) — la más rápida.
ImageMagick — todoterreno.
cwebp / avifenc — específicas para WebP/AVIF.

Plugins WordPress

ShortPixel — el más completo (gratis hasta 100 imágenes/mes).
Smush — fácil de usar.
Imagify — alternativa decente.
EWWW Image Optimizer — gratis ilimitado.

Servicios CDN con optimización automática

Cloudflare Polish + Mirage — convierte a WebP/AVIF on-the-fly.
Imgix — pago, pero potentísimo.
Cloudinary — gratis hasta 25 GB de tráfico/mes.

Plan de optimización paso a paso

Semana 1: Auditoría

Pasa nuestro Test de Core Web Vitals sobre tus 5 URLs más importantes.
Mira la sección “Oportunidades”: “Servir imágenes en formatos modernos”, “Codificar imágenes con eficiencia”, “Imágenes de tamaño adecuado”.
Identifica las imágenes más grandes con DevTools → Network → filtrar por Img.

Semana 2: Quick wins

Convierte tu top 10 de imágenes más pesadas a WebP/AVIF.
Añade width y height a todas las imágenes (mata el CLS).
Quita loading="lazy" del hero y elementos LCP.

Semana 3-4: Implementación masiva

Plugin/script que convierta automáticamente todas tus imágenes a WebP.
Implementa srcset/sizes en tu plantilla.
Audita los alt de todas las imágenes importantes.

Semana 5+: Refinamiento

Pre-carga el LCP: <link rel="preload"> para la imagen más importante.
Optimiza imágenes existentes con calidad ajustada por tipo de contenido.
Genera sitemap de imágenes si Google Images es relevante para ti.

Errores típicos que ves en webs reales

1. Servir imágenes 4K para mostrarlas a 600px

Resuelve con srcset y sizes.

2. Hero con `loading="lazy"`

Mata el LCP. Quítalo y añade fetchpriority="high".

3. Sin `width` y `height`

Genera CLS de 0.3+. Añádelos siempre, incluso en imágenes responsive.

4. Alt vacío o ausente

Penaliza accesibilidad y SEO. Audita y completa todas las que sean informativas.

5. Bloquear `/uploads/` en robots.txt

Te elimina de Google Images. Asegúrate de permitir explícitamente.

6. Comprimir excesivamente

Imágenes con calidad por debajo de 60 se ven feas. Sube a 80-85 mínimo.

7. PNG para fotos

PNG es para gráficos con transparencia. Para fotos, siempre WebP/AVIF/JPG. Un PNG de foto pesa 3-5x más que su equivalente WebP.

8. SVG sin minificar

Los SVG suelen tener metadatos innecesarios (Inkscape, Sketch). Minifica con SVGOMG (~40% menos peso).

Conclusión

Optimizar imágenes es de las mejores inversiones de tiempo SEO que puedes hacer:

Mejora 3 Core Web Vitals (LCP, CLS, INP indirectamente).
Aumenta tráfico desde Google Images.
Reduce factura de hosting (menos transferencia).
Mejora UX (sobre todo en móvil con conexiones lentas).

No hay que ser técnico para hacerlo: con un buen plugin WordPress o un CDN como Cloudflare, optimización automática en 10 minutos.

Tu plan de acción

Mide tu rendimiento actual con nuestro Test de Core Web Vitals.
Implementa los quick wins de la semana 2.
Mide otra vez y comprueba el impacto.
Audita el resto del SEO con nuestro Analizador SEO.
Profundiza con nuestra guía de Core Web Vitals y el checklist de auditoría on-page de 25 puntos.

Una web con imágenes bien optimizadas está en el top 10% técnico del internet hispano. Y eso es donde empieza el tráfico orgánico de verdad.