Featured image of post Optimización de imágenes con Next.js ImageFeatured image of post Optimización de imágenes con Next.js Image
NextJS

Optimización de imágenes con Next.js Image

Master Next.js image optimization with the next/image component, remote patterns, blur placeholders, responsive images, AVIF/WebP, and Core Web Vitals.

  1. Inicio
  2. Webs
  3. Optimización de imágenes con Next.js Image

Next.js Image component optimiza imágenes automáticamente: formatos modernos (WebP, AVIF), lazy loading, y dimensiones responsive.

next/image

import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" />

Optimización en tiempo de build o bajo demanda (servidor de optimización).

Formatos y calidad

Next.js sirve WebP o AVIF si el navegador lo soporta. quality (1-100, default 75). sizes para imágenes responsive. priority para LCP.

Remote patterns

Configura remotePatterns en next.config.js para permitir imágenes de dominios externos. Protege contra abusos del optimizador.

Imágenes estáticas

Para imágenes locales, importa directamente: import hero from './hero.jpg'. Next.js conoce las dimensiones automáticamente del archivo.

©2022 - 2026 Commentary of Takao