🖼️ Imágenes optimizadas con next/image

🖼️ Imágenes optimizadas con next/image

Aprende a añadir imágenes a tu blog y optimizarlas automáticamente con el componente Image de Next.js.

---

📌 Índice de esta entrada:

1. 📦 ¿Por qué usar next/image?
2. ⚡ Instalación y configuración inicial
3. 🖼️ Uso básico de Image en páginas y posts
4. 🌐 Optimización automática y tamaños responsivos
5. 🔗 Imágenes externas y configuración de dominios

---

📦 ¿Por qué usar next/image?

El componente Image de Next.js ofrece varias ventajas:

• Optimización automática de tamaño y formato.
• Carga diferida (lazy loading) por defecto.
• Compatibilidad con imágenes responsivas y retina.
• Mejora del rendimiento y SEO de tu blog.

⚡ Instalación y configuración inicial

No necesitas instalar nada extra, next/image ya viene incluido en Next.js 13+. Solo debes importar el componente:

import Image from 'next/image';
    

🖼️ Uso básico de Image

Para añadir una imagen a un post o página:

import Image from 'next/image';

export default function Post() {
  return (
    <div>
      <h1>Mi primer post</h1>
      <Image
        src="/images/post1.jpg"
        alt="Foto de ejemplo"
        width={800}
        height={500}
      />
      <p>Contenido del post...</p>
    </div>
  );
}
    

Nota: Las imágenes locales se deben colocar en la carpeta public/images.

🌐 Optimización automática y tamaños responsivos

Next.js genera automáticamente versiones optimizadas para distintos tamaños de pantalla. Esto mejora la velocidad de carga sin que tengas que recortar o redimensionar manualmente.

También puedes usar layout="responsive" para que la imagen se adapte al ancho del contenedor:

<Image
  src="/images/post1.jpg"
  alt="Foto de ejemplo"
  width={800}
  height={500}
  layout="responsive"
/>
    

🔗 Imágenes externas y configuración de dominios

Si quieres cargar imágenes desde un URL externo, debes agregar el dominio en next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['ejemplo.com', 'mi-servidor.com'],
  },
};

module.exports = nextConfig;
    

Luego puedes usar la URL externa en <Image src="https://ejemplo.com/imagen.jpg" ... />.

---

💡 Consejo: Siempre usa next/image para todas las imágenes de tu blog. Esto hará que tu sitio sea más rápido y amigable para SEO.

← Volver al índice