<Pikkx/>

Cómo Optimizar Imágenes para Core Web Vitals en 2026

Las imágenes son la causa #1 de LCP lento. Aprende cómo comprimir, redimensionar y servir imágenes correctamente para pasar Core Web Vitals y clasificar más alto en Google.

Cristian Peña5 min read
Core Web VitalsLCPPerformanceSEO

Por qué las imágenes son el mayor problema de Core Web Vitals

Los Core Web Vitals de Google miden tres cosas: qué tan rápido carga tu página (LCP), qué tan estable es visualmente (CLS) y qué tan responsiva se siente (INP). Las imágenes afectan directamente dos de esas tres.

Según el Chrome User Experience Report, solo aproximadamente el 66% de los sitios web pasan el umbral de LCP de 2.5 segundos. ¿La razón número uno del fallo? Imágenes no optimizadas. La optimización de imágenes sola puede mejorar el LCP en un 40-60% en la mayoría de los sitios web.

Para más información sobre Core Web Vitals, consulta la documentación oficial de Google.

Esa es una oportunidad enorme. Si tus competidores están en el 34% que fallan, obtener tus imágenes correctas te da una ventaja de clasificación medible.

Cómo las imágenes afectan cada métrica

Largest Contentful Paint (LCP)

LCP mide cuándo termina de renderizar el elemento visible más grande. En la mayoría de las páginas, ese elemento es una imagen — un banner hero, una foto de producto o una imagen destacada en una publicación de blog.

Google espera que el LCP esté por debajo de 2.5 segundos. Si tu imagen hero es un JPEG de 2MB a 4000px de ancho sirviéndose a una pantalla móvil de 375px, estás fallando esta métrica incluso antes de que el resto de la página cargue.

Cumulative Layout Shift (CLS)

CLS mide la estabilidad visual. Las imágenes sin atributos width y height explícitos causan cambios de diseño — el navegador no sabe cuánto espacio reservar hasta que la imagen se descarga, así que todo salta alrededor.

<!-- Causa cambio de diseño — el navegador no conoce las dimensiones -->
<img src="/hero.jpg" alt="Hero" />

<!-- Previene cambio de diseño — el navegador reserva espacio -->
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />

Esta es la reparación de Core Web Vitals más fácil que puedes hacer. Toma 10 segundos por imagen y el impacto es inmediato.

Las 4 optimizaciones de mayor impacto

1. Sirve imágenes en el formato correcto

WebP produce archivos 25-34% más pequeños que JPEG a calidad visual equivalente, con más del 97% de soporte global de navegador a partir de 2026. No hay razón para servir JPEG ya, a menos que estés apuntando a navegadores extremadamente antiguos.

Según la investigación de Google, las imágenes optimizadas pueden reducir los tiempos de carga de página hasta en un 50%.

Para la mayoría de las imágenes web, convierte a WebP a calidad 75-85. Obtendrás resultados visualmente idénticos a una fracción del tamaño de archivo.

Puedes convertir imágenes a WebP directamente en tu navegador con Pikkx — sin subidas, sin procesamiento de servidor. Tus imágenes nunca abandonan tu dispositivo.

2. Redimensiona a las dimensiones de visualización reales

Este es el error que desperdicia la mayoría del ancho de banda. Si tu diseño muestra una imagen a 800px de ancho, no sirvas un original de 3000px. Redimencionala para que coincida.

Para diseños responsivos, usa srcset para servir diferentes tamaños en diferentes breakpoints:

<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  alt="Imagen hero"
  width="1200"
  height="600"
/>

3. Precarga tu imagen LCP

El navegador no puede comenzar a descargar tu imagen hero hasta que la descubre en el HTML. Para cuando analiza el CSS y JS, se desperdician segundos preciosos. Precargar le indica al navegador que comience a buscar inmediatamente:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Esta sola línea puede reducir tu LCP en 200-500ms.

4. Lazy carga todo lo demás

Solo la imagen above-the-fold necesita cargar inmediatamente. Todo lo que esté below-the-fold debería usar lazy loading:

<!-- Above the fold: carga inmediatamente -->
<img src="/hero.webp" alt="Hero" loading="eager" fetchpriority="high" />

<!-- Below the fold: carga cuando se desplaza a la vista -->
<img src="/feature.webp" alt="Feature" loading="lazy" />

Midiendo tus resultados

Después de optimizar, verifica tus mejoras con estas herramientas:

PageSpeed Insights — La herramienta oficial de Google. Ingresa tu URL y obtén datos de campo (usuarios reales) y datos de laboratorio (simulados). Enfócate en los datos de campo, que es lo que afecta las clasificaciones.

Pestaña Performance de Chrome DevTools — Abre DevTools, ve a Performance, ejecuta un perfil y busca el marcador "LCP" en la línea de tiempo. Te indica exactamente qué elemento es tu LCP y cuánto tiempo tomó.

Extensión Chrome de Web Vitals — Te da puntajes CWV en tiempo real mientras navegas tu propio sitio.

Lista de verificación rápida

Aquí está lo que hacer ahora, ordenado por impacto:

  1. Convierte todas las imágenes a WebP (reducción de tamaño 25-34%)
  2. Agrega width y height a cada etiqueta <img> (corrige CLS)
  3. Redimensiona imágenes para que coincidan con las dimensiones de visualización (mayor ahorro de ancho de banda)
  4. Precarga tu imagen LCP con fetchpriority="high"
  5. Lazy carga todas las imágenes below-the-fold
  6. Elimina metadatos innecesarios (los datos EXIF añaden kilobytes)

Empieza con las imágenes en tus páginas de mayor tráfico. Ejecuta PageSpeed Insights antes y después, y verás los números moverse.

Optimiza tus imágenes en segundos

Comprime, redimensiona y convierte a WebP — 100% en tu navegador. Sin subidas, sin cuenta.

Get Started