Optimizar imágenes para SEO: nombres, alt, formato y Core Web Vitals

Optimizar imágenes para SEO implica que Google entienda de qué van (nombres, alt, contexto) y que no lastren la velocidad de la página. Las imágenes pueden posicionar en Google Imágenes y en resultados mixtos; además, su peso y carga afectan los Core Web Vitals. En esta guía verás nombres, alt, formatos y buenas prácticas de carga.

Objetivo: que tus imágenes aporten en búsqueda y no penalicen la experiencia ni el rendimiento.

Por qué importan las imágenes en SEO

• Google Imágenes: contenido visual bien etiquetado puede aparecer en búsquedas de imágenes y en resultados mixtos (fotos, productos).
• Experiencia y Core Web Vitals: imágenes muy pesadas o mal configuradas empeoran LCP y CLS; la velocidad y la estabilidad visual son señales de calidad.
• Accesibilidad: el alt ayuda a usuarios con lectores de pantalla y coincide con lo que Google usa para interpretar la imagen.

Optimizar imágenes es a la vez SEO de contenido (qué representa) y técnico (cómo se sirve).

Nombres de archivo

Usa nombres descriptivos y legibles:

• Palabras clave o tema de la imagen, separadas por guiones.
• Ejemplo: core-web-vitals-metricas-seo.webp en lugar de DSC_1234.jpg.
• Evita espacios, acentos problemáticos en URLs y nombres genéricos.

Así Google y los usuarios tienen más contexto antes de abrir la imagen, y la URL de la imagen puede ser más relevante en resultados.

Atributo alt (texto alternativo)

El alt describe la imagen para buscadores y accesibilidad:

• Descriptivo: qué se ve o qué representa en el contexto de la página.
• Breve: una frase clara, sin rellenar de keywords.
• Relevante: alineado con el tema del contenido (y con la keyword si aplica de forma natural).
• Decorativas: si la imagen no aporta información (iconos, ornamentos), usa alt="" para que los lectores de pantalla la ignoren.

No uses el mismo alt en todas las imágenes de la página; cada una debe tener su propia descripción.

Formato y tamaño

• Formato: WebP (o AVIF donde haya soporte) suele dar mejor relación calidad/tamaño que JPEG o PNG. Usa JPEG para fotos y PNG para gráficos con transparencia; sirve WebP como versión principal cuando el navegador lo admita.
• Tamaño: comprime sin perder calidad útil. Herramientas como Squoosh, ImageOptim o los pipelines de Next.js (next/image) ayudan. Objetivo: que la imagen sea lo más ligera posible manteniendo una calidad aceptable.
• Dimensiones: indica width y height en el HTML (o en el componente de imagen) para evitar CLS: el navegador reserva el espacio y la página no “salta” al cargar la imagen.

Lazy loading

Lazy loading retrasa la carga de imágenes hasta que se acercan al viewport (loading="lazy" en <img>). Beneficios:

• Menos peso en la carga inicial; puede mejorar LCP si la imagen más grande está above the fold.
• Las imágenes below the fold se cargan cuando el usuario hace scroll.

No uses lazy en la imagen principal above the fold (por ejemplo el hero); ahí interesa que cargue cuanto antes. Para el resto, lazy loading es recomendable y no perjudica el SEO si la imagen sigue siendo accesible para el rastreador.

Imágenes y Core Web Vitals

• LCP: la imagen más grande visible al cargar suele ser candidata a LCP. Optimízala (formato, tamaño, CDN) y evita lazy loading en esa imagen.
• CLS: reserva espacio con width/height para que el layout no cambie cuando cargue la imagen.
• Dimensiones responsivas: sirve tamaños adecuados (srcset) para que en móvil no se descarguen imágenes de escritorio; mejora tiempo de carga y uso de datos.

Checklist rápido

1. Nombre de archivo descriptivo y con guiones.
2. Alt único, descriptivo y relevante por imagen; vacío si es decorativa.
3. Formato moderno (WebP/AVIF) y compresión sin perder calidad.
4. Width y height para evitar CLS.
5. Lazy loading en imágenes below the fold; sin lazy en la imagen principal de arriba.
6. Tamaños responsivos (srcset) cuando aplique.

Con esto, las imágenes contribuyen al SEO y a unos Core Web Vitals sólidos.