Image (Legado)

A partir de Next.js 13, el componente next/image fue reescrito para mejorar tanto el rendimiento como la experiencia del desarrollador. Para proporcionar una solución de actualización compatible con versiones anteriores, el antiguo next/image fue renombrado a next/legacy/image.

Consulta la nueva Referencia de API de next/image

Comparación

En comparación con next/legacy/image, el nuevo componente next/image tiene los siguientes cambios:

Elimina el envoltorio <span> alrededor de <img> en favor de la relación de aspecto nativa calculada
Añade soporte para la propiedad canónica style
- Elimina la propiedad layout en favor de style o className
- Elimina la propiedad objectFit en favor de style o className
- Elimina la propiedad objectPosition en favor de style o className
Elimina la implementación de IntersectionObserver en favor de la carga diferida nativa
- Elimina la propiedad lazyBoundary ya que no hay un equivalente nativo
- Elimina la propiedad lazyRoot ya que no hay un equivalente nativo
Elimina la configuración loader en favor de la propiedad loader
Cambia la propiedad alt de opcional a requerida
Cambia el callback onLoadingComplete para recibir una referencia al elemento <img>

Propiedades Requeridas

El componente <Image /> requiere las siguientes propiedades.

src

Debe ser uno de los siguientes:

Un archivo de imagen importado estáticamente
Una cadena de ruta. Puede ser una URL externa absoluta o una ruta interna dependiendo de la propiedad loader o la configuración del loader.

Cuando se usa el loader por defecto, también considera lo siguiente para las imágenes fuente:

Cuando src es una URL externa, también debes configurar remotePatterns
Cuando src es animada o no es un formato conocido (JPEG, PNG, WebP, AVIF, GIF, TIFF), la imagen se servirá tal cual
Cuando src es formato SVG, será bloqueada a menos que unoptimized o dangerouslyAllowSVG estén habilitados

width

La propiedad width puede representar el ancho renderizado o el ancho original en píxeles, dependiendo de las propiedades layout y sizes.

Cuando se usa layout="intrinsic" o layout="fixed", la propiedad width representa el ancho renderizado en píxeles, por lo que afectará el tamaño de la imagen.

Cuando se usa layout="responsive" o layout="fill", la propiedad width representa el ancho original en píxeles, por lo que solo afectará la relación de aspecto.

La propiedad width es requerida, excepto para imágenes importadas estáticamente, o aquellas con layout="fill".

height

La propiedad height puede representar la altura renderizada o la altura original en píxeles, dependiendo de las propiedades layout y sizes.

Cuando se usa layout="intrinsic" o layout="fixed", la propiedad height representa la altura renderizada en píxeles, por lo que afectará el tamaño de la imagen.

Cuando se usa layout="responsive" o layout="fill", la propiedad height representa la altura original en píxeles, por lo que solo afectará la relación de aspecto.

La propiedad height es requerida, excepto para imágenes importadas estáticamente, o aquellas con layout="fill".

Propiedades Opcionales

El componente <Image /> acepta varias propiedades adicionales más allá de las requeridas. Esta sección describe las propiedades más comúnmente usadas del componente Image. Encuentra detalles sobre propiedades menos usadas en la sección Propiedades Avanzadas.

layout

El comportamiento de diseño de la imagen a medida que cambia el tamaño del viewport.

`layout`	Comportamiento	`srcSet`	`sizes`	Tiene envoltorio y ajustador
`intrinsic` (default)	Escala hacia abajo para ajustarse al contenedor, hasta el tamaño de la imagen	`1x`, `2x` (basado en imageSizes)	N/A	sí
`fixed`	Tamaño exacto según `width` y `height`	`1x`, `2x` (basado en imageSizes)	N/A	sí
`responsive`	Escala para ajustarse al ancho del contenedor	`640w`, `750w`, ... `2048w`, `3840w` (basado en imageSizes y deviceSizes)	`100vw`	sí
`fill`	Crece en ambos ejes X e Y para llenar el contenedor	`640w`, `750w`, ... `2048w`, `3840w` (basado en imageSizes y deviceSizes)	`100vw`	sí

Demo del layout intrinsic (predeterminado)
- Cuando es intrinsic, la imagen escalará las dimensiones hacia abajo para viewports más pequeños, pero mantendrá las dimensiones originales para viewports más grandes.
Demo del layout fixed
- Cuando es fixed, las dimensiones de la imagen no cambiarán con el viewport (sin capacidad de respuesta), similar al elemento nativo img.
Demo del layout responsive
- Cuando es responsive, la imagen escalará las dimensiones hacia abajo para viewports más pequeños y hacia arriba para viewports más grandes.
- Asegúrate de que el elemento padre use display: block en su hoja de estilos.
Demo del layout fill
- Cuando es fill, la imagen se estirará tanto en ancho como en alto a las dimensiones del elemento padre, siempre que este tenga posición relativa.
- Esto generalmente se combina con la propiedad objectFit.
- Asegúrate de que el elemento padre tenga position: relative en su hoja de estilos.
Demo de imagen de fondo

loader

Una función personalizada utilizada para resolver URLs. Establecer el loader como una propiedad en el componente Image anula el loader predeterminado definido en la sección images de next.config.js.

Un loader es una función que devuelve una cadena URL para la imagen, dados los siguientes parámetros:

src
width
quality

Aquí hay un ejemplo de uso de un loader personalizado:

import Image from 'next/legacy/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

sizes

Una cadena que proporciona información sobre el ancho de la imagen en diferentes breakpoints. El valor de sizes afectará significativamente el rendimiento de las imágenes que usen layout="responsive" o layout="fill". Será ignorado para imágenes que usen layout="intrinsic" o layout="fixed".

La propiedad sizes tiene dos propósitos importantes relacionados con el rendimiento de la imagen:

Primero, el valor de sizes es utilizado por el navegador para determinar qué tamaño de imagen descargar, del conjunto de fuentes generado automáticamente por next/legacy/image. Cuando el navegador elige, aún no conoce el tamaño de la imagen en la página, por lo que selecciona una imagen que sea del mismo tamaño o más grande que el viewport. La propiedad sizes te permite indicar al navegador que la imagen será en realidad más pequeña que el ancho completo de la pantalla. Si no especificas un valor sizes, se usará un valor predeterminado de 100vw (ancho completo de la pantalla).

Segundo, el valor de sizes se analiza y se utiliza para recortar los valores en el conjunto de fuentes creado automáticamente. Si la propiedad sizes incluye tamaños como 50vw, que representan un porcentaje del ancho del viewport, entonces el conjunto de fuentes se recorta para no incluir valores que sean demasiado pequeños como para ser necesarios.

Por ejemplo, si sabes que tu estilo hará que una imagen tenga el ancho completo en dispositivos móviles, un diseño de 2 columnas en tablets y un diseño de 3 columnas en escritorios, deberías incluir una propiedad sizes como la siguiente:

import Image from 'next/legacy/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      layout="fill"
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)

Este ejemplo de sizes podría tener un efecto dramático en las métricas de rendimiento. Sin el 33vw en sizes, la imagen seleccionada del servidor sería 3 veces más ancha de lo necesario. Como el tamaño del archivo es proporcional al cuadrado del ancho, sin sizes el usuario descargaría una imagen que es 9 veces más grande de lo necesario.

Aprende más sobre srcset y sizes:

web.dev
mdn

quality

La calidad de la imagen optimizada, un entero entre 1 y 100 donde 100 es la mejor calidad. Por defecto es 75.

priority

Cuando es verdadero, la imagen se considerará de alta prioridad y se precargará. La carga diferida se desactiva automáticamente para imágenes que usan priority.

Deberías usar la propiedad priority en cualquier imagen detectada como el elemento Largest Contentful Paint (LCP). Puede ser apropiado tener múltiples imágenes con prioridad, ya que diferentes imágenes pueden ser el elemento LCP para diferentes tamaños de viewport.

Solo debe usarse cuando la imagen es visible sin hacer scroll. Por defecto es false.

placeholder

Un marcador de posición para usar mientras la imagen se carga. Los valores posibles son blur o empty. Por defecto es empty.

Cuando es blur, se usará la propiedad blurDataURL como marcador de posición. Si src es un objeto de una importación estática y la imagen importada es .jpg, .png, .webp, o .avif, entonces blurDataURL se llenará automáticamente.

Para imágenes dinámicas, debes proporcionar la propiedad blurDataURL. Soluciones como Plaiceholder pueden ayudar con la generación de base64.

Cuando es empty, no habrá marcador de posición mientras la imagen se carga, solo espacio vacío.

Pruébalo:

Propiedades Avanzadas

En algunos casos, puede que necesites un uso más avanzado. El componente <Image /> acepta opcionalmente las siguientes propiedades avanzadas.

style

Permite pasar estilos CSS al elemento de imagen subyacente.

Ten en cuenta que todos los modos de layout aplican sus propios estilos al elemento de imagen, y estos estilos automáticos tienen prioridad sobre la propiedad style.

También recuerda que las propiedades requeridas width y height pueden interactuar con tu estilo. Si usas estilos para modificar el width de una imagen, debes establecer también el estilo height="auto", o tu imagen se distorsionará.

objectFit

Define cómo la imagen se ajustará a su contenedor padre cuando se use layout="fill".

Este valor se pasa a la propiedad CSS object-fit para la imagen src.

objectPosition

Define cómo se posiciona la imagen dentro de su elemento padre cuando se usa layout="fill".

Este valor se pasa a la propiedad CSS object-position aplicada a la imagen.

onLoadingComplete

Una función de callback que se invoca una vez que la imagen se ha cargado completamente y se ha eliminado el marcador de posición.

La función onLoadingComplete acepta un parámetro, un objeto con las siguientes propiedades:

loading

El comportamiento de carga de la imagen. Por defecto es lazy.

Cuando es lazy, difiere la carga de la imagen hasta que alcanza una distancia calculada desde el viewport.

Cuando es eager, carga la imagen inmediatamente.

Aprende más

blurDataURL

Una URL de datos para usar como imagen de marcador de posición antes de que la imagen src se cargue correctamente. Solo tiene efecto cuando se combina con placeholder="blur".

Debe ser una imagen codificada en base64. Se ampliará y difuminará, por lo que se recomienda una imagen muy pequeña (10px o menos). Incluir imágenes más grandes como marcadores de posición puede perjudicar el rendimiento de tu aplicación.

Pruébalo:

También puedes generar una URL de datos de color sólido para que coincida con la imagen.

lazyBoundary

Una cadena (con sintaxis similar a la propiedad margin) que actúa como el cuadro delimitador utilizado para detectar la intersección del viewport con la imagen y activar la carga diferida. Por defecto es "200px".

Si la imagen está anidada en un elemento padre desplazable que no es el documento raíz, también deberás asignar la propiedad lazyRoot.

Aprende más

lazyRoot

Una Ref de React que apunta al elemento padre desplazable. Por defecto es null (el viewport del documento).

La Ref debe apuntar a un elemento DOM o a un componente React que reenvíe la Ref al elemento DOM subyacente.

Ejemplo apuntando a un elemento DOM

import Image from 'next/legacy/image'
import React from 'react'

const Example = () => {
  const lazyRoot = React.useRef(null)

  return (
    <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
    </div>
  )
}

Ejemplo apuntando a un componente React

import Image from 'next/legacy/image'
import React from 'react'

const Container = React.forwardRef((props, ref) => {
  return (
    <div ref={ref} style={{ overflowX: 'scroll', width: '500px' }}>
      {props.children}
    </div>
  )
})

const Example = () => {
  const lazyRoot = React.useRef(null)

  return (
    <Container ref={lazyRoot}>
      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
    </Container>
  )
}

Aprende más

unoptimized

Cuando es true, la imagen fuente se servirá tal cual desde src sin cambiar calidad, tamaño o formato. Por defecto es false.

Esto es útil para imágenes que no se benefician de la optimización, como imágenes pequeñas (menos de 1KB), imágenes vectoriales (SVG) o imágenes animadas (GIF).

import Image from 'next/image'

const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}

Desde Next.js 12.3.0, esta propiedad puede asignarse a todas las imágenes actualizando next.config.js con la siguiente configuración:

next.config.js

module.exports = {
  images: {
    unoptimized: true,
  },
}

Otras Propiedades

Otras propiedades del componente <Image /> se pasarán al elemento img subyacente, con excepción de las siguientes:

srcSet. Utilice Tamaños de Dispositivo en su lugar.
ref. Utilice onLoadingComplete en su lugar.
decoding. Siempre es "async".

Opciones de Configuración

Patrones Remotos

Para proteger su aplicación de usuarios malintencionados, se requiere configuración para usar imágenes externas. Esto asegura que solo imágenes externas de su cuenta puedan servirse desde la API de Optimización de Imágenes de Next.js. Estas imágenes externas pueden configurarse con la propiedad remotePatterns en su archivo next.config.js, como se muestra a continuación:

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
        search: '',
      },
    ],
  },
}

Bueno saber: El ejemplo anterior asegurará que la propiedad src de next/legacy/image debe comenzar con https://example.com/account123/ y no debe tener una cadena de consulta. Cualquier otro protocolo, hostname, puerto o ruta no coincidente responderá con 400 Bad Request.

A continuación se muestra un ejemplo de la propiedad remotePatterns en el archivo next.config.js usando un patrón comodín en hostname:

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
        port: '',
        search: '',
      },
    ],
  },
}

Bueno saber: El ejemplo anterior asegurará que la propiedad src de next/legacy/image debe comenzar con https://img1.example.com o https://me.avatar.example.com o cualquier número de subdominios. No puede tener un puerto o cadena de consulta. Cualquier otro protocolo o hostname no coincidente responderá con 400 Bad Request.

Los patrones comodín pueden usarse tanto para pathname como para hostname y tienen la siguiente sintaxis:

* coincide con un solo segmento de ruta o subdominio
** coincide con cualquier número de segmentos de ruta al final o subdominios al principio

La sintaxis ** no funciona en medio del patrón.

Bueno saber: Al omitir protocol, port, pathname o search, entonces se implica el comodín **. Esto no se recomienda porque puede permitir que actores malintencionados optimicen URLs que no tenía intención de permitir.

A continuación se muestra un ejemplo de la propiedad remotePatterns en el archivo next.config.js usando search:

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com',
        search: '?v=1727111025337',
      },
    ],
  },
}

Bueno saber: El ejemplo anterior asegurará que la propiedad src de next/legacy/image debe comenzar con https://assets.example.com y debe tener exactamente la cadena de consulta ?v=1727111025337. Cualquier otro protocolo o cadena de consulta responderá con 400 Bad Request.

Dominios

Advertencia: Obsoleto desde Next.js 14 en favor de remotePatterns estrictos para proteger su aplicación de usuarios malintencionados. Solo use domains si posee todo el contenido servido desde el dominio.

Similar a remotePatterns, la configuración domains puede usarse para proporcionar una lista de hostnames permitidos para imágenes externas.

Sin embargo, la configuración domains no admite coincidencia de patrones comodín y no puede restringir protocolo, puerto o ruta.

A continuación se muestra un ejemplo de la propiedad domains en el archivo next.config.js:

next.config.js

module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

Configuración del Loader

Si desea usar un proveedor en la nube para optimizar imágenes en lugar de usar la API de Optimización de Imágenes integrada de Next.js, puede configurar el loader y el prefijo path en su archivo next.config.js. Esto le permite usar URLs relativas para el src de Image y generar automáticamente la URL absoluta correcta para su proveedor.

next.config.js

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

Loaders Integrados

Los siguientes proveedores de optimización de imágenes en la nube están incluidos:

Predeterminado: Funciona automáticamente con next dev, next start o un servidor personalizado
Vercel: Funciona automáticamente cuando implementa en Vercel, no se requiere configuración. Aprenda más
Imgix: loader: 'imgix'
Cloudinary: loader: 'cloudinary'
Akamai: loader: 'akamai'
Personalizado: loader: 'custom' use un proveedor en la nube personalizado implementando la propiedad loader en el componente next/legacy/image

Si necesita un proveedor diferente, puede usar la propiedad loader con next/legacy/image.

Las imágenes no pueden optimizarse en tiempo de compilación usando output: 'export', solo bajo demanda. Para usar next/legacy/image con output: 'export', necesitará usar un loader diferente al predeterminado. Lea más en la discusión.

Avanzado

La siguiente configuración es para casos de uso avanzados y generalmente no es necesaria. Si elige configurar las propiedades a continuación, anulará cualquier cambio a los valores predeterminados de Next.js en futuras actualizaciones.

Tamaños de Dispositivo

Si conoce los anchos de dispositivo esperados de sus usuarios, puede especificar una lista de puntos de interrupción de ancho de dispositivo usando la propiedad deviceSizes en next.config.js. Estos anchos se usan cuando el componente next/legacy/image usa layout="responsive" o layout="fill" para asegurar que se sirva la imagen correcta para el dispositivo del usuario.

Si no se proporciona configuración, se usa el valor predeterminado a continuación.

next.config.js

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

Tamaños de Imagen

Puede especificar una lista de anchos de imagen usando la propiedad images.imageSizes en su archivo next.config.js. Estos anchos se concatenan con la matriz de tamaños de dispositivo para formar la matriz completa de tamaños utilizados para generar srcsets de imagen.

La razón por la que hay dos listas separadas es que imageSizes solo se usa para imágenes que proporcionan una propiedad sizes, lo que indica que la imagen es menor que el ancho completo de la pantalla. Por lo tanto, los tamaños en imageSizes deben ser todos más pequeños que el tamaño más pequeño en deviceSizes.

Si no se proporciona configuración, se usa el valor predeterminado a continuación.

next.config.js

module.exports = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

Formatos Aceptables

La API de Optimización de Imágenes predeterminada detectará automáticamente los formatos de imagen admitidos por el navegador a través del encabezado Accept de la solicitud para determinar el mejor formato de salida.

Si el encabezado Accept coincide con más de uno de los formatos configurados, se usa la primera coincidencia en la matriz. Por lo tanto, el orden de la matriz importa. Si no hay coincidencia (o la imagen fuente es animada), la API de Optimización de Imágenes recurrirá al formato original de la imagen.

Si no se proporciona configuración, se usa el valor predeterminado a continuación.

next.config.js

module.exports = {
  images: {
    formats: ['image/webp'],
  },
}

Puede habilitar el soporte AVIF, que recurrirá al formato original de la imagen src si el navegador no admite AVIF:

next.config.js

module.exports = {
  images: {
    formats: ['image/avif'],
  },
}

Bueno saber:

Todavía recomendamos usar WebP para la mayoría de los casos de uso.

AVIF generalmente tarda un 50% más en codificarse pero se comprime un 20% más en comparación con WebP. Esto significa que la primera vez que se solicita una imagen, generalmente será más lento y luego las solicitudes posteriores que están en caché serán más rápidas.

Si aloja usted mismo con un Proxy/CDN frente a Next.js, debe configurar el Proxy para reenviar el encabezado Accept.

Comportamiento del Caché

Lo siguiente describe el algoritmo de caché para el loader predeterminado. Para todos los demás loaders, consulte la documentación de su proveedor en la nube.

Las imágenes se optimizan dinámicamente al solicitarse y se almacenan en el directorio <distDir>/cache/images. El archivo de imagen optimizado se servirá para solicitudes posteriores hasta que se alcance la expiración. Cuando se realiza una solicitud que coincide con un archivo en caché pero expirado, la imagen expirada se sirve inmediatamente como obsoleta. Luego, la imagen se optimiza nuevamente en segundo plano (también llamado revalidación) y se guarda en el caché con la nueva fecha de expiración.

El estado del caché de una imagen se puede determinar leyendo el valor del encabezado de respuesta x-nextjs-cache (x-vercel-cache cuando se implementa en Vercel). Los valores posibles son los siguientes:

MISS - la ruta no está en el caché (ocurre como máximo una vez, en la primera visita)
STALE - la ruta está en el caché pero excedió el tiempo de revalidación, por lo que se actualizará en segundo plano
HIT - la ruta está en el caché y no ha excedido el tiempo de revalidación

La expiración (o más bien Max Age) se define por la configuración minimumCacheTTL o el encabezado Cache-Control de la imagen upstream, el que sea mayor. Específicamente, se usa el valor max-age del encabezado Cache-Control. Si se encuentran tanto s-maxage como max-age, entonces se prefiere s-maxage. El max-age también se pasa a cualquier cliente descendente, incluidos CDN y navegadores.

Puede configurar minimumCacheTTL para aumentar la duración del caché cuando la imagen upstream no incluye el encabezado Cache-Control o el valor es muy bajo.
Puede configurar deviceSizes y imageSizes para reducir el número total de imágenes generadas posibles.
Puede configurar formatos para deshabilitar múltiples formatos en favor de un solo formato de imagen.

TTL Mínimo del Caché

Puede configurar el Time to Live (TTL) en segundos para imágenes optimizadas en caché. En muchos casos, es mejor usar una Importación de Imagen Estática que automáticamente hashear los contenidos del archivo y almacenar la imagen para siempre con un encabezado Cache-Control de immutable.

Si no se proporciona configuración, se usa el valor predeterminado a continuación.

next.config.js

module.exports = {
  images: {
    minimumCacheTTL: 60, // 1 minuto
  },
}

Puede aumentar el TTL para reducir el número de revalidaciones y potencialmente reducir costos:

next.config.js

module.exports = {
  images: {
    minimumCacheTTL: 2678400, // 31 días
  },
}

La expiración (o más bien Max Age) de la imagen optimizada se define por minimumCacheTTL o el encabezado Cache-Control de la imagen upstream, el que sea mayor.

Si necesita cambiar el comportamiento del caché por imagen, puede configurar headers para establecer el encabezado Cache-Control en la imagen upstream (por ejemplo, /some-asset.jpg, no /_next/image en sí).

No hay un mecanismo para invalidar el caché en este momento, por lo que es mejor mantener minimumCacheTTL bajo. De lo contrario, puede que necesite cambiar manualmente la propiedad src o eliminar <distDir>/cache/images.

Deshabilitar Importaciones Estáticas

El comportamiento predeterminado le permite importar archivos estáticos como import icon from './icon.png' y luego pasarlo a la propiedad src.

En algunos casos, puede desear deshabilitar esta función si entra en conflicto con otros plugins que esperan que la importación se comporte de manera diferente.

Puede deshabilitar las importaciones de imágenes estáticas dentro de su next.config.js:

next.config.js

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Permitir SVG Peligrosamente

El loader predeterminado no optimiza imágenes SVG por algunas razones. Primero, SVG es un formato vectorial, lo que significa que puede redimensionarse sin pérdida. Segundo, SVG tiene muchas de las mismas características que HTML/CSS, lo que puede conducir a vulnerabilidades sin los encabezados adecuados de Content Security Policy (CSP).

Por lo tanto, recomendamos usar la propiedad unoptimized cuando se sabe que la propiedad src es SVG. Esto sucede automáticamente cuando src termina con ".svg".

Sin embargo, si necesita servir imágenes SVG con la API de Optimización de Imágenes predeterminada, puede establecer dangerouslyAllowSVG dentro de su next.config.js:

next.config.js

module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

Además, se recomienda encarecidamente establecer también contentDispositionType para forzar al navegador a descargar la imagen, así como contentSecurityPolicy para evitar que los scripts incrustados en la imagen se ejecuten.

`contentDispositionType`

El loader predeterminado establece el encabezado Content-Disposition en attachment para mayor protección, ya que la API puede servir imágenes remotas arbitrarias.

El valor predeterminado es attachment, lo que obliga al navegador a descargar la imagen al visitarla directamente. Esto es particularmente importante cuando dangerouslyAllowSVG es true.

Opcionalmente, puede configurar inline para permitir que el navegador renderice la imagen al visitarla directamente, sin descargarla.

next.config.js

module.exports = {
  images: {
    contentDispositionType: 'inline',
  },
}

Imágenes Animadas

El loader predeterminado omitirá automáticamente la Optimización de Imágenes para imágenes animadas y servirá la imagen tal cual.

La detección automática de archivos animados es de mejor esfuerzo y admite GIF, APNG y WebP. Si desea omitir explícitamente la Optimización de Imágenes para una imagen animada dada, use la propiedad unoptimized.

Historial de Versiones

Versión	Cambios
`v13.0.0`	`next/image` renombrado a `next/legacy/image`

On this page