Comprimarea imaginilor pentru site-ul dvs. web sau în cadrul aplicației dvs. poate îmbunătăți radical performanța. Sharp face munca grea.

Imaginile inutil de mari pot duce la timpi de răspuns mai lenți, pot consuma lățime de bandă excesivă și pot oferi utilizatorilor o experiență lenta, în special celor cu conexiuni mai lente. Acest lucru poate duce la rate de respingere mai mari sau la mai puține conversii.

Comprimarea imaginilor înainte de a le încărca poate atenua aceste probleme și poate oferi o experiență mai bună pentru utilizator. Modulul Sharp face acest proces rapid și ușor.

Configurarea mediului de dezvoltare

Pentru a demonstra procesul de comprimare a imaginilor, începeți prin configurarea unui serviciu de încărcare a imaginilor folosind multer. Puteți accelera procesul prin clonare acest depozit GitHub.

După clonarea depozitului GitHub, rulați această comandă pentru a instala dependențele pentru serviciul de încărcare a imaginilor:

npm install

Apoi, instalați Sharp rulând această comandă:

instagram viewer 
npm install sharp

The Ascuțit module este o bibliotecă Node.js de înaltă performanță pentru procesarea și manipularea imaginilor. Puteți utiliza Sharp pentru a redimensiona, a decupa, a roti și a efectua diverse alte operații asupra imaginilor în mod eficient. Sharp are, de asemenea, un suport excelent pentru comprimarea imaginilor.

Tehnici de compresie pentru diferite formate de imagine

Diferite formate de imagine au tehnici distincte de compresie. Acest lucru se datorează faptului că fiecare se adresează utilizărilor și cerințelor specifice și acordă prioritate diferiților factori, inclusiv calitatea, dimensiunea fișierului și caracteristici precum transparența și animațiile.

JPG/JPEG

JPEG este un standard de compresie a imaginilor dezvoltat de Joint Photographic Experts Group pentru a comprima fotografiile și imaginile realiste cu tonuri continue și gradiente de culoare. Folosește un algoritm de compresie cu pierderi, generând fișiere mai mici prin eliminarea unor date de imagine.

Pentru a comprima o imagine JPEG cu Sharp, importați modulul Sharp și transmiteți filePath sau un buffer al imaginii ca argument. Apoi, sunați la .jpeg metoda pe Ascuțit instanță. Apoi, treceți un obiect de configurare cu a calitate proprietate care ia un număr între 0 și 100 ca valoare. Unde 0 returnează cea mai mică compresie cu cea mai scăzută calitate și 100 returnează cea mai mare compresie cu cea mai înaltă calitate.

Puteți seta valoarea în funcție de nevoile dvs. Pentru cele mai bune rezultate de compresie, păstrați valoarea între 50-80 pentru a găsi un echilibru între dimensiune și calitate.

Încheiați prin salvarea imaginii comprimate în sistemul de fișiere folosind .la dosar metodă. Treceți calea fișierului în care doriți să scrieți ca argument.

De exemplu:

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

Valoarea implicită pentru calitate este 80.

PNG

PNG (Portable Network Graphics) este un format de fișier imagine cunoscut pentru compresia fără pierderi și suportul pentru fundaluri transparente.

Comprimarea unei imagini PNG cu Sharp este similară cu comprimarea unei imagini JPEG cu Sharp. Cu toate acestea, există două modificări pe care trebuie să le faceți când imaginea este în format PNG.

  1. Sharp procesează imagini PNG folosind .png metoda în loc de .jpeg metodă.
  2. The .png metode de utilizare compresieLevel, care este un număr între 0 și 9 în loc de calitate în obiectul său de configurare. 0 oferă cea mai rapidă și mai mare compresie posibilă, în timp ce 9 oferă cea mai lentă și mai mică compresie posibilă.

De exemplu:

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

Valoarea implicită pentru compresieLevel este 6.

Alte formate

Sharps acceptă compresia în diverse alte formate de imagine, care includ:

  • WebP: Comprimarea imaginii WebP cu Sharp urmează același proces ca și JPG. Singura diferență este că trebuie să suni la webp metoda în loc de .jpeg metoda pe instanța Sharp.
  • TIFF: compresia imaginii TIFF (Tag Image File Format) cu Sharp urmează același proces ca și JPG. Singura diferență este că trebuie să suni la tiff metoda în loc de .jpeg metoda pe instanța Sharp.
  • AVIF: Comprimarea imaginii AVIF (AV1 Image File Format) cu Sharp urmează același proces ca și JPG. Singura diferență este că trebuie să suni la avif metoda în loc de .jpeg metoda pe instanța Sharp. Valoarea implicită AVIF pentru calitate este 50.
  • HEIF: Compresia imaginii HEIF (High Efficiency Image File Format) cu Sharp urmează același proces ca și JPG. Singura diferență este că trebuie să suni la heif metoda în loc de .jpeg metoda pe instanța Sharp. Valoarea implicită AVIF pentru calitate este 50.

Comprimarea imaginilor cu Sharp

Dacă ați clonat depozitul GitHub, deschideți app.js fișier și adăugați următoarele importuri.

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

exec este o funcție oferită de proces_copil modul care vă permite să executați comenzi shell sau procese externe din aplicația dvs. Node.js.

Puteți utiliza această funcție pentru a rula o comandă care compară dimensiunile fișierelor înainte și după comprimare.

Apoi, înlocuiți POST „/single’ handler cu blocul de cod de mai jos:

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

Blocul de cod de mai sus implementează tehnica de comprimare a imaginilor JPEG și compară dimensiunile înainte și după utilizare du comanda.

The du comanda este un utilitar Unix care înseamnă „utilizare disc”. Estimează utilizarea spațiului de fișiere și analizează utilizarea discului într-un director sau set de directoare. Când rulați du comanda cu -h flag, afișează spațiul de fișier pe care îl folosește fiecare subdirector și conținutul acestuia într-o formă care poate fi citită de om.

Porniți serviciul de încărcare rulând această comandă:

node app.js

Apoi, testați aplicația trimițând o imagine JPG către traseu gazdă locală:/upload-and-compressfolosind aplicația client Postman sau oricare alt instrument de testare API.

Ar trebui să vedeți un răspuns similar cu acesta:

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

Alte utilizări ale modulului Sharp

Pe lângă comprimarea imaginilor, modulul sharp poate, de asemenea, să redimensioneze, să decupe, să rotiți și să răstoarne imaginile la specificațiile dorite. De asemenea, acceptă ajustări ale spațiului de culoare, operațiuni ale canalului alfa și conversii de format.