Las imágenes son uno de los elementos que más pueden afectar el rendimiento de una página web. Archivos demasiado pesados aumentan el tiempo de carga, consumen más datos y pueden perjudicar las métricas de rendimiento y SEO. En Next.js, podemos solucionar gran parte de este problema utilizando el componente Image, incluido en el framework.
¿Por qué usar next/image?
Next.js incorpora un componente especializado para trabajar con imágenes de forma optimizada. A diferencia de utilizar directamente una etiqueta <img>, Image puede adaptar automáticamente el tamaño de la imagen, utilizar formatos modernos y cargar las imágenes de manera más eficiente.
Primero debemos importarlo:
import Image from 'next/image';
Después podemos utilizarlo dentro de nuestro componente:
<Image
src="/images/imagen.jpg"
alt="Descripción de la imagen"
width={1200}
height={800}
/>
Las propiedades width y height permiten que Next.js conozca las dimensiones de la imagen y reserve el espacio correspondiente antes de que esta se cargue. Esto ayuda a evitar movimientos inesperados del contenido.
Imágenes almacenadas localmente
Una práctica sencilla es colocar las imágenes dentro de la carpeta public. Por ejemplo:
public/
└── images/
└── producto.jpg
Podemos acceder a ella utilizando:
<Image
src="/images/producto.jpg"
alt="Producto"
width={800}
height={600}
/>
No es necesario escribir /public en la ruta.
Imágenes externas
También es posible utilizar imágenes alojadas en otros dominios. Para hacerlo, debemos configurar el dominio permitido en next.config.js.
Por ejemplo:
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'ejemplo.com',
},
],
},
};
export default nextConfig;
Después podremos utilizar:
<Image
src="https://ejemplo.com/foto.jpg"
alt="Imagen externa"
width={1000}
height={700}
/>
Uso de fill
Cuando necesitamos que una imagen ocupe completamente un contenedor, podemos utilizar fill:
<div className="relative h-64">
<Image
src="/images/banner.jpg"
alt="Banner"
fill
className="object-cover"
/>
</div>
En este caso, el contenedor debe tener una posición relativa y una altura definida.
Optimizar imágenes importantes
No todas las imágenes deben cargarse de la misma manera. Para una imagen principal que aparece inmediatamente al entrar en la página, podemos utilizar priority:
<Image
src="/images/hero.jpg"
alt="Imagen principal"
width={1200}
height={700}
priority
/>
Sin embargo, no debemos utilizar priority indiscriminadamente. Las imágenes que aparecen más abajo pueden cargarse de forma diferida automáticamente.
Consejos finales
Para obtener mejores resultados, utiliza formatos modernos como WebP o AVIF cuando sea posible, proporciona siempre un texto alt descriptivo, utiliza dimensiones adecuadas y evita subir imágenes mucho más grandes de lo necesario.
Además, conviene comprimir las imágenes originales antes de incorporarlas al proyecto.
En conclusión, next/image facilita enormemente la optimización de imágenes en aplicaciones Next.js. Utilizar correctamente Image, definir dimensiones, configurar imágenes externas y priorizar únicamente los recursos importantes permite crear páginas más rápidas, eficientes y con una mejor experiencia para el usuario.
