🖼️ Optimización de imágenes con next/image

24 - 🖼️ Optimización de imágenes con next/image

Aprende a cargar imágenes de forma optimizada y responsiva en Next.js usando el componente Image.

---

📌 ¿Por qué optimizar imágenes?

Las imágenes son uno de los elementos que más afectan el rendimiento de un sitio web. Next.js ofrece el componente next/image que optimiza automáticamente el tamaño, formato y carga de imágenes para mejorar la velocidad y el SEO.

---

🖼️ Uso básico de next/image

Primero, importa el componente Image desde next/image. Luego, reemplaza la etiqueta <img> con <Image>.

// app/page.js
import Image from 'next/image';

export default function Home() {
  return (
    <main className="p-8 flex flex-col items-center">
      <h1 className="text-3xl font-bold mb-4">Optimización de Imágenes</h1>

      <Image 
        src="/images/mi-imagen.jpg" 
        alt="Imagen de ejemplo"
        width={400}
        height={300}
        className="rounded shadow-lg"
      />
    </main>
  );
}
      

✅ Notas importantes:

• La imagen debe estar en public/ o ser un URL externo autorizado.
• width y height ayudan a mantener la proporción y optimización.
• Se generan automáticamente formatos modernos como WebP cuando es posible.

---

📱 Imágenes responsivas

Con layout="responsive" y fill, las imágenes se adaptan automáticamente al contenedor.

// app/page.js
import Image from 'next/image';

export default function Home() {
  return (
    <div className="w-full max-w-md mx-auto">
      <Image 
        src="/images/mi-imagen.jpg"
        alt="Imagen responsiva"
        width={800}
        height={600}
        layout="responsive" // se adapta al contenedor
        className="rounded-lg"
      />
    </div>
  );
}
      

✅ Con esto, la imagen se redimensiona automáticamente según el tamaño de pantalla, mejorando la experiencia en móviles y desktop.

---

🌐 Cargar imágenes desde URLs externas

Para usar imágenes externas, debes agregar el dominio en next.config.js:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['example.com'], // Dominio externo permitido
  },
};

module.exports = nextConfig;

// Uso en un componente
import Image from 'next/image';

export default function ExternalImage() {
  return (
    <Image 
      src="https://example.com/logo.png" 
      alt="Logo externo"
      width={300} 
      height={100} 
    />
  );
}
      

---

⚡ Buenas prácticas con next/image

• Siempre usar alt descriptivo para accesibilidad y SEO.
• Definir width y height para optimización.
• Usar layout="responsive" o fill para imágenes adaptables.
• Evitar cargar imágenes muy pesadas; comprimir antes de subir.
• Permitir dominios externos solo si es necesario y seguro.

← Volver al índice