Komprimering af billeder til dit websted eller i din app kan forbedre ydeevnen radikalt. Sharp klarer de tunge løft.
Unødvendigt store billeder kan føre til langsommere svartider, forbruge for stor båndbredde og give en træg oplevelse for brugere, især dem på langsommere forbindelser. Dette kan resultere i højere afvisningsprocenter eller færre konverteringer.
Komprimering af billeder, før du uploader dem, kan afhjælpe disse problemer og give en bedre brugeroplevelse. Sharp-modulet gør denne proces hurtig og nem.
Opsætning af dit udviklingsmiljø
For at demonstrere processen med at komprimere billeder, start med opsætning af en billedoverførselstjeneste ved hjælp af multer. Du kan fremskynde processen ved at klone dette GitHub-lager.
Efter kloning af GitHub-lageret, kør denne kommando for at installere afhængighederne for billedoverførselstjenesten:
npm install
Installer derefter Sharp ved at køre denne kommando:
npm install sharp
Det Skarp modul er et højtydende Node.js-bibliotek til behandling og manipulering af billeder. Du kan bruge Sharp til at ændre størrelse, beskære, rotere og udføre forskellige andre handlinger på billeder effektivt. Sharp har også fremragende støtte til at komprimere billeder.
Kompressionsteknikker til forskellige billedformater
Forskellige billedformater har forskellige kompressionsteknikker. Dette skyldes, at de hver især henvender sig til specifikke anvendelser og krav, og de prioriterer forskellige faktorer, herunder kvalitet, filstørrelse og funktioner som gennemsigtighed og animationer.
JPG/JPEG
JPEG er en billedkomprimeringsstandard udviklet af Joint Photographic Experts Group til at komprimere fotografier og realistiske billeder med kontinuerlige toner og farvegradienter. Det bruger en tabsgivende kompressionsalgoritme, genererer mindre filer ved at kassere nogle billeddata.
For at komprimere et JPEG-billede med Sharp skal du importere Sharp-modulet og sende filstien eller en buffer af billedet som et argument. Ring derefter til .jpeg metode på Skarp eksempel. Send derefter et konfigurationsobjekt med en kvalitet egenskab, der tager et tal imellem 0 og 100 som en værdi. Hvor 0 returnerer den mindste kompression med den laveste kvalitet og 100 returnerer den største komprimering med den højeste kvalitet.
Du kan indstille værdien afhængigt af dine behov. For de bedste komprimeringsresultater skal du holde værdien mellem 50-80 at finde en balance mellem størrelse og kvalitet.
Afslut ved at gemme det komprimerede billede i filsystemet ved hjælp af .toFile metode. Send stien til den fil, du vil skrive til, som et argument.
For eksempel:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Standardværdien for kvalitet er 80.
PNG
PNG (Portable Network Graphics) er et billedfilformat kendt for sin tabsfri komprimering og understøttelse af transparente baggrunde.
At komprimere et PNG-billede med Sharp svarer til at komprimere et JPEG-billede med Sharp. Der er dog to ændringer, du skal foretage, når billedet er i PNG-format.
- Sharp behandler PNG-billeder ved hjælp af .png metode i stedet for .jpeg metode.
- Det .png metode bruger kompressionsniveau, som er et tal imellem 0 og 9 i stedet for kvalitet i sit konfigurationsobjekt. 0 giver den hurtigste og størst mulige kompression, mens 9 giver den langsomste og mindst mulige kompression.
For eksempel:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Standardværdien for kompressionsniveau er 6.
Andre formater
Sharps understøtter komprimering i forskellige andre billedformater, som omfatter:
- WebP: WebP-billedkomprimering med Sharp følger samme proces som JPG. Den eneste forskel er, at du skal ringe til webp metode i stedet for .jpeg metode på Sharp-forekomsten.
- TIFF: TIFF (Tag Image File Format) billedkomprimering med Sharp følger samme proces som JPG. Den eneste forskel er, at du skal ringe til tiff metode i stedet for .jpeg metode på Sharp-forekomsten.
- AVIF: AVIF (AV1 Image File Format) billedkomprimering med Sharp følger samme proces som JPG. Den eneste forskel er, at du skal ringe til avif metode i stedet for .jpeg metode på Sharp-forekomsten. AVIF-standardværdien for kvalitet er 50.
- HEIF: HEIF (High Efficiency Image File Format) billedkomprimering med Sharp følger samme proces som JPG. Den eneste forskel er, at du skal ringe til hef metode i stedet for .jpeg metode på Sharp-forekomsten. AVIF-standardværdien for kvalitet er 50.
Komprimering af billeder med Sharp
Hvis du klonede GitHub-depotet, skal du åbne din app.js fil og tilføje følgende importer.
const sharp = require("sharp");
const { exec } = require("child_process");
exec er en funktion leveret af barn_proces modul, der giver dig mulighed for at udføre shell-kommandoer eller eksterne processer fra din Node.js-applikation.
Du kan bruge denne funktion til at køre en kommando, der sammenligner filstørrelserne før og efter komprimering.
Udskift derefter POST '/single' handler med kodeblokken nedenfor:
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);
}
});
Kodeblokken ovenfor implementerer teknikken til at komprimere JPEG-billeder og sammenligner størrelserne før og efter brug af du kommando.
Det du kommando er et Unix-værktøj, der står for "diskbrug." Den estimerer brugen af filplads og analyserer diskbrugen i en mappe eller et sæt mapper. Når du kører du kommando med -h flag, viser den filpladsen, som hver undermappe bruger, og dens indhold i menneskelæselig form.
Start din uploadtjeneste ved at køre denne kommando:
node app.js
Test derefter din applikation ved at sende et JPG-billede til ruten lokal vært:
Du bør se et svar, der ligner dette:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Andre anvendelser af Sharp-modulet
Ud over at komprimere billeder kan det skarpe modul også ændre størrelse, beskære, rotere og vende billeder til de ønskede specifikationer. Det understøtter også farverumsjusteringer, alfakanaloperationer og formatkonverteringer.