Cómo optimizar imágenes

El componente <Image> de Next.js extiende el elemento HTML <img> para proporcionar:

• Optimización de tamaño: Sirve automáticamente imágenes del tamaño correcto para cada dispositivo, usando formatos modernos como WebP.
• Estabilidad visual: Previene automáticamente el desplazamiento de diseño (layout shift) mientras las imágenes se cargan.
• Carga más rápida de páginas: Solo carga imágenes cuando entran en el viewport usando carga diferida (lazy loading) nativa del navegador, con placeholders opcionales de desenfoque (blur-up).
• Flexibilidad de recursos: Redimensiona imágenes bajo demanda, incluso imágenes almacenadas en servidores remotos.

Para comenzar a usar <Image>, impórtelo desde next/image y renderícelo dentro de su componente.

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

La propiedad src puede ser una imagen local o remota.

🎥 Video: Aprenda más sobre cómo usar next/image → YouTube (9 minutos).

Imágenes locales

Puede almacenar archivos estáticos, como imágenes y fuentes, en una carpeta llamada public en el directorio raíz. Los archivos dentro de public pueden ser referenciados por su código comenzando desde la URL base (/).

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Foto del autor"
      width={500}
      height={500}
    />
  )
}

Imágenes importadas estáticamente

También puede importar y usar archivos de imagen locales. Next.js determinará automáticamente el width y height intrínsecos de su imagen basándose en el archivo importado. Estos valores se usan para determinar la proporción de la imagen y prevenir Desplazamiento Acumulativo de Diseño (Cumulative Layout Shift) mientras su imagen se carga.

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Foto del autor"
      // width={500} proporcionado automáticamente
      // height={500} proporcionado automáticamente
      // blurDataURL="data:..." proporcionado automáticamente
      // placeholder="blur" // Opcional: efecto de desenfoque durante la carga
    />
  )
}

En este caso, Next.js espera que el archivo app/profile.png esté disponible.

Imágenes remotas

Para usar una imagen remota, puede proporcionar una cadena URL para la propiedad src.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Foto del autor"
      width={500}
      height={500}
    />
  )
}

Dado que Next.js no tiene acceso a archivos remotos durante el proceso de construcción, deberá proporcionar manualmente las propiedades width, height y opcionalmente blurDataURL. El width y height se usan para inferir la proporción correcta de la imagen y evitar desplazamientos de diseño al cargar la imagen.

Para permitir de forma segura imágenes de servidores remotos, debe definir una lista de patrones de URL admitidos en next.config.js. Sea lo más específico posible para prevenir usos maliciosos. Por ejemplo, la siguiente configuración solo permitirá imágenes de un bucket específico de AWS S3:

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config