🏷️ Imágenes · 📅 2026-07-05 · ⏱️ 7 min

Optimización extrema de imágenes para Core Web Vitals y velocidad web

Técnicas avanzadas de ingeniería web para reducir el Largest Contentful Paint (LCP), eliminar el Cumulative Layout Shift (CLS) y acelerar la carga en dispositivos móviles.

Las métricas Core Web Vitals y el rendimiento en el mundo real

Google evalúa la calidad de la experiencia de los usuarios en sitios web a través de tres métricas fundamentales agrupadas bajo el estándar Core Web Vitals:

Largest Contentful Paint (LCP): Mide el tiempo que tarda en hacerse visible el elemento de contenido principal de la pantalla (normalmente una imagen destacada o banner hero). Para una buena experiencia debe ocurrir en menos de 2.5 segundos.
Cumulative Layout Shift (CLS): Mide la estabilidad visual del diseño, cuantificando si los elementos se desplazan inesperadamente mientras la página carga. Debe mantenerse por debajo de 0.1.
Interaction to Next Paint (INP): Mide la latencia de respuesta ante la interacción del usuario (clics, toques en pantalla, tecleo). Debe ser inferior a 200 milisegundos.

Estrategias avanzadas de optimización de imágenes

1. Precarga del recurso LCP (Preload Hero Image)

Para imágenes que se encuentran en el primer pantallazo visible (Above the Fold), nunca utilices loading="lazy", ya que esto retrasa deliberadamente su descarga. En su lugar, utiliza una etiqueta de precarga prioritaria en el <head>:

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

2. Dimensiones explícitas para eliminar el CLS

Cuando un navegador descarga el código HTML antes de que lleguen los bytes de la imagen, si no conoce sus dimensiones exactas, reservará 0 píxeles de altura. Cuando la imagen finalmente carga, todo el texto inferior se desplaza bruscamente hacia abajo (Layout Shift). Para evitarlo:

<!-- Siempre declara width y height numéricos -->
<img src="/foto.webp" width="800" height="450" alt="Descripción" style="max-width:100%; height:auto;">

3. Imágenes adaptativas con el elemento <picture>

Permite servir formatos modernos de nueva generación (AVIF o WebP) a navegadores compatibles, manteniendo un respaldo JPG para navegadores antiguos:

<picture>
  <source srcset="/foto.avif" type="image/avif">
  <source srcset="/foto.webp" type="image/webp">
  <img src="/foto.jpg" alt="Optimización web" width="1200" height="675" loading="lazy">
</picture>

Herramientas de optimización en Minoluff

Optimiza tus recursos visuales con el Compresor de Imágenes WebP, redimensiona proporciones con la Calculadora de Aspect Ratio y convierte vectores con el Conversor SVG a PNG.