Potenciando el rendimiento con Next.js Image
La etiqueta estándar `<img>` es contraproducente para el rendimiento. Next.js proporciona el componente `<Image>` para gestionar automáticamente la optimización de las imágenes.
1. Lista blanca del dominio
Por seguridad, debe indicar a Next.js qué dominios externos están autorizados para servir imágenes. Actualice `next.config.js`:
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'susitiowordpress.com',
},
],
}2. Características principales
- Carga diferida (Lazy Loading): Las imágenes solo se cargan a medida que se aproximan al área visible del navegador (viewport).
- Selección de formato: Sirve automáticamente formatos modernos como WebP o AVIF si el navegador los admite.
- Redimensionamiento responsivo: Sirve imágenes más pequeñas a dispositivos móviles e imágenes de alta resolución a escritorios.
3. Consejo de uso
Utilice la propiedad `fill` combinada con un contenedor `relative` y la clase `object-cover` para las secciones hero y las miniaturas de las tarjetas. Esto asegura que las imágenes se ajusten perfectamente a sus contenedores sin distorsiones.