Cómo mejorar el rendimiento en Next.js con imágenes optimizadas
Actualizado en junio de 2026. Importante: desde Next.js 13 la proplayout(incluidolayout="responsive") y la configuraciónimages.domainsquedaron obsoletas. Hoy se usafilljunto consizes, y los dominios externos se autorizan conremotePatterns. Más abajo agregué la sección "Cómo se hace hoy (Next.js 15)" con el código correcto y vigente.
Introducción
Next.js es una popular biblioteca de React que permite crear aplicaciones web de alto rendimiento. Uno de los factores más críticos en la optimización del rendimiento es la carga de imágenes, ya que suelen ocupar una gran cantidad de datos y pueden ralentizar la carga de una página si no se gestionan adecuadamente. En este artículo, veremos cómo usar el componente Image en Next.js para optimizar imágenes y mejorar la velocidad de carga en tus aplicaciones.
La importancia de las imágenes optimizadas
Las imágenes son una parte esencial de las interfaces modernas, pero pueden afectar negativamente el rendimiento si no se manejan de forma eficiente. Según estudios de Google, una página que tarda más de 3 segundos en cargar tiene una mayor tasa de abandono. Al optimizar las imágenes, reducimos el tamaño de los archivos, lo cual permite que las páginas carguen más rápido y, en última instancia, mejora la experiencia del usuario.
Cómo funciona el componente Image de Next.js
El componente Image de Next.js fue introducido para ayudar a los desarrolladores a manejar imágenes de manera más eficiente. Este componente utiliza la técnica de "carga diferida" (lazy loading) por defecto y ofrece múltiples beneficios, tales como:
- Lazy loading: Las imágenes se cargan solo cuando están a punto de entrar en el viewport, lo cual ahorra ancho de banda y mejora la velocidad de carga.
- Generación de diferentes resoluciones: El componente puede cargar versiones de diferentes tamaños de una imagen para adaptarse a las pantallas de dispositivos específicos, optimizando la calidad y el peso de las imágenes según el dispositivo.
- Soporte de formatos avanzados: Next.js soporta formatos de imagen de última generación como WebP, que reduce aún más el tamaño de las imágenes.
Ejemplo básico de uso del componente Image
A continuación, se muestra un ejemplo básico de cómo implementar el componente Image en una aplicación Next.js:
import Image from 'next/image';
export default function MiComponente() {
return (
<div>
<Image
src="/ruta/a/tu-imagen.jpg"
alt="Descripción de la imagen"
width={800}
height={600}
priority
/>
</div>
);
}
En este ejemplo, especificamos el src, alt, width, y height de la imagen. La propiedad priority ayuda a cargar la imagen de inmediato, útil en el caso de imágenes principales en la parte superior de la página.
Uso de imágenes responsivas
Next.js permite configurar imágenes que se adaptan a diferentes tamaños de pantalla utilizando la propiedad layout="responsive":
<Image
src="/ruta/a/tu-imagen.jpg"
alt="Descripción de la imagen"
width={800}
height={600}
layout="responsive"
/>
Con layout="responsive", la imagen ajustará su tamaño de acuerdo al ancho del contenedor, lo cual mejora la experiencia en dispositivos móviles y garantiza que la imagen no sobresalga del diseño.
Optimización de formatos con Next.js
Next.js soporta la conversión automática de imágenes a formatos modernos como WebP, que son más ligeros y rápidos de cargar. Esto se puede lograr con el siguiente código:
<Image
src="/ruta/a/tu-imagen.jpg"
alt="Descripción de la imagen"
width={800}
height={600}
layout="responsive"
/>
Si el navegador del usuario soporta WebP, Next.js servirá automáticamente este formato optimizado, ayudando a reducir la cantidad de datos necesarios para cargar la imagen.
Carga de imágenes desde una URL externa
Para cargar imágenes de un dominio externo, debes configurar next.config.js para indicar qué dominios están permitidos. Aquí tienes un ejemplo:
// next.config.js
module.exports = {
images: {
domains: ['example.com'],
},
}
Con esta configuración, ahora puedes usar el componente Image para cargar imágenes desde example.com sin problemas.
Mejores prácticas de optimización
- Utiliza el atributo
alten todas tus imágenes para mejorar la accesibilidad y el SEO. - Evita usar imágenes de resolución alta si no son necesarias.
- Asegúrate de especificar siempre el ancho y alto de las imágenes para evitar el "layout shift" o cambio de diseño.
Cómo se hace hoy (Next.js 15)
La API de imágenes cambió desde que se publicó esta guía. Estas son las diferencias clave que tenés que aplicar en proyectos actuales:
- La prop
layoutya no existe. Para que una imagen ocupe su contenedor usásfillmássizes(y el contenedor conposition: relative). domainsquedó obsoleto. Los dominios externos se autorizan conremotePatterns, que es más seguro y específico.- AVIF además de WebP: Next.js puede servir AVIF, aún más liviano. Se configura con
formats. - placeholder="blur" para mostrar una previsualización borrosa mientras carga, mejorando la percepción de velocidad.
// Imagen que llena su contenedor (reemplaza a layout="responsive")
<div style={{ position: 'relative', width: '100%', height: 400 }}>
<Image
src="/ruta/a/tu-imagen.jpg"
alt="Descripción de la imagen"
fill
sizes="(max-width: 768px) 100vw, 768px"
style={{ objectFit: 'cover' }}
/>
</div>
// next.config.js — dominios externos con remotePatterns
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
remotePatterns: [
{ protocol: 'https', hostname: 'example.com' },
],
},
};
Optimizar imágenes no es solo cuestión de prolijidad: el peso y la velocidad de carga impactan directo en tu posicionamiento. Si querés medir cómo está hoy tu sitio, podés usar mi herramienta gratuita de análisis SEO.
Conclusión
El uso del componente Image en Next.js es una de las maneras más efectivas de optimizar imágenes y mejorar el rendimiento general de tu aplicación web. Al aprovechar las ventajas de carga diferida, formatos modernos y configuraciones específicas para imágenes responsivas, puedes mejorar significativamente la velocidad de tu aplicación y la experiencia del usuario. ¡Implementa estas prácticas en tu proyecto Next.js y disfruta de una web más rápida y optimizada!