Att komprimera bilder för din webbplats eller i din app kan förbättra prestandan radikalt. Sharp gör de tunga lyften.
Onödigt stora bilder kan leda till långsammare svarstider, förbruka överdriven bandbredd och ge en trög upplevelse för användare, särskilt de som har långsammare anslutningar. Detta kan resultera i högre avvisningsfrekvens eller färre konverteringar.
Att komprimera bilder innan du laddar upp dem kan lindra dessa problem och ge en bättre användarupplevelse. Sharp-modulen gör denna process snabb och enkel.
Konfigurera din utvecklingsmiljö
För att demonstrera processen att komprimera bilder, börja med ställa in en bilduppladdningstjänst med multer. Du kan påskynda processen genom att klona detta GitHub-förråd.
Efter att ha klonat GitHub-förvaret, kör det här kommandot för att installera beroenden för bilduppladdningstjänsten:
npm install
Installera sedan Sharp genom att köra det här kommandot:
npm install sharp
De Skarp modulen ä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 effektivt. Sharp har även utmärkt stöd för att komprimera bilder.
Komprimeringstekniker för olika bildformat
Olika bildformat har distinkta kompressionstekniker. Detta beror på att var och en tillgodoser specifika användningsområden och krav, och de prioriterar olika faktorer inklusive kvalitet, filstorlek och funktioner som transparens och animationer.
JPG/JPEG
JPEG är en bildkomprimeringsstandard utvecklad av Joint Photographic Experts Group för att komprimera fotografier och realistiska bilder med kontinuerliga toner och färggradienter. Det använder en förlustlös komprimeringsalgoritm, genererar mindre filer genom att kassera en del bilddata.
För att komprimera en JPEG-bild med Sharp, importera Sharp-modulen och skicka filens sökväg eller en buffert för bilden som ett argument. Ring sedan till .jpeg metod på Skarp exempel. Skicka sedan ett konfigurationsobjekt med en kvalitet egenskap som tar ett nummer mellan 0 och 100 som ett värde. Var 0 ger den minsta kompressionen med lägst kvalitet och 100 ger den största komprimeringen med högsta kvalitet.
Du kan ställa in värdet beroende på dina behov. För bästa komprimeringsresultat, håll värdet mellan 50-80 att hitta en balans mellan storlek och kvalitet.
Avsluta genom att spara den komprimerade bilden i filsystemet med hjälp av .toFile metod. Skicka sökvägen till filen du vill skriva till som ett argument.
Till exempel:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Standardvärdet för kvalitet är 80.
PNG
PNG (Portable Network Graphics) är ett bildfilformat känt för sin förlustfria komprimering och stöd för transparenta bakgrunder.
Att komprimera en PNG-bild med Sharp liknar att komprimera en JPEG-bild med Sharp. Det finns dock två ändringar du behöver göra när bilden är i PNG-format.
- Sharp bearbetar PNG-bilder med hjälp av .png metoden istället för .jpeg metod.
- De .png metod använder kompressionsnivå, som är en siffra mellan 0 och 9 istället för kvalitet i sitt konfigurationsobjekt. 0 ger den snabbaste och största möjliga kompressionen, medan 9 ger den långsammaste och minsta möjliga kompressionen.
Till exempel:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Standardvärdet för kompressionsnivå är 6.
Andra format
Sharps stöder komprimering i olika andra bildformat som inkluderar:
- WebP: WebP-bildkomprimering med Sharp följer samma process som JPG. Den enda skillnaden är att du måste ringa till webbp metoden istället för .jpeg metod på Sharp-instansen.
- TIFF: TIFF (Tag Image File Format) bildkomprimering med Sharp följer samma process som JPG. Den enda skillnaden är att du måste ringa till tiff metoden istället för .jpeg metod på Sharp-instansen.
- AVIF: AVIF (AV1 Image File Format) bildkomprimering med Sharp följer samma process som JPG. Den enda skillnaden är att du måste ringa till avif metoden istället för .jpeg metod på Sharp-instansen. AVIF-standardvärdet för kvalitet är 50.
- HEIF: HEIF (High Efficiency Image File Format) bildkomprimering med Sharp följer samma process som JPG. Den enda skillnaden är att du måste ringa till hef metoden istället för .jpeg metod på Sharp-instansen. AVIF-standardvärdet för kvalitet är 50.
Komprimera bilder med Sharp
Om du klonade GitHub-förvaret, öppna ditt app.js fil och lägg till följande importer.
const sharp = require("sharp");
const { exec } = require("child_process");
exec är en funktion som tillhandahålls av barnprocess modul som låter dig köra skalkommandon eller externa processer från din Node.js-applikation.
Du kan använda den här funktionen för att köra ett kommando som jämför filstorlekarna före och efter komprimering.
Byt sedan ut POST '/single’ hanterare med kodblocket nedan:
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);
}
});
Kodblocket ovan implementerar tekniken för att komprimera JPEG-bilder och jämför storlekarna före och efter användning av du kommando.
De du kommando är ett Unix-verktyg som står för "diskanvändning." Den uppskattar filutrymmesanvändning och analyserar diskanvändning i en katalog eller uppsättning kataloger. När du kör du kommandot med -h flaggan visar den filutrymmet som varje underkatalog använder och dess innehåll i läsbar form.
Starta uppladdningstjänsten genom att köra detta kommando:
node app.js
Testa sedan din applikation genom att skicka en JPG-bild till rutten lokal värd:
Du bör se ett svar som liknar detta:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Andra användningsområden för Sharp-modulen
Förutom att komprimera bilder kan den skarpa modulen även ändra storlek, beskära, rotera och vända bilder till önskade specifikationer. Det stöder även färgrymdsjusteringar, alfakanaloperationer och formatkonverteringar.
