Optimización Automática de Imágenes
Imágenes sin optimizar
Usando HTML regular, hemos añadido nuestra imagen Hero de la siguiente manera:
Sin embargo, esto significa que debemos optimizar manualmente aspectos como:
- Asegurar que nuestra imagen sea responsiva en diferentes tamaños de pantalla.
- Optimizar nuestras imágenes con herramientas o bibliotecas de terceros.
- Carga diferida (lazy-loading) de imágenes cuando entran en el viewport.
El componente Image
Next.js proporciona un componente Image que puede manejar estas optimizaciones de forma automática.
next/image es una extensión del elemento img de HTML, evolucionado para la web moderna.
Esto significa que el redimensionamiento, optimización y entrega de imágenes en formatos modernos como WebP (cuando el navegador lo soporta) puede realizarse automáticamente usando next/image.
El componente evita enviar imágenes grandes a dispositivos con viewports pequeños y permite que Next.js adopte formatos de imagen futuros y los sirva a navegadores que los soporten.
La Optimización Automática de Imágenes funciona con cualquier fuente de imagen. Incluso si la imagen está alojada en una fuente de datos externa, como un CMS, aún puede optimizarse.
¿Cómo funciona la Optimización Automática de Imágenes?
Optimización bajo demanda
En lugar de optimizar imágenes en tiempo de compilación, Next.js optimiza imágenes bajo demanda según las solicitudes de los usuarios. A diferencia de generadores de sitios estáticos y soluciones estáticas, los tiempos de compilación no aumentan, ya sea que se envíen diez imágenes o diez millones.
Imágenes con carga diferida
Las imágenes se cargan de forma diferida por defecto. La velocidad de la página no se verá penalizada por imágenes fuera del viewport. Las imágenes solo se cargan cuando entran en la vista.
Evita CLS
Las imágenes siempre se renderizan para evitar Cambios Acumulativos de Diseño (CLS por sus siglas en inglés).
Usando el componente Image
Actualicemos la aplicación usando next/image para mostrar nuestra imagen hero. Las props height y width deben ser el tamaño de renderizado deseado, con una relación de aspecto idéntica a la imagen fuente.
Abre el archivo pages/index.js y añade una importación para Image desde next/image al inicio del archivo:
Luego, reemplaza el hero img con el componente Image:
También hay una imagen en el footer. Reemplacémosla también:
Finalmente, ejecuta otro informe Lighthouse en Chrome DevTools y compara tus resultados.