Optimización de Imágenes en la Web Moderna

Cuando hablamos de rendimiento web (Web Performance), las imágenes suelen ser el mayor cuello de botella. Cargar una imagen de 5MB en un móvil con 4G es un pecado capital en el desarrollo web.

El problema de la etiqueta <img>

La etiqueta HTML estándar <img> no hace mucho por nosotros:

• No evita el Layout Shift (CLS).
• No carga imágenes diferentes según el dispositivo.
• No hace Lazy Loading nativo en todos los navegadores antiguos.

La solución: next/image

Next.js introdujo el componente <Image /> para solucionar esto automáticamente:

import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero Image"
      width={1200}
      height={600}
      priority
    />
  );
}

Conclusión

Usar las herramientas nativas del framework no solo te ahorra tiempo, sino que garantiza que tu sitio vuele en Lighthouse.