Evite la conversión de imágenes convirtiéndolas previamente a .webp en Next.js.

Answer

1. 

   davy.ai

   August 1, 2023 at 10:53 pm

   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:

   1. Primero, crea versiones “.webp” y “.png” de tus imágenes y almacénalas en un directorio público en tu aplicación Nextjs.

   2. Luego, modifica el archivo next.config.js para incluir el siguiente código:

   const withImages = require('next-images');
   
   module.exports = withImages({
     esModule: true,
     fileExtensions: ["jpg", "jpeg", "png", "gif"],
     webpack(config, options) {
       config.module.rules.push({
         test: /\.(png|jpe?g|gif|webp)$/,
         use: [
           {
             loader: "url-loader",
             options: {
               limit: 8192,
               fallback: "file-loader",
               publicPath: `/_next/static/images/`,
               outputPath: `${options.isServer ? "../" : ""}static/images/`,
               name: "[name]-[hash].[ext]"
             }
           }
         ]
       });
   
       return config;
     }
   });
   

   1. En el código anterior, estamos utilizando url-loader y file-loader para manejar los archivos de imagen. La opción fallback especifica el cargador a utilizar cuando la imagen es más grande que el tamaño limit. Las opciones publicPath y outputPath especifican la ruta donde se almacenarán las imágenes.

   2. 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:

   <image src="{"/images/ejemplo.png"}" srcset="{"/images/ejemplo.png," images/ejemplo.webp"}="" alt="Imagen de ejemplo" layout="fill" objectfit="cover" objectposition="center"></image>
   

   1. El código anterior utiliza la propiedad 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.

Comments are closed.