SEO e imágenes: las reglas de oro para mejorar tus Core Web Vitals

Cuando la imagen dicta tu posicionamiento en Google

Desde la introducción de los Core Web Vitals por parte de Google, la velocidad de carga ya no es un simple extra de usabilidad: es un criterio de posicionamiento SEO directo. Y el gran culpable de una puntuación Core Web Vitals en rojo es casi siempre el mismo indicador: el LCP (Largest Contentful Paint).

El LCP mide el tiempo necesario para mostrar el elemento visible más grande de la pantalla (normalmente el banner «Hero» o la imagen principal del producto). Si tarda más de 2,5 segundos en aparecer, Google te penaliza, y tus competidores cuya misma página carga en 1,8 s te adelantan en las SERP.

Los 3 Core Web Vitals que debes conocer

Métrica	Mide	Umbral «Good» de Google
LCP (Largest Contentful Paint)	Tiempo de visualización del elemento más grande	≤ 2,5 s
INP (Interaction to Next Paint)	Latencia de las interacciones del usuario	≤ 200 ms
CLS (Cumulative Layout Shift)	Estabilidad visual (saltos de maquetación)	≤ 0,1

De los tres, dos están influidos por las imágenes:

• el LCP (imagen hero pesada = LCP elevado);
• el CLS (imagen sin dimensiones = salto de layout en el momento de la carga).

El nuevo rey: el formato AVIF

Ya conoces el JPG, dominas el WebP. Es hora de pasar al siguiente nivel.

El AVIF (AV1 Image File Format) es el códec de nueva generación respaldado por Netflix, Google y Apple. Su eficiencia es brutal: un archivo AVIF es:

• de media un 50 % más ligero que un JPG a calidad visual equivalente;
• un 20 % más ligero que un WebP;
• superior en la gestión de los artefactos de compresión (menos bandas de color en los degradados, menos bloques JPEG en las zonas uniformes);
• compatible con la transparencia de 10 bits (frente a 8 bits en PNG/WebP).

Si tu LCP es una imagen de cabecera, pasarla de JPG a AVIF es el «Quick Win» de SEO más potente que puedes implementar hoy, sin tocar el resto de tu código.

La etiqueta <picture>: servir AVIF con fallback

El AVIF es compatible con ~92 % de los navegadores en mayo de 2026, pero aún no con todas las versiones de Safari. La mejor práctica consiste en servir el AVIF de forma prioritaria, con un fallback a WebP y luego a JPG:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…"
       width="1920" height="1080"
       loading="eager" fetchpriority="high">
</picture>

Puntos clave de esta estructura:

• width y height explícitos → evitan el CLS al reservar el espacio antes de la carga de la imagen;
• loading="eager" en la imagen principal (por encima del pliegue) → es contraproducente usar lazy en la imagen LCP;
• fetchpriority="high" → indica al navegador que priorice esta descarga sobre los demás recursos.

Para las imágenes por debajo del pliegue (catálogo, artículos de blog), lo contrario: loading="lazy" para no bloquear el LCP de la zona visible.

Medir para gestionar: las herramientas

Antes y después de cada optimización, mide:

• PageSpeed Insights (pagespeed.web.dev) → puntuación Lighthouse + datos CrUX (Chrome User Experience Report) en condiciones reales;
• GTmetrix → cascada detallada de las peticiones, identificación del archivo exacto que lastra el LCP;
• WebPageTest.org → pruebas multiubicación y multinavegador;
• Chrome DevTools → Performance → Web Vitals → medición local en condiciones de desarrollo.

El objetivo mínimo para el SEO: el 75 % de las visitas en zona verde en los Core Web Vitals (umbral de cambio de Google).

La arquitectura «Zero-Upload» para los webmasters

Optimizar cientos de imágenes para un cliente plantea un reto técnico y ético. Usar API de terceros o conversores en línea clásicos implica subir la propiedad intelectual de tus clientes a servidores desconocidos, con frustrantes límites de peso, y un riesgo de RGPD importante si las imágenes contienen personas identificables.

El futuro está en el Client-Side Processing (procesamiento del lado del cliente). Usando las tecnologías WebAssembly, ahora es posible compilar códecs complejos (como libavif, libheif, mozjpeg) para hacerlos funcionar directamente en el navegador del webmaster.

Ninguna imagen sale de la máquina del profesional. Ningún riesgo de fuga. Ningún límite de peso más allá de la RAM disponible.

Checklist de optimización SEO de imágenes

Antes de cada publicación:

1. Formato adecuado: AVIF (o WebP como fallback) para las imágenes web, JPG únicamente por retrocompatibilidad;
2. Dimensiones calibradas: no más anchas que la visualización real (1200 px máx. para el contenido de un artículo, 1920 px para los hero);
3. Calidad 80–85 en las imágenes comprimidas;
4. width y height explícitos en HTML → anti-CLS;
5. loading="lazy" fuera de la zona visible, eager para la imagen LCP;
6. alt descriptivo (SEO + accesibilidad);
7. Nombre de archivo descriptivo (vestido-rojo-seda-rebajas.avif > IMG_8421.jpg).

Pon tu sitio a la altura de las normas de Google (al instante y gratis)

Prueba la potencia de la conversión local. Toma la imagen más pesada de tu página de inicio y conviértela a AVIF con nuestro motor WebAssembly. Lo ejecuta la RAM de tu propia máquina: cero subidas, seguridad absoluta para los assets de tus clientes y archivos finales perfectos para validar tus auditorías de Core Web Vitals.

Escrito por Nikola Markovic · publicado el 19 de mayo de 2026.