Sin webpack, comprimiendo imágenes locales con Node.js: Comparación y aplicación de sharp e imagemin

En el desarrollo web moderno, la optimización del tamaño de las imágenes es un paso crucial para mejorar el rendimiento del sitio web. Este artículo presentará cómo usar las bibliotecas de Node.js sharp e imagemin para comprimir imágenes locales, comparando en detalle las funciones y capacidades de compresión de estas dos herramientas.

Uso de sharp

Instalación de sharp

Primero, instala sharp a través de npm:

1
npm install sharp

Procesamiento de imágenes con sharp

sharp es una biblioteca de procesamiento de imágenes de alto rendimiento que soporta diversas operaciones de imagen. Aquí hay algunos usos comunes:

1. Redimensionar (Resize):

   1
   const sharp = require("sharp");
   2
   
   3
   sharp("input.jpg")
   4
     .resize(300, 200) // 300px de ancho, 200px de alto
   5
     .toFile("output.jpg", (err, info) => {
   6
       if (err) {
   7
         console.error(err);
   8
       } else {
   9
         console.log(info);
   10
       }
   11
     });

2. Recortar (Crop):

   1
   sharp("input.jpg")
   2
     .resize(300, 300, {
   3
       fit: sharp.fit.cover,
   4
       position: sharp.strategy.entropy,
   5
     })
   6
     .toFile("output.jpg", (err, info) => {
   7
       if (err) {
   8
         console.error(err);
   9
       } else {
   10
         console.log(info);
   11
       }
   12
     });

3. Rotar (Rotate):

   1
   sharp("input.jpg")
   2
     .rotate(90) // Rotar 90 grados en sentido horario
   3
     .toFile("output.jpg", (err, info) => {
   4
       if (err) {
   5
         console.error(err);
   6
       } else {
   7
         console.log(info);
   8
       }
   9
     });

4. Agregar marca de agua (Composite):

   1
   sharp("input.jpg")
   2
     .composite([{ input: "watermark.png", gravity: "southeast" }])
   3
     .toFile("output.jpg", (err, info) => {
   4
       if (err) {
   5
         console.error(err);
   6
       } else {
   7
         console.log(info);
   8
       }
   9
     });

5. Comprimir todas las imágenes en un directorio:

   1
   const sharp = require("sharp");
   2
   const fs = require("fs");
   3
   const path = require("path");
   4
   
   5
   const inputDir = "path/to/your/images";
   6
   const outputDir = "path/to/output/images";
   7
   
   8
   fs.readdir(inputDir, (err, files) => {
   9
     if (err) {
   10
       console.error("Error reading input directory:", err);
   11
       return;
   12
     }
   13
   
   14
     files.forEach((file) => {
   15
       const inputFile = path.join(inputDir, file);
   16
       const outputFile = path.join(outputDir, file);
   17
   
   18
       sharp(inputFile)
   19
         .resize(800) // Redimensionar a 800px de ancho, la altura se ajustará automáticamente para mantener la relación de aspecto
   20
         .toFormat("jpeg", { quality: 80 }) // Convertir a JPEG con una calidad de 80
   21
         .toFile(outputFile, (err, info) => {
   22
           if (err) {
   23
             console.error("Error processing file:", err);
   24
           } else {
   25
             console.log("File processed:", info);
   26
           }
   27
         });
   28
     });
   29
   });

Uso de imagemin

Instalación de imagemin

Primero, instala imagemin y sus plugins relacionados a través de npm:

1
npm install imagemin imagemin-mozjpeg imagemin-pngquant imagemin-svgo

Compresión de imágenes con imagemin

imagemin es una biblioteca de compresión de imágenes altamente configurable que soporta varios plugins. Dado que imagemin es un módulo ES, no podemos usar require para importarlo, necesitamos agregar el siguiente código en package.json para habilitar los módulos ES:

1
"type": "module",

Aquí hay algunos usos comunes de imagemin:

1. Comprimir JPEG:

   1
   import imagemin from "imagemin";
   2
   import imageminMozjpeg from "imagemin-mozjpeg";
   3
   
   4
   (async () => {
   5
     await imagemin(["images/*.jpg"], {
   6
       destination: "output",
   7
       plugins: [imageminMozjpeg({ quality: 70 })],
   8
     });
   9
   })();

2. Comprimir PNG:

   1
   import imagemin from "imagemin";
   2
   import imageminPngquant from "imagemin-pngquant";
   3
   
   4
   (async () => {
   5
     await imagemin(["images/*.png"], {
   6
       destination: "output",
   7
       plugins: [
   8
         imageminPngquant({
   9
           quality: [0.6, 0.8],
   10
         }),
   11
       ],
   12
     });
   13
   })();

3. Comprimir SVG:

   1
   import imagemin from "imagemin";
   2
   import imageminSvgo from "imagemin-svgo";
   3
   
   4
   (async () => {
   5
     await imagemin(["images/*.svg"], {
   6
       destination: "output",
   7
       plugins: [imageminSvgo()],
   8
     });
   9
   })();

4. Comprimir GIF:

   1
   import imagemin from "imagemin";
   2
   import imageminGifsicle from "imagemin-gifsicle";
   3
   
   4
   (async () => {
   5
     await imagemin(["images/*.gif"], {
   6
       destination: "output",
   7
       plugins: [imageminGifsicle({ optimizationLevel: 3 })],
   8
     });
   9
   })();

5. Comprimir todas las imágenes en un directorio:

   1
   import imagemin from "imagemin";
   2
   import imageminMozjpeg from "imagemin-mozjpeg";
   3
   import imageminPngquant from "imagemin-pngquant";
   4
   import imageminSvgo from "imagemin-svgo";
   5
   import path from "path";
   6
   
   7
   const inputDir = "path/to/your/images/*.{jpg,png,svg}";
   8
   const outputDir = "path/to/output/images";
   9
   
   10
   (async () => {
   11
     const files = await imagemin([inputDir], {
   12
       destination: outputDir,
   13
       plugins: [
   14
         imageminMozjpeg({ quality: 80 }),
   15
         imageminPngquant({
   16
           quality: [0.6, 0.8],
   17
         }),
   18
         imageminSvgo(),
   19
       ],
   20
     });
   21
     console.log("Images optimized:", files);
   22
   })();

Comparación entre sharp e imagemin

Eficiencia de compresión

• sharp utiliza la biblioteca libvips, que ofrece una velocidad de compresión muy rápida, especialmente cuando se manejan grandes volúmenes de imágenes.
• imagemin depende de plugins específicos, y la eficiencia de compresión varía entre los diferentes plugins. En general, imagemin es un poco más lento que sharp, pero soporta más formatos.

Calidad de compresión

• sharp proporciona un efecto de compresión de alta calidad, soportando el ajuste de la calidad de compresión y el tamaño de la imagen, permitiendo reducir significativamente el tamaño del archivo manteniendo una buena calidad de imagen.
• imagemin ofrece múltiples plugins, y los usuarios pueden elegir diferentes plugins para optimizar distintos formatos de imágenes. Su calidad de compresión también es muy alta, especialmente cuando se usan plugins específicos de optimización (como imagemin-mozjpeg).

Funcionalidad

• sharp no es solo una herramienta de compresión, sino que también ofrece potentes funciones de procesamiento de imágenes, como recorte, rotación, redimensionamiento, marcas de agua, etc.
• imagemin se enfoca en la compresión de imágenes, soportando la optimización de varios formatos a través de diferentes plugins, pero no ofrece otras funciones de procesamiento de imágenes.

Conclusión

En resumen, si necesitas funciones eficientes de procesamiento y compresión de imágenes, sharp es una excelente opción. Si necesitas optimizar varios formatos de imágenes y te enfocas en el efecto de compresión, imagemin es una mejor elección.