Kompresia obrázkov pre váš web alebo v rámci vašej aplikácie môže radikálne zlepšiť výkon. Sharp robí ťažké zdvíhanie.
Zbytočne veľké obrázky môžu viesť k pomalším časom odozvy, spotrebúvať nadmernú šírku pásma a poskytovať pomalý zážitok pre používateľov, najmä tých, ktorí majú pomalšie pripojenie. Výsledkom môže byť vyššia miera odchodov alebo menej konverzií.
Komprimácia obrázkov pred ich odovzdaním môže zmierniť tieto problémy a poskytnúť lepšiu používateľskú skúsenosť. Vďaka modulu Sharp je tento proces rýchly a jednoduchý.
Nastavenie vývojového prostredia
Ak chcete demonštrovať proces kompresie obrázkov, začnite tým nastavenie služby nahrávania obrázkov pomocou funkcie multer. Proces môžete urýchliť klonovaním toto úložisko GitHub.
Po naklonovaní úložiska GitHub spustite tento príkaz na inštaláciu závislostí pre službu nahrávania obrázkov:
npm install
Ďalej nainštalujte Sharp spustením tohto príkazu:
npm install sharp
The Ostrý modul je vysoko výkonná knižnica Node.js na spracovanie a manipuláciu s obrázkami. Pomocou Sharp môžete efektívne meniť veľkosť, orezávať, otáčať a vykonávať rôzne ďalšie operácie s obrázkami. Sharp má tiež vynikajúcu podporu pre kompresiu obrázkov.
Kompresné techniky pre rôzne formáty obrázkov
Rôzne obrazové formáty majú odlišné kompresné techniky. Je to preto, že každý z nich zodpovedá špecifickému použitiu a požiadavkám a uprednostňuje rôzne faktory vrátane kvality, veľkosti súboru a funkcií, ako je priehľadnosť a animácie.
JPG/JPEG
JPEG je štandard pre kompresiu obrázkov vyvinutý skupinou Joint Photographic Experts Group na kompresiu fotografií a realistických obrázkov so súvislými tónmi a farebnými prechodmi. Používa sa stratový kompresný algoritmus, generovanie menších súborov odstránením niektorých obrazových údajov.
Ak chcete komprimovať obrázok JPEG pomocou nástroja Sharp, importujte modul Sharp a zadajte cestu k súboru alebo vyrovnávaciu pamäť obrázka ako argument. Ďalej zavolajte na .jpeg metóda na Ostrý príklad. Potom odovzdajte konfiguračný objekt s a kvality vlastnosť, ktorá má číslo medzi 0 a 100 ako hodnotu. Kde 0 vráti najmenšiu kompresiu s najnižšou kvalitou a 100 vráti najväčšiu kompresiu s najvyššou kvalitou.
Hodnotu si môžete nastaviť podľa svojich potrieb. Pre najlepšie výsledky kompresie udržujte hodnotu medzi 50-80 dosiahnuť rovnováhu medzi veľkosťou a kvalitou.
Dokončite uložením komprimovaného obrázka do systému súborov pomocou .vyplniť metóda. Ako argument zadajte cestu k súboru, do ktorého chcete zapisovať.
Napríklad:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Predvolená hodnota pre kvality je 80.
PNG
PNG (Portable Network Graphics) je formát obrazového súboru známy svojou bezstratovou kompresiou a podporou priehľadného pozadia.
Kompresia obrázka PNG pomocou Sharp je podobná ako kompresia obrázka JPEG pomocou Sharp. Ak je však obrázok vo formáte PNG, musíte vykonať dve zmeny.
- Sharp spracováva obrázky PNG pomocou .png metóda namiesto .jpeg metóda.
- The .png metóda používa úroveň kompresie, čo je číslo medzi 0 a 9 namiesto kvality vo svojom konfiguračnom objekte. 0 poskytuje najrýchlejšiu a najväčšiu možnú kompresiu 9 poskytuje najpomalšiu a najmenšiu možnú kompresiu.
Napríklad:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Predvolená hodnota pre kompresiaLevel je 6.
Iné formáty
Sharps podporuje kompresiu v rôznych iných formátoch obrázkov, medzi ktoré patria:
- WebP: Kompresia obrazu WebP pomocou Sharpu prebieha rovnako ako pri JPG. Jediný rozdiel je v tom, že musíte zavolať webp metóda namiesto .jpeg metóda na inštancii Sharp.
- TIFF: Kompresia obrázkov TIFF (Tag Image File Format) pomocou Sharp prebieha rovnako ako JPG. Jediný rozdiel je v tom, že musíte zavolať tiff metóda namiesto .jpeg metóda na inštancii Sharp.
- AVIF: Kompresia obrazu AVIF (formát AV1 Image File Format) pomocou Sharp prebieha rovnako ako JPG. Jediný rozdiel je v tom, že musíte zavolať avif metóda namiesto .jpeg metóda na inštancii Sharp. Predvolená hodnota AVIF pre kvality je 50.
- HEIF: Kompresia obrázkov HEIF (High Efficiency Image File Format) pomocou Sharpu prebieha rovnako ako JPG. Jediný rozdiel je v tom, že musíte zavolať heif metóda namiesto .jpeg metóda na inštancii Sharp. Predvolená hodnota AVIF pre kvality je 50.
Kompresia obrázkov pomocou Sharp
Ak ste naklonovali úložisko GitHub, otvorte svoj app.js súbor a pridajte nasledujúce importy.
const sharp = require("sharp");
const { exec } = require("child_process");
exec je funkcia poskytovaná child_process modul, ktorý vám umožňuje spúšťať príkazy shellu alebo externé procesy z vašej aplikácie Node.js.
Túto funkciu môžete použiť na spustenie príkazu, ktorý porovnáva veľkosti súborov pred a po kompresii.
Ďalej nahraďte POST ‘/single' handler s blokom kódu nižšie:
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);
}
});
Vyššie uvedený blok kódu implementuje techniku kompresie obrázkov JPEG a porovnáva veľkosti pred a po použití du príkaz.
The du command je unixová pomôcka, ktorá znamená "používanie disku." Odhaduje využitie priestoru v súboroch a analyzuje využitie disku v adresári alebo skupine adresárov. Keď spustíte du príkaz s -h príznak, zobrazuje súborový priestor, ktorý každý podadresár používa, a jeho obsah vo forme čitateľnej pre človeka.
Spustite službu nahrávania spustením tohto príkazu:
node app.js
Potom otestujte svoju aplikáciu odoslaním obrázka JPG na trasu localhost:
Mali by ste vidieť odpoveď podobnú tejto:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Iné použitia modulu Sharp
Okrem kompresie obrázkov dokáže ostrý modul zmeniť veľkosť, orezať, otočiť a prevrátiť obrázky podľa požadovaných špecifikácií. Podporuje tiež úpravy farebného priestoru, operácie s alfa kanálmi a prevody formátov.
