Optimización de next/image en Next.js — LCP/INP y Calidad 2025

Introducción

next/image optimiza y da estructura al layout, pero un mal uso puede mejorar LCP y empeorar INP. Dar prioridad excesiva a imágenes hero o decodificar muchas imágenes tras una acción de usuario puede ralentizar la respuesta.

Esta guía sigue el marco de INP de Optimización de Entrega de Imágenes Centrada en INP 2025 — Proteger la Experiencia con decode/priority/Coordinación de Script y sistematiza la optimización de imágenes en Next.js (App Router) desde los ángulos de layout, prioridad y coordinación de timing.

TL;DR

• LCP: usar fetchpriority="high" y preload juntos
• sizes y aspect-ratio para CLS cero
• No abusar de priority-hints. Evitar degradación INP por sobrecarga de recursos
• next/image placeholder: LQIP o CSS, evitar SVG pesados

Enlaces internos: Optimización de Entrega de Imágenes Centrada en INP 2025 — Proteger la Experiencia con decode/priority/Coordinación de Script, Sugerencias de prioridad de imagen y optimización de precarga 2025, Diseño de imágenes responsivas 2025 — Guía práctica de srcset/sizes

¿Por qué next/image afecta INP?

El navegador sigue "descarga → decodificación → layout/render". next/image ayuda a optimizar, pero puede empeorar INP si:

• LazyLoad masivo tras input → decodificación compite con eventos
• Abuso de priority → saturación de red, scripts importantes se retrasan
• sizes incorrecto → sobrecarga de decodificación, LCP e INP empeoran

Claves: tamaño adecuado, minimizar prioridad, separar timing.

Principios de diseño

• Ruta crítica: Hero/LCP con high, resto auto/lazy
• fill/sizes: elegir según layout fijo o variable
• Color: sRGB fijo, P3 solo si se verifica compatibilidad

Ejemplo de implementación

<Image src="/hero.avif" alt="" priority fetchPriority="high" sizes="100vw" />

Puntos:

• Solo LCP con priority/fetchPriority="high"
• sizes igual al layout real. Layout variable: string por breakpoint
• width/height (layout fijo) o fill + aspect-ratio (variable) para CLS cero

Antipatrones y soluciones

• priority en todas las imágenes de primer plano → solo en hero/carousel principal
• 20 thumbnails bajo el pliegue decodifican lazy tras scroll → usar rootMargin: '300px 0px'
• sizes 100vw fijo, mayor que el real → estimar ancho y usar string por breakpoint
• SVG placeholder pesado en hero → usar LQIP/CSS

Ejemplo de diseño de tamaños con next/image

Tarjeta de ancho fijo:

<Image
  src="/cards/card.avif"
  alt=""
  width={360}
  height={240}
  sizes="(max-width: 768px) 92vw, 360px"
  loading="lazy"
  decoding="async"
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
  style={{ objectFit: 'cover' }}
/>

Hero de ancho completo (variable):

<div style={{ position: 'relative', aspectRatio: '3 / 2' }}>
  <Image
    src="/hero/cover.avif"
    alt=""
    fill
    sizes="100vw"
    priority
    fetchPriority="high"
    decoding="sync"
  />
  {/* Overlay de texto, etc. */}
  <h1 className="sr-only">Nombre del producto</h1>
</div>

Notas:

• Si usas fill, el padre debe tener position: relative y aspect-ratio
• decoding="sync" solo en LCP, resto async

Recursos y preconnect/preload

preconnect solo si el CDN se usa desde el inicio. No abusar. preload solo para 1 imagen LCP.

export const metadata = {
  other: {
    link: [
      { rel: 'preconnect', href: 'https://cdn.example.com', crossOrigin: 'anonymous' },
      // { rel: 'preload', as: 'image', href: '/hero-1536.avif', imagesrcset: '/hero-768.avif 768w, /hero-1536.avif 1536w', imagesizes: '100vw' },
    ],
  },
};

Enlaces internos: Sugerencias de prioridad de imagen y optimización de precarga 2025

Estrategia de placeholders (amigable con INP)

• Objetivo: evitar CLS y mejorar percepción. No hace falta generación pesada
• Blur fuerte en hero no es necesario. El "progresivo" no mejora INP
• Usar LQIP/BlurDataURL/CSS gradiente para evitar parpadeo visual

Relacionado: Diseño de Placeholders Responsivos LQIP/SQIP/BlurHash Mejores Prácticas 2025

Optimización CDN: conversión y clave de caché

• Si usas width o format en query, unifica la clave de caché
• Evita upscale por defecto
• Si negocias DPR/formato, controla la fragmentación de caché

Relacionado: Trampas del Redimensionado en CDN Edge 2025 — El Triángulo de Escalado/Caché/Calidad, Optimización de Entrega de Imágenes en la Era Edge - Diseño CDN 2025

Medición y guardarraíles (operación real)

• Recoge INP/LCP con RUM (web-vitals). Vigila Long Task tras input
• Compara p75 tras cada deploy, detecta abuso de priority o desviaciones en sizes
• Usa snapshots en CI para detectar regresión en JSON-LD/datos estructurados

Ejemplo de hook RUM:

import { onINP, onLCP } from 'web-vitals/attribution';

onINP((m) => fetch('/rum', { method: 'POST', body: JSON.stringify({ name: m.name, value: m.value }) }));
onLCP((m) => fetch('/rum', { method: 'POST', body: JSON.stringify({ name: m.name, value: m.value }) }));

Casos de estudio (breves)

Caso 1: Hero LP + galería bajo el pliegue

• Problema: tras scroll, 16 thumbnails cargan a la vez → INP p75 sube de 320→380ms
• Solución: usar rootMargin: '300px 0px', ajustar sizes, inicializar tras requestIdleCallback
• Resultado: INP p75 baja a 250ms, LCP mejora 3%

Caso 2: Imágenes en el cuerpo del artículo

• Problema: sin sizes, sobrecarga de decodificación, scroll se traba
• Solución: calcular sizes desde el ancho del contenedor, usar decoding="async"
• Resultado: decodificación 35% más rápida, INP p75 mejora 40ms

FAQ

P. ¿Son necesarios ambos priority y fetchPriority="high"?

R. Se pueden usar juntos, pero solo en la imagen hero.

P. ¿Usar placeholder blur?

R. Útil para evitar CLS, no mejora INP. Mantenerlo ligero.

P. ¿Elegir fill o ancho fijo?

R. Si el layout es variable, usar fill + aspect-ratio; si es fijo, width/height. Siempre concretar con sizes.

Checklist para distribución

• [ ] Solo LCP con priority/fetchPriority="high"/decoding="sync"
• [ ] No LCP: loading="lazy" + decoding="async"
• [ ] sizes igual al layout (sin sobrecarga)
• [ ] Si usas fill, padre con position: relative y aspect-ratio
• [ ] No poner decode/init pesado en ventana 300–500ms tras input
• [ ] Vigilar INP/LCP con RUM, usar p75 como métrica principal