Å komprimere bilder for nettstedet ditt eller i appen din kan forbedre ytelsen radikalt. Sharp gjør de tunge løftene.
Unødvendig store bilder kan føre til langsommere responstider, forbruke overdreven båndbredde og gi en treg opplevelse for brukere, spesielt de på tregere tilkoblinger. Dette kan resultere i høyere fluktfrekvens eller færre konverteringer.
Komprimering av bilder før du laster dem opp kan redusere disse problemene og gi en bedre brukeropplevelse. Sharp-modulen gjør denne prosessen rask og enkel.
Sette opp utviklingsmiljøet ditt
For å demonstrere prosessen med å komprimere bilder, start med sette opp en bildeopplastingstjeneste ved hjelp av multer. Du kan fremskynde prosessen ved å klone dette GitHub-depotet.
Etter å ha klonet GitHub-depotet, kjør denne kommandoen for å installere avhengighetene for bildeopplastingstjenesten:
npm install
Installer deretter Sharp ved å kjøre denne kommandoen:
npm install sharp
De Skarp modul er et høyytelses Node.js-bibliotek for behandling og manipulering av bilder. Du kan bruke Sharp til å endre størrelse, beskjære, rotere og utføre forskjellige andre operasjoner på bilder effektivt. Sharp har også utmerket støtte for å komprimere bilder.
Komprimeringsteknikker for forskjellige bildeformater
Ulike bildeformater har distinkte kompresjonsteknikker. Dette er fordi de imøtekommer spesifikke bruksområder og krav, og de prioriterer ulike faktorer, inkludert kvalitet, filstørrelse og funksjoner som gjennomsiktighet og animasjoner.
JPG/JPEG
JPEG er en bildekomprimeringsstandard utviklet av Joint Photographic Experts Group for å komprimere fotografier og realistiske bilder med kontinuerlige toner og fargegradienter. Det bruker en tapsbasert komprimeringsalgoritme, genererer mindre filer ved å forkaste noen bildedata.
For å komprimere et JPEG-bilde med Sharp, importerer du Sharp-modulen og sender filbanen eller en buffer til bildet som et argument. Deretter ringer du .jpeg metode på Skarp forekomst. Send deretter et konfigurasjonsobjekt med en kvalitet egenskap som tar et tall mellom 0 og 100 som en verdi. Hvor 0 returnerer den minste komprimeringen med den laveste kvaliteten og 100 returnerer den største komprimeringen med høyeste kvalitet.
Du kan angi verdien avhengig av dine behov. For best komprimeringsresultat, hold verdien mellom 50-80 å finne en balanse mellom størrelse og kvalitet.
Avslutt ved å lagre det komprimerte bildet til filsystemet ved å bruke .å lagre metode. Send stien til filen 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`);
});
Standardverdien for kvalitet er 80.
PNG
PNG (Portable Network Graphics) er et bildefilformat kjent for sin tapsfrie komprimering og støtte for transparente bakgrunner.
Å komprimere et PNG-bilde med Sharp ligner på å komprimere et JPEG-bilde med Sharp. Det er imidlertid to endringer du må gjøre når bildet er i PNG-format.
- Sharp behandler PNG-bilder ved hjelp av .png metoden i stedet for .jpeg metode.
- De .png metoden bruker komprimeringsnivå, som er et tall mellom 0 og 9 i stedet for kvalitet i konfigurasjonsobjektet. 0 gir raskest og størst mulig kompresjon, mens 9 gir den tregeste og minste kompresjonen mulig.
For eksempel:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Standardverdien for kompresjonsnivå er 6.
Andre formater
Sharps støtter komprimering i forskjellige andre bildeformater som inkluderer:
- WebP: WebP-bildekomprimering med Sharp følger samme prosess som JPG. Den eneste forskjellen er at du må ringe webp metoden i stedet for .jpeg metode på Sharp-forekomsten.
- TIFF: TIFF (Tag Image File Format) bildekomprimering med Sharp følger samme prosess som JPG. Den eneste forskjellen er at du må ringe tiff metoden i stedet for .jpeg metode på Sharp-forekomsten.
- AVIF: AVIF (AV1 Image File Format) bildekomprimering med Sharp følger samme prosess som JPG. Den eneste forskjellen er at du må ringe avif metoden i stedet for .jpeg metode på Sharp-forekomsten. AVIF-standardverdien for kvalitet er 50.
- HEIF: HEIF (High Efficiency Image File Format) bildekomprimering med Sharp følger samme prosess som JPG. Den eneste forskjellen er at du må ringe heif metoden i stedet for .jpeg metode på Sharp-forekomsten. AVIF-standardverdien for kvalitet er 50.
Komprimering av bilder med Sharp
Hvis du klonet GitHub-depotet, åpner du app.js fil og legg til følgende importer.
const sharp = require("sharp");
const { exec } = require("child_process");
exec er en funksjon levert av barneprosess modul som lar deg utføre skallkommandoer eller eksterne prosesser fra din Node.js-applikasjon.
Du kan bruke denne funksjonen til å kjøre en kommando som sammenligner filstørrelsene før og etter komprimering.
Deretter erstatter du 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 for å komprimere JPEG-bilder og sammenligner størrelsene før og etter bruk av du kommando.
De du kommando er et Unix-verktøy som står for "diskbruk". Den estimerer bruk av filplass og analyserer diskbruk i en katalog eller et sett med kataloger. Når du kjører du kommando med -h flagg, viser den filplassen hver underkatalog bruker og innholdet i menneskelig lesbar form.
Start opplastingstjenesten ved å kjøre denne kommandoen:
node app.js
Deretter tester du applikasjonen din ved å sende et JPG-bilde til ruten lokal vert:
Du bør se et svar som ligner på dette:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Annen bruk av Sharp-modulen
I tillegg til å komprimere bilder, kan den skarpe modulen også endre størrelse, beskjære, rotere og vende bilder til ønskede spesifikasjoner. Den støtter også fargeromsjusteringer, alfakanaloperasjoner og formatkonverteringer.
