Compressione delle immagini in Node.js con Sharp

Immagini inutilmente grandi possono portare a tempi di risposta più lenti, consumare una larghezza di banda eccessiva e fornire un'esperienza lenta per gli utenti, soprattutto quelli con connessioni più lente. Ciò può comportare frequenze di rimbalzo più elevate o meno conversioni.

La compressione delle immagini prima di caricarle può mitigare questi problemi e fornire un'esperienza utente migliore. Il modulo Sharp rende questo processo semplice e veloce.

Configurazione dell'ambiente di sviluppo

Per dimostrare il processo di compressione delle immagini, inizia da impostare un servizio di caricamento immagini utilizzando multer. Puoi accelerare il processo clonando questo repository GitHub.

Dopo aver clonato il repository GitHub, esegui questo comando per installare le dipendenze per il servizio di caricamento delle immagini:

npm install

Successivamente, installa Sharp eseguendo questo comando:

npm install sharp

IL Affilato module è una libreria Node.js ad alte prestazioni per l'elaborazione e la manipolazione delle immagini. È possibile utilizzare Sharp per ridimensionare, ritagliare, ruotare ed eseguire varie altre operazioni sulle immagini in modo efficiente. Sharp ha anche un eccellente supporto per la compressione delle immagini.

Tecniche di compressione per diversi formati di immagine

Diversi formati di immagine hanno tecniche di compressione distinte. Questo perché ciascuno soddisfa usi e requisiti specifici e dà priorità a diversi fattori tra cui qualità, dimensione del file e funzionalità come trasparenza e animazioni.

JPG/JPEG

JPEG è uno standard di compressione delle immagini sviluppato dal Joint Photographic Experts Group per comprimere fotografie e immagini realistiche con toni continui e sfumature di colore. Utilizza un algoritmo di compressione con perdita, generando file più piccoli scartando alcuni dati dell'immagine.

Per comprimere un'immagine JPEG con Sharp, importa il modulo Sharp e passa il filePath o un buffer dell'immagine come argomento. Successivamente, chiama il .jpeg metodo sul Affilato esempio. Quindi, passa un oggetto di configurazione con a qualità proprietà che accetta un numero compreso tra 0 E 100 come valore. Dove 0 restituisce la compressione più piccola con la qualità più bassa e 100 restituisce la compressione maggiore con la massima qualità.

È possibile impostare il valore in base alle proprie esigenze. Per ottenere i migliori risultati di compressione, mantenere il valore compreso tra 50-80 per trovare un equilibrio tra dimensioni e qualità.

Termina salvando l'immagine compressa nel file system utilizzando il file .toFile metodo. Passa il percorso del file su cui vuoi scrivere come argomento.

Per esempio:

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

Il valore predefinito per qualità È 80.

PNG

PNG (Portable Network Graphics) è un formato di file immagine noto per la sua compressione senza perdita di dati e il supporto per sfondi trasparenti.

La compressione di un'immagine PNG con Sharp è simile alla compressione di un'immagine JPEG con Sharp. Tuttavia, ci sono due modifiche che devi apportare quando l'immagine è in formato PNG.

1. Sharp elabora le immagini PNG utilizzando il file .png metodo invece del .jpeg metodo.
2. IL .png metodo utilizza livello di compressione, che è un numero compreso tra 0 E 9 invece di qualità nel suo oggetto di configurazione. 0 offre la compressione più rapida e ampia possibile, mentre 9 fornisce la compressione più lenta e piccola possibile.

Per esempio:

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

Il valore predefinito per compressionLevel È 6.

Altri formati

Sharps supporta la compressione in vari altri formati di immagine che includono:

• WebP: La compressione delle immagini WebP con Sharp segue lo stesso processo di JPG. L'unica differenza è che devi chiamare il webp metodo invece del .jpeg metodo sull'istanza Sharp.
• TIFF: La compressione delle immagini TIFF (Tag Image File Format) con Sharp segue lo stesso processo di JPG. L'unica differenza è che devi chiamare il tiff metodo invece del .jpeg metodo sull'istanza Sharp.
• AVIF: La compressione delle immagini AVIF (AV1 Image File Format) con Sharp segue lo stesso processo di JPG. L'unica differenza è che devi chiamare il avif metodo invece del .jpeg metodo sull'istanza Sharp. Il valore predefinito AVIF per qualità È 50.
• HEIF: La compressione delle immagini HEIF (High Efficiency Image File Format) con Sharp segue lo stesso processo di JPG. L'unica differenza è che devi chiamare il heif metodo invece del .jpeg metodo sull'istanza Sharp. Il valore predefinito AVIF per qualità È 50.

Compressione delle immagini con Sharp

Se hai clonato il repository GitHub, apri il tuo app.js file e aggiungi le seguenti importazioni.

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

esecutivo è una funzione fornita da processo_figlio modulo che ti consente di eseguire comandi shell o processi esterni dalla tua applicazione Node.js.

È possibile utilizzare questa funzione per eseguire un comando che confronti le dimensioni del file prima e dopo la compressione.

Quindi, sostituisci il POST '/single’ gestore con il blocco di codice seguente:

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

Il blocco di codice riportato sopra implementa la tecnica per comprimere le immagini JPEG e confronta le dimensioni prima e dopo l'utilizzo del file du comando.

IL du Il comando è un'utilità Unix che sta per "utilizzo del disco". Stima l'utilizzo dello spazio file e analizza l'utilizzo del disco in una directory o in un insieme di directory. Quando esegui il file du comandare con il -H flag, visualizza lo spazio file utilizzato da ciascuna sottodirectory e il suo contenuto in formato leggibile dall'uomo.

Avvia il servizio di caricamento eseguendo questo comando:

node app.js

Successivamente, testa la tua applicazione inviando un'immagine JPG al percorso host locale:/upload-and-compressutilizzando l'app client Postman o qualsiasi altro strumento di test API.

Dovresti vedere una risposta simile a questa:

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

Altri usi del modulo Sharp

Oltre a comprimere le immagini, il modulo Sharp può anche ridimensionare, ritagliare, ruotare e capovolgere le immagini secondo le specifiche desiderate. Supporta inoltre le regolazioni dello spazio colore, le operazioni del canale alfa e le conversioni di formato.