Komprimering av bilder i Node.js med Sharp
Onödigt stora bilder kan leda till långsammare svarstider, förbruka överdriven bandbredd och ge en trög upplevelse för användarna, särskilt de med långsammare uppkopplingar. Detta kan leda till högre avvisningsfrekvens eller färre konverteringar.
Innan digitala mediefiler överförs kan komprimering av deras visuella komponenter bidra till att minska potentiella komplikationer och ge ett förbättrat användargränssnitt. Sharp-modulen presenterar en enkel och ändamålsenlig lösning för att uppnå detta mål.
Konfigurera din utvecklingsmiljö
För att illustrera hur man minskar storleken på visuellt innehåll börjar vi med att implementera en filuppladdningsfunktion med hjälp av Multer. Man kan påskynda processen genom att kopiera koden från detta GitHub-arkiv.
För att framgångsrikt konfigurera bilduppladdningstjänsten från ett klonat GitHub-arkiv, kör följande kommando för att installera alla nödvändiga beroenden:
npm install
Installera sedan Sharp genom att köra det här kommandot:
npm install sharp
Modulen Sharp är ett högpresterande Node.js-bibliotek för bearbetning och manipulering av bilder. Du kan använda Sharp för att ändra storlek, beskära, rotera och utföra olika andra operationer på bilder på ett effektivt sätt. Sharp har också utmärkt stöd för komprimering av bilder.
Komprimeringstekniker för olika bildformat
Olika bildformat använder unika komprimeringsstrategier, eftersom de är skräddarsydda för att hantera särskilda användningsfall och överväganden som kvalitet, fildimensioner och attribut som transparens och animeringsfunktioner.
JPG/JPEG
JPEG, eller Joint Photographic Experts Groups bildkomprimeringsstandard, utformades särskilt för komprimering av fotografier och andra bilder som har kontinuerliga ton- och färggraderingar. Genom att använda en unik form av förlustkomprimering minskar den effektivt filstorleken genom att selektivt kassera vissa aspekter av de ursprungliga bilddata.
För det första, importera Sharp-modulen; för det andra, ange antingen sökvägen till bildfilen eller en buffert som innehåller dess innehåll; för det tredje, använd metoden .jpeg från den importerade Sharp-instansen; slutligen, inkludera ett konfigurationsobjekt med ett kvalitet attribut satt till ett numeriskt värde mellan 0 och 100, där lägre värden representerar mindre filer men sämre visuell kvalitet medan högre värden producerar större filer med bättre klarhet.
Man kan justera parametern enligt sina specifika krav.För att uppnå optimal komprimering rekommenderas att värdet hålls inom intervallet 50-80, varigenom en lämplig jämvikt mellan filstorlek och bildkvalitet uppnås.
Avsluta med att lagra den komprimerade representationen i filsystemet med hjälp av metoden .toFile och ange sökvägen till den önskade utdatafilen som en parameter.
Exempel:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Standardinställningen för bildkvalitet är 80 som standard.
PNG
PNG, eller Portable Network Graphics, är ett allmänt erkänt bildfilformat som är känt för sin förmåga att ge förlustfri datakomprimering och samtidigt stödja transparens i bilder, vilket gör det mycket mångsidigt och perfekt för olika tillämpningar.
När man försöker komprimera en bild som sparats i PNG-format (Portable Network Graphics) med Sharp är det viktigt att notera att processen har flera likheter med komprimering av en jämförbar bild som sparats som en JPEG-fil (Joint Photographic Experts Group). Det finns dock två distinkta justeringar som måste göras under denna procedur.
Sharp använder filformatet PNG, i motsats till JPEG, för att hantera bildbehandling.
PNG-formatet använder en ny metod för komprimering genom att använda parametern “compressionLevel”, snarare än den traditionella inställningen “quality”, som ett sätt att kontrollera den komprimeringsnivå som uppnås. Vid den lägsta inställningen (0) ger algoritmen den snabbaste och mest omfattande minskningen av filstorleken, medan den vid den högsta inställningen (9) ger den långsammaste och minst omfattande komprimeringen.
Till exempel:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Som standard är värdet för komprimeringsnivån inställt på 6.
Andra format
Sharps har även stöd för komprimering av bilder i en mängd andra filformat, t.ex:
Användning av bildkomprimeringsalgoritmen WebP tillsammans med Sharp följer en liknande procedur som användning av JPEG, med den enda skillnaden att metoden webp måste anropas från Sharp-instansen i stället för metoden .jpeg .
Tagged Image File Format (TIFF) som används för komprimering av bilder i Sharps implementering följer en liknande procedur som den som används av JPEG, dock med en alternativ metodanropning. Istället för att anropa “.jpeg”-metoden på Sharp-instansen, måste man anropa “tiff”-metoden istället.
AVID-formatet, som avser AV1 Image File Format som används för bildkomprimering av Sharp, fungerar på samma sätt som JPEG.Istället för att använda .jpeg-metoden på en Sharp-instans måste man dock använda avif-metoden istället. Dessutom är det värt att notera att standardvärdet för kvalitetsinställningen i AVIF-formatet är satt till 50.
HEIF, som står för High Efficiency Image File Format, använder en liknande procedur när det gäller komprimering jämfört med JPEG. Det kräver dock användning av metoden heif snarare än metoden .jpeg på Sharp-instansen. Dessutom har AVIF som standard en bildkvalitetsinställning på 50.
Komprimera bilder med Sharp
Om man har reproducerat GitHub-arkivet är det nödvändigt att komma åt filen “app.js” i projektet och införliva de ovannämnda importangivelserna i den.
const sharp = require("sharp");
const { exec } = require("child_process");
Funktionen exec , som är tillgänglig via modulen child_process , gör det möjligt att köra skalkommandon eller externa processer i en Node.js-applikation.
Med den här funktionen kan du utföra ett kommando som jämför dimensionerna på en fil före och efter komprimeringen.
Därefter ersätter vi den nuvarande POST '/single' hanteraren genom att införliva det medföljande kodavsnittet i den.
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);
}
});
Den ovan nämnda kodimplementeringen omfattar en metod för komprimering av JPEG-bildfiler, samtidigt som en jämförelse görs av deras respektive filstorlekar före och efter användning av kommandot du .
Kommandot du är ett Unix-verktyg som ger information om diskanvändning genom att uppskatta hur mycket utrymme som filer och kataloger inom angivna kataloger upptar. Genom att använda flaggan -h kan utdata visas i ett format som är lättförståeligt för människor, och som anger det filutrymme som används av enskilda underkataloger och deras respektive innehåll.
För att starta filöverföringstjänsten kör du följande instruktion:
node app.js
För att validera programmets funktionalitet kan du använda klientprogrammet Postman eller valfritt alternativt API-testverktyg för att skicka en JPEG-bild till den angivna ändpunkten " /upload-and-compress>" för ytterligare bearbetning och komprimering.
Du förväntas få ett svar som liknar följande format:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Andra användningsområden för Sharp-modulen
Sharp-modulen erbjuder ett omfattande utbud av funktioner för bildmanipulering utöver ren komprimering. Dessa inkluderar storleksändring, beskärning, rotering och vändning av bilder enligt angivna dimensioner. Dessutom kan man modifiera färgrymden, använda alfakanaler och konvertera mellan olika filformat.