Cómo optimizar imágenes para SEO y mejorar tu posicionamiento web

Las imágenes representan, de media, más del 50% del peso total de una página web. Si no están optimizadas, pueden hundir tu posicionamiento en Google, aumentar tu tasa de rebote y arruinar la experiencia del usuario.

En esta guía te explico todas las técnicas para que tus imágenes sumen al SEO en vez de restarlo.

Por qué las imágenes importan para el SEO

Google evalúa la experiencia del usuario como factor clave de posicionamiento. Las imágenes afectan a tres áreas críticas:

1. Velocidad de carga (Core Web Vitals): imágenes pesadas = web lenta = peor posicionamiento
2. Tráfico desde Google Imágenes: una imagen bien optimizada puede aparecer en búsquedas de imágenes
3. Experiencia del usuario: imágenes que no cargan o saltan generan abandono

Técnicas de optimización de imágenes para SEO

1. Elige el formato correcto

El formato tiene un impacto directo en el peso y la calidad:

• WebP: primera opción para la web. 25-35% más ligero que JPG
• JPG: para fotografías cuando WebP no es viable
• PNG: solo cuando necesitas transparencia
• SVG: para iconos, logos y gráficos vectoriales

Convertir JPG a WebP

Herramienta gratuita - Pruébala ahora

2. Comprime siempre

Ninguna imagen debería subirse a la web sin comprimir. Los niveles recomendados:

• Fotos (JPG/WebP): calidad 80-85%
• Gráficos (PNG): compresión sin pérdida (herramientas como OxiPNG)
• Objetivo: la imagen más ligera posible sin pérdida visual perceptible

Comprimir imagen

Herramienta gratuita - Pruébala ahora

3. Redimensiona al tamaño correcto

No sirvas una imagen de 4000px si se muestra a 800px. Reglas prácticas:

• Exporta al doble del tamaño de visualización (para pantallas retina)
• Una imagen de hero: máximo 1920px de ancho
• Imágenes de contenido: 800-1200px de ancho
• Miniaturas: 400-600px de ancho

Redimensionar imagen

Herramienta gratuita - Pruébala ahora

4. Usa atributos alt descriptivos

El atributo alt es tu principal herramienta de SEO para imágenes:

Mal ejemplo:

• alt="imagen"
• alt="foto1"
• alt="" (vacío)

Buen ejemplo:

• alt="Comparativa de peso entre JPG y WebP en una imagen de 1920x1080"
• alt="Captura de pantalla del informe de Core Web Vitals en Google Search Console"

Consejos para el alt text:

• Describe la imagen como si hablaras con alguien que no puede verla
• Incluye la keyword objetivo si es natural, sin forzar
• Mantén entre 50 y 125 caracteres
• No empieces con "imagen de" o "foto de" (ya se sobreentiende)
• Deja vacío solo si la imagen es puramente decorativa

5. Nombra los archivos correctamente

El nombre del archivo es otra señal para los buscadores:

Mal ejemplo:

• IMG_20260315_001.jpg
• foto-final-v2-definitivo.png

Buen ejemplo:

• comparativa-webp-vs-jpg.webp
• tamano-imagen-instagram-2026.jpg

Usa guiones para separar palabras, incluye keywords relevantes y sé descriptivo.

6. Define dimensiones en el HTML

Siempre especifica width y height en tus imágenes:

<img src="foto.webp" alt="Descripción" width="800" height="600" />

Esto evita el CLS (Cumulative Layout Shift): esos molestos saltos de contenido que ocurren cuando una imagen carga y empuja el texto hacia abajo. Google penaliza el CLS en sus Core Web Vitals.

7. Implementa lazy loading

El atributo loading="lazy" indica al navegador que no cargue la imagen hasta que el usuario esté cerca de verla:

<img src="foto.webp" alt="Descripción" loading="lazy" width="800" height="600" />

Importante: no uses lazy loading en la imagen principal (hero/LCP). Esa debe cargar inmediatamente con loading="eager" o simplemente sin el atributo.

8. Usa el atributo srcset para responsive

Sirve diferentes tamaños de imagen según el dispositivo:

<img
  srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  src="foto-800.webp"
  alt="Descripción"
/>

Esto asegura que un móvil no descargue una imagen de 1200px cuando solo necesita 400px.

9. Implementa un CDN de imágenes

Un CDN (Content Delivery Network) sirve las imágenes desde servidores cercanos al usuario y puede aplicar transformaciones automáticas:

• Conversión automática a WebP/AVIF
• Redimensionado según el dispositivo
• Compresión optimizada
• Cache global

Opciones populares: Cloudflare Images, Imgix, Cloudinary, Vercel Image Optimization.

10. Genera un sitemap de imágenes

Puedes incluir imágenes en tu sitemap XML para ayudar a Google a descubrirlas:

<url>
  <loc>https://ejemplo.com/pagina</loc>
  <image:image>
    <image:loc>https://ejemplo.com/foto.webp</image:loc>
    <image:title>Título descriptivo</image:title>
  </image:image>
</url>

Checklist de optimización de imágenes para SEO

Usa esta lista para verificar que tus imágenes están optimizadas:

• Formato WebP (o JPG para compatibilidad)
• Comprimidas al 80-85% de calidad
• Redimensionadas al tamaño de visualización (x2 para retina)
• Atributo alt descriptivo con keyword natural
• Nombre de archivo descriptivo con guiones
• Dimensiones width/height en el HTML
• Lazy loading en imágenes below the fold
• Sin lazy loading en la imagen LCP (above the fold)
• srcset para imágenes responsive
• Peso inferior a 200KB para imágenes de contenido

Herramientas para medir el impacto

• Google PageSpeed Insights: analiza la velocidad y sugiere mejoras de imagen
• Google Search Console: muestra el rendimiento de Core Web Vitals
• Lighthouse: auditoría detallada del rendimiento web
• WebPageTest: análisis avanzado de carga con cascada de recursos

Conclusión

Optimizar imágenes para SEO no es un lujo, es una necesidad. Con las técnicas de esta guía puedes mejorar significativamente la velocidad de tu web, tu posicionamiento y la experiencia de tus usuarios.

Los pasos más impactantes, en orden de prioridad:

1. Convierte a WebP todas las imágenes de tu web
2. Comprime al 80-85% de calidad
3. Redimensiona al tamaño necesario
4. Añade alt text descriptivo a cada imagen
5. Implementa lazy loading en imágenes no visibles

Convertir PNG a WebP

Herramienta gratuita - Pruébala ahora