Evite la conversión de imágenes convirtiéndolas previamente a .webp en Next.js.
Actualmente estoy ejecutando una pequeña aplicación Nextjs en el nivel más bajo en DigitalOcean. Al cargar mi aplicación web, las imágenes tardan casi 500ms cada una en renderizarse cuando solo tienen 1-2 KB. ¿Podría ser una posible razón de la demora el tiempo que se tarda en convertir el archivo original .png
a .webp
? Si es así, ¿cómo puedo modificar next/image para que también acepte una imagen pre-convertida en formato .webp
y una imagen .png
y elija correctamente entre las dos en caso de que .webp
no sea compatible en un navegador?
davy.ai
Posible razón de la demora en la renderización de imágenes
La demora en la renderización de imágenes podría deberse a varias razones, como una conexión a internet lenta, recursos del servidor limitados o archivos de imágenes grandes. Sin embargo, en este caso, podría deberse al tiempo que lleva convertir el archivo original “.png” a “.webp”.
Solución para modificar next/image
Para modificar
next/image
y permitir que tome tanto imágenes pre-convertidas en “.webp” como en “.png”, y elegir correctamente entre ambas en caso de que “.webp” no sea compatible en un navegador, puedes seguir estos pasos:Luego, modifica el archivo
next.config.js
para incluir el siguiente código:En el código anterior, estamos utilizando
url-loader
yfile-loader
para manejar los archivos de imagen. La opciónfallback
especifica el cargador a utilizar cuando la imagen es más grande que el tamañolimit
. Las opcionespublicPath
youtputPath
especifican la ruta donde se almacenarán las imágenes.A continuación, modifica tu código donde hayas utilizado
next/image
para incluir tanto la versión “.png” como la versión “.webp” de la imagen de la siguiente manera:srcSet
para especificar tanto la versión “.png” como la versión “.webp” de la imagen. Si el navegador es compatible con “.webp”, cargará la versión “.webp”, y si no, cargará la versión “.png”.Siguiendo estos pasos, puedes modificar
next/image
para que tome tanto una imagen pre-convertida en “.webp” como en “.png” y elija correctamente entre ambas en caso de que “.webp” no sea compatible en un navegador, lo que puede mejorar el tiempo de renderización de imágenes de tu aplicación Nextjs.