Compresser des images dans Node.js avec Sharp

Des images inutilement volumineuses peuvent entraîner des temps de réponse plus lents, consommer une bande passante excessive et offrir une expérience lente aux utilisateurs, en particulier à ceux qui utilisent des connexions plus lentes. Cela peut entraîner des taux de rebond plus élevés ou moins de conversions.

Compresser les images avant de les télécharger peut atténuer ces problèmes et offrir une meilleure expérience utilisateur. Le module Sharp rend ce processus rapide et facile.

Configuration de votre environnement de développement

Pour démontrer le processus de compression des images, commencez par configuration d'un service de téléchargement d'images à l'aide de multer. Vous pouvez accélérer le processus en clonant ce dépôt GitHub.

Après avoir cloné le référentiel GitHub, exécutez cette commande pour installer les dépendances du service de téléchargement d'images :

npm install

Ensuite, installez Sharp en exécutant cette commande :

npm install sharp

Le Pointu Le module est une bibliothèque Node.js hautes performances pour le traitement et la manipulation d'images. Vous pouvez utiliser Sharp pour redimensionner, recadrer, faire pivoter et effectuer diverses autres opérations efficacement sur les images. Sharp dispose également d'un excellent support pour la compression des images.

Techniques de compression pour différents formats d'image

Différents formats d'images ont des techniques de compression distinctes. En effet, ils répondent chacun à des utilisations et à des exigences spécifiques et donnent la priorité à différents facteurs, notamment la qualité, la taille du fichier et des fonctionnalités telles que la transparence et les animations.

JPG/JPEG

JPEG est une norme de compression d'image développée par le Joint Photographic Experts Group pour compresser des photographies et des images réalistes avec des tons continus et des dégradés de couleurs. Il utilise un algorithme de compression avec perte, générant des fichiers plus petits en supprimant certaines données d'image.

Pour compresser une image JPEG avec Sharp, importez le module Sharp et passez le filePath ou un buffer de l'image en argument. Ensuite, appelez le .jpeg méthode sur le Pointu exemple. Ensuite, transmettez un objet de configuration avec un qualité propriété qui prend un nombre compris entre 0 et 100 comme valeur. Où 0 renvoie la plus petite compression avec la qualité la plus basse et 100 renvoie la plus grande compression avec la plus haute qualité.

Vous pouvez définir la valeur en fonction de vos besoins. Pour de meilleurs résultats de compression, conservez la valeur entre 50-80 trouver un équilibre entre taille et qualité.

Terminez en enregistrant l'image compressée dans le système de fichiers à l'aide du .toFichier méthode. Passez le chemin du fichier dans lequel vous souhaitez écrire comme argument.

Par exemple:

await sharp(req.file.path)
 .jpeg({ quality: 60 })
 .toFile(`./images/compressed-${req.file.filename}`)
 .then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
 });

La valeur par défaut pour qualité est 80.

PNG

PNG (Portable Network Graphics) est un format de fichier image connu pour sa compression sans perte et sa prise en charge des arrière-plans transparents.

La compression d'une image PNG avec Sharp est similaire à la compression d'une image JPEG avec Sharp. Cependant, vous devez apporter deux modifications lorsque l'image est au format PNG.

1. Sharp traite les images PNG à l'aide du .png méthode au lieu de la .jpeg méthode.
2. Le .png utilisations de la méthode Niveau de compression, qui est un nombre compris entre 0 et 9 au lieu de qualité dans son objet de configuration. 0 donne la compression la plus rapide et la plus importante possible, tandis que 9 donne la compression la plus lente et la plus petite possible.

Par exemple:

await sharp(req.file.path)
 .png({
 compressionLevel: 5,
 })
 .toFile(`./images/compressed-${req.file.filename}`)
 .then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
 });

La valeur par défaut pour Niveau de compression est 6.

Autres formats

Sharps prend en charge la compression dans divers autres formats d'image, notamment :

• WebP: La compression d'image WebP avec Sharp suit le même processus que JPG. La seule différence est que vous devez appeler le webp méthode au lieu de la .jpeg méthode sur l’instance Sharp.
• TIFF: La compression d'image TIFF (Tag Image File Format) avec Sharp suit le même processus que JPG. La seule différence est que vous devez appeler le tiff méthode au lieu de la .jpeg méthode sur l’instance Sharp.
• AVIF: La compression d'image AVIF (AV1 Image File Format) avec Sharp suit le même processus que JPG. La seule différence est que vous devez appeler le avif méthode au lieu de la .jpeg méthode sur l’instance Sharp. La valeur par défaut AVIF pour qualité est 50.
• HEIF: La compression d'image HEIF (High Efficiency Image File Format) avec Sharp suit le même processus que JPG. La seule différence est que vous devez appeler le génisse méthode au lieu de la .jpeg méthode sur l’instance Sharp. La valeur par défaut AVIF pour qualité est 50.

Compresser des images avec Sharp

Si vous avez cloné le référentiel GitHub, ouvrez votre app.js et ajoutez les importations suivantes.

const sharp = require("sharp");
const { exec } = require("child_process");

exécutif est une fonction fournie par le enfant_processus module qui vous permet d'exécuter des commandes shell ou des processus externes depuis votre application Node.js.

Vous pouvez utiliser cette fonction pour exécuter une commande qui compare les tailles de fichiers avant et après compression.

Ensuite, remplacez le POST '/single' avec le bloc de code ci-dessous :

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);
 }
});

Le bloc de code ci-dessus implémente la technique de compression des images JPEG et compare les tailles avant et après l'utilisation du du commande.

Le du command est un utilitaire Unix qui signifie « utilisation du disque ». Il estime l'utilisation de l'espace fichier et analyse l'utilisation du disque dans un répertoire ou un ensemble de répertoires. Lorsque vous exécutez le du commande avec le -h drapeau, il affiche l'espace fichier utilisé par chaque sous-répertoire et son contenu sous une forme lisible par l'homme.

Démarrez votre service de téléchargement en exécutant cette commande :

node app.js

Ensuite, testez votre application en envoyant une image JPG à l'itinéraire hôte local :/upload-and-compressen utilisant l'application client Postman ou n'importe quel autre outil de test d'API.

Vous devriez voir une réponse similaire à celle-ci :

{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}

Autres utilisations du module Sharp

En plus de compresser les images, le module Sharp peut également redimensionner, recadrer, faire pivoter et retourner les images selon les spécifications souhaitées. Il prend également en charge les ajustements de l'espace colorimétrique, les opérations de canal alpha et les conversions de format.