Comprimir imágenes para su sitio web o dentro de su aplicación puede mejorar radicalmente el rendimiento. Sharp hace el trabajo pesado.
Las imágenes innecesariamente grandes pueden generar tiempos de respuesta más lentos, consumir ancho de banda excesivo y brindar una experiencia lenta a los usuarios, especialmente aquellos con conexiones más lentas. Esto puede resultar en tasas de rebote más altas o menos conversiones.
Comprimir imágenes antes de cargarlas puede mitigar estos problemas y brindar una mejor experiencia de usuario. El módulo Sharp hace que este proceso sea rápido y sencillo.
Configurar su entorno de desarrollo
Para demostrar el proceso de comprimir imágenes, comience por configurar un servicio de carga de imágenes usando multer. Puedes acelerar el proceso clonando este repositorio de GitHub.
Después de clonar el repositorio de GitHub, ejecute este comando para instalar las dependencias del servicio de carga de imágenes:
npm install
A continuación, instale Sharp ejecutando este comando:
npm install sharp
El Afilado El módulo es una biblioteca Node.js de alto rendimiento para procesar y manipular imágenes. Puede utilizar Sharp para cambiar el tamaño, recortar, rotar y realizar otras operaciones en imágenes de manera eficiente. Sharp también tiene un excelente soporte para comprimir imágenes.
Técnicas de compresión para diferentes formatos de imagen
Diferentes formatos de imagen Tienen distintas técnicas de compresión. Esto se debe a que cada uno de ellos atiende a usos y requisitos específicos, y priorizan diferentes factores, incluida la calidad, el tamaño del archivo y características como la transparencia y las animaciones.
JPEG/JPEG
JPEG es un estándar de compresión de imágenes desarrollado por Joint Photographic Experts Group para comprimir fotografías e imágenes realistas con tonos continuos y degradados de color. Usa un algoritmo de compresión con pérdida, generando archivos más pequeños descartando algunos datos de imagen.
Para comprimir una imagen JPEG con Sharp, importe el módulo Sharp y pase la ruta del archivo o un búfer de la imagen como argumento. A continuación, llame al .jpeg método en el Afilado instancia. Luego, pase un objeto de configuración con un calidad propiedad que toma un número entre 0 y 100 como valor. Dónde 0 devuelve la compresión más pequeña con la más baja calidad y 100 devuelve la mayor compresión con la más alta calidad.
Puede establecer el valor según sus necesidades. Para obtener mejores resultados de compresión, mantenga el valor entre 50-80 para lograr un equilibrio entre tamaño y calidad.
Termine guardando la imagen comprimida en el sistema de archivos usando el .archivar método. Pase la ruta del archivo en el que desea escribir como argumento.
Por ejemplo:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
El valor predeterminado para calidad es 80.
PNG
PNG (Portable Network Graphics) es un formato de archivo de imagen conocido por su compresión sin pérdidas y compatibilidad con fondos transparentes.
Comprimir una imagen PNG con Sharp es similar a comprimir una imagen JPEG con Sharp. Sin embargo, hay dos cambios que debes realizar cuando la imagen está en formato PNG.
- Sharp procesa imágenes PNG utilizando el .png método en lugar de .jpeg método.
- El .png usos del método nivel de compresión, que es un numero entre 0 y 9 en lugar de calidad en su objeto de configuración. 0 proporciona la compresión más rápida y más grande posible, mientras 9 proporciona la compresión más lenta y más pequeña posible.
Por ejemplo:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
El valor predeterminado para nivel de compresión es 6.
Otros formatos
Sharps admite la compresión en varios otros formatos de imagen que incluyen:
- WebP: La compresión de imágenes WebP con Sharp sigue el mismo proceso que JPG. La única diferencia es que tienes que llamar al webp método en lugar de .jpeg método en la instancia de Sharp.
- PELEA: La compresión de imágenes TIFF (Formato de archivo de imagen de etiqueta) con Sharp sigue el mismo proceso que JPG. La única diferencia es que tienes que llamar al pelea método en lugar de .jpeg método en la instancia de Sharp.
- AVIF: La compresión de imágenes AVIF (AV1 Image File Format) con Sharp sigue el mismo proceso que JPG. La única diferencia es que tienes que llamar al avif método en lugar de .jpeg método en la instancia de Sharp. El valor predeterminado de AVIF para calidad es 50.
- HEIF: La compresión de imágenes HEIF (formato de archivo de imagen de alta eficiencia) con Sharp sigue el mismo proceso que JPG. La única diferencia es que tienes que llamar al vaca método en lugar de .jpeg método en la instancia de Sharp. El valor predeterminado de AVIF para calidad es 50.
Comprimir imágenes con Sharp
Si clonaste el repositorio de GitHub, abre tu aplicación.js archivo y agregue las siguientes importaciones.
const sharp = require("sharp");
const { exec } = require("child_process");
ejecutivo es una función proporcionada por el proceso_niño módulo que le permite ejecutar comandos de shell o procesos externos desde su aplicación Node.js.
Puede utilizar esta función para ejecutar un comando que compare los tamaños de archivos antes y después de la compresión.
A continuación, reemplace el POST '/single' controlador con el bloque de código a continuación:
app.post("/upload-and-compress", upload.single("image"), async (req, res) => {
try {
if (!req.file) {
return res.status(404).send("Please upload a valid image");
}const compressedFileName = req.file.filename.split(".")[0];
const compressedImageFilePath = `./images/${compressedFileName}-compressed.png`;await sharp(req.file.path)
.jpeg({ quality: 50 })
.toFile(compressedImageFilePath)
.then(() => {
let sizeBeforeCompression, sizeAfterCompression;
const sizeBeforeCompressionCommand = `du -h ${req.file.path}`;
const sizeAfterCompressionCommand = `du -h ${compressedImageFilePath}`;exec(sizeBeforeCompressionCommand, (err, stdout, stderr) => {
sizeBeforeCompression = stdout.split("\\t")[0];exec(sizeAfterCompressionCommand, (err, stdout, stderr) => {
sizeAfterCompression = stdout.split("\\t")[0];
res.send({
message: "Image uploaded and compressed successfully",
sizeBeforeCompression,
sizeAfterCompression,
});
});
});
});
} catch (error) {
console.log(error);
}
});
El bloque de código anterior implementa la técnica para comprimir imágenes JPEG y compara los tamaños antes y después de usar el du dominio.
El du El comando es una utilidad Unix que significa "uso de disco". Estima el uso del espacio de archivos y analiza el uso del disco en un directorio o conjunto de directorios. Cuando ejecutas el du comando con el -h, muestra el espacio de archivos que utiliza cada subdirectorio y su contenido en formato legible por humanos.
Inicie su servicio de carga ejecutando este comando:
node app.js
A continuación, prueba tu aplicación enviando una imagen JPG a la ruta. servidor local:
Deberías ver una respuesta similar a esta:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Otros usos del módulo Sharp
Además de comprimir imágenes, el módulo Sharp también puede cambiar el tamaño, recortar, rotar y voltear imágenes según las especificaciones deseadas. También admite ajustes de espacio de color, operaciones de canal alfa y conversiones de formato.