Kujutiste tihendamine veebisaidi või rakenduse sees võib jõudlust radikaalselt parandada. Sharp tõstab raskusi.
Tarbetult suured pildid võivad põhjustada aeglasema reageerimisaja, tarbida liigset ribalaiust ja pakkuda kasutajatele, eriti aeglasemate ühenduste kasutajatele, loid kogemust. Selle tulemuseks võib olla suurem põrkemäär või vähem konversioone.
Piltide tihendamine enne nende üleslaadimist võib neid probleeme leevendada ja pakkuda paremat kasutuskogemust. Sharpi moodul muudab selle protsessi kiireks ja lihtsaks.
Arenduskeskkonna seadistamine
Piltide tihendamise protsessi demonstreerimiseks alustage piltide üleslaadimise teenuse seadistamine multeri abil. Kloonimise abil saate protsessi kiirendada see GitHubi hoidla.
Pärast GitHubi hoidla kloonimist käivitage see käsk, et installida pildi üleslaadimisteenuse sõltuvused:
npm install
Järgmisena installige Sharp, käivitades selle käsu:
npm install sharp
The Terav moodul on suure jõudlusega Node.js teek piltide töötlemiseks ja manipuleerimiseks. Sharpi saate kasutada piltide suuruse muutmiseks, kärpimiseks, pööramiseks ja mitmesuguste muude toimingute tegemiseks. Sharpil on suurepärane tugi ka piltide tihendamiseks.
Erinevate pildivormingute tihendustehnikad
Erinevad pildivormingud neil on erinevad tihendustehnikad. Seda seetõttu, et igaüks neist vastab konkreetsetele kasutusaladele ja nõuetele ning seab esikohale erinevad tegurid, sealhulgas kvaliteedi, faili suuruse ja funktsioonid, nagu läbipaistvus ja animatsioonid.
JPG/JPEG
JPEG on Joint Photographic Experts Groupi välja töötatud kujutiste tihendamise standard fotode ja realistlike piltide tihendamiseks pidevate toonide ja värvigradientidega. See kasutab kadudeta pakkimisalgoritm, genereerides väiksemaid faile, visates ära mõned pildiandmed.
JPEG-pildi tihendamiseks Sharpiga importige Sharpi moodul ja edastage argumendina failitee või pildi puhver. Järgmisena helistage .jpeg meetodil Terav näiteks. Seejärel edastage konfiguratsiooniobjekt koos a-ga kvaliteet omadus, mille vahel on arv 0 ja 100 väärtusena. Kus 0 tagastab väikseima tihenduse madalaima kvaliteediga ja 100 tagastab suurima tihenduse kõrgeima kvaliteediga.
Saate määrata väärtuse vastavalt oma vajadustele. Parimate tihendustulemuste saavutamiseks hoidke väärtust vahemikus 50-80 leida tasakaal suuruse ja kvaliteedi vahel.
Lõpetage, salvestades tihendatud kujutise failisüsteemi kasutades .toFile meetod. Edastage argumendina faili tee, kuhu soovite kirjutada.
Näiteks:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Vaikeväärtus jaoks kvaliteet on 80.
PNG
PNG (Portable Network Graphics) on pildifailivorming, mis on tuntud oma kadudeta pakkimise ja läbipaistvate taustade toe poolest.
PNG-kujutise Sharpiga tihendamine sarnaneb JPEG-kujutise Sharpiga tihendamisega. Kui pilt on PNG-vormingus, peate siiski tegema kaks muudatust.
- Sharp töötleb PNG-pilte kasutades .png meetod asemel .jpeg meetod.
- The .png meetod kasutab tihendamise tase, mis on arv vahel 0 ja 9 selle asemel kvaliteet selle konfiguratsiooniobjektis. 0 annab kiireima ja suurima võimaliku tihenduse, samas 9 annab võimalikult aeglase ja väikseima tihenduse.
Näiteks:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Vaikeväärtus jaoks compressionLevel on 6.
Muud vormingud
Sharps toetab tihendamist mitmesugustes muudes pildivormingutes, sealhulgas:
- WebP: WebP-pildi tihendamine Sharpiga järgib sama protsessi kui JPG. Ainus erinevus on see, et peate helistama webp meetod asemel .jpeg meetod Sharpi eksemplaris.
- TIFF: TIFF (Tag Image File Format) kujutise tihendamine Sharpiga järgib sama protsessi kui JPG. Ainus erinevus on see, et peate helistama tiff meetod asemel .jpeg meetod Sharpi eksemplaris.
- AVIF: AVIF (AV1 Image File Format) kujutise tihendamine Sharpiga järgib sama protsessi kui JPG. Ainus erinevus on see, et peate helistama avif meetod asemel .jpeg meetod Sharpi eksemplaris. AVIF-i vaikeväärtus kvaliteet on 50.
- HEIF: HEIF (kõrge tõhususega pildifailivorming) pildi tihendamine Sharpiga järgib sama protsessi nagu JPG. Ainus erinevus on see, et peate helistama heif meetod asemel .jpeg meetod Sharpi eksemplaris. AVIF-i vaikeväärtus kvaliteet on 50.
Piltide tihendamine Sharpiga
Kui kloonisite GitHubi hoidla, avage oma app.js faili ja lisage järgmised impordid.
const sharp = require("sharp");
const { exec } = require("child_process");
täitja on funktsioon, mida pakub laps_protsess moodul, mis võimaldab teil Node.js rakendusest käivitada shellikäske või väliseid protsesse.
Selle funktsiooni abil saate käivitada käsu, mis võrdleb faili suurusi enne ja pärast tihendamist.
Järgmisena asendage POST'/single' töötleja alloleva koodiplokiga:
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);
}
});
Ülaltoodud koodiplokk rakendab JPEG-piltide tihendamise tehnikat ja võrdleb suurusi enne ja pärast kasutamist du käsk.
The du käsk on Unixi utiliit, mis tähistab "kettakasutust". See hindab failiruumi kasutust ja analüüsib kettakasutust kataloogis või kataloogide komplektis. Kui käivitate du käsuga -h lipp, kuvab iga alamkataloogi kasutatava failiruumi ja selle sisu inimloetaval kujul.
Käivitage oma üleslaadimisteenus, käivitades selle käsu:
node app.js
Järgmisena testige oma rakendust, saates marsruudile JPG-pildi localhost:
Peaksite nägema sellele sarnast vastust:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Sharpi mooduli muud kasutusalad
Lisaks piltide tihendamisele saab terava mooduliga pilte soovitud spetsifikatsioonidele ka muuta, kärpida, pöörata ja ümber pöörata. Samuti toetab see värviruumi reguleerimist, alfakanalite toiminguid ja vormingu teisendamist.
