Komprese obrázků pro váš web nebo v rámci vaší aplikace může radikálně zlepšit výkon. Sharp dělá těžké zvedání.
Zbytečně velké obrázky mohou vést k pomalejším dobám odezvy, spotřebovávat nadměrnou šířku pásma a poskytovat pomalý zážitek pro uživatele, zejména pro uživatele s pomalejším připojením. To může mít za následek vyšší míru okamžitého opuštění nebo méně konverzí.
Komprimace obrázků před jejich nahráním může tyto problémy zmírnit a poskytnout lepší uživatelský dojem. Díky modulu Sharp je tento proces rychlý a snadný.
Nastavení vývojového prostředí
Chcete-li předvést proces komprese obrázků, začněte tím nastavení služby nahrávání obrázků pomocí funkce multer. Proces můžete urychlit klonováním toto úložiště GitHub.
Po naklonování úložiště GitHub spusťte tento příkaz a nainstalujte závislosti pro službu nahrávání obrázků:
npm install
Dále nainstalujte Sharp spuštěním tohoto příkazu:
npm install sharp
The Ostrý modul je vysoce výkonná knihovna Node.js pro zpracování a manipulaci s obrázky. Pomocí Sharp můžete efektivně měnit velikost, ořezávat, otáčet a provádět různé další operace s obrázky. Sharp má také vynikající podporu pro kompresi obrázků.
Kompresní techniky pro různé formáty obrázků
Různé formáty obrázků mají odlišné kompresní techniky. Je to proto, že každý z nich vyhovuje specifickému použití a požadavkům a upřednostňují různé faktory, včetně kvality, velikosti souboru a funkcí, jako je průhlednost a animace.
JPG/JPEG
JPEG je standard pro kompresi obrázků vyvinutý společností Joint Photographic Experts Group pro kompresi fotografií a realistických obrázků s nepřetržitými tóny a barevnými přechody. Používá ztrátový kompresní algoritmus, generování menších souborů vyřazením některých obrazových dat.
Chcete-li komprimovat obrázek JPEG pomocí Sharp, importujte modul Sharp a jako argument předejte cestu k souboru nebo vyrovnávací paměť obrázku. Dále zavolejte na .jpeg metoda na Ostrý instance. Poté předejte konfigurační objekt s a kvalitní vlastnost, která má číslo mezi 0 a 100 jako hodnotu. Kde 0 vrací nejmenší kompresi s nejnižší kvalitou a 100 vrací největší kompresi s nejvyšší kvalitou.
Hodnotu můžete nastavit podle svých potřeb. Pro nejlepší výsledky komprese udržujte hodnotu mezi 50-80 najít rovnováhu mezi velikostí a kvalitou.
Dokončete uložením komprimovaného obrazu do systému souborů pomocí .toFile metoda. Jako argument předejte cestu k souboru, do kterého chcete zapisovat.
Například:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Výchozí hodnota pro kvalitní je 80.
PNG
PNG (Portable Network Graphics) je formát obrazových souborů známý svou bezztrátovou kompresí a podporou průhledných pozadí.
Komprese obrázku PNG pomocí Sharp je podobná komprimaci obrázku JPEG pomocí Sharp. Pokud je však obrázek ve formátu PNG, musíte provést dvě změny.
- Sharp zpracovává obrázky PNG pomocí .png metoda místo toho .jpeg metoda.
- The .png metoda používá kompresní úroveň, což je číslo mezi 0 a 9 namísto kvalitní ve svém konfiguračním objektu. 0 poskytuje nejrychlejší a největší možnou kompresi 9 poskytuje nejpomalejší a nejmenší možnou kompresi.
Například:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Výchozí hodnota pro kompresní úroveň je 6.
Jiné formáty
Sharps podporuje kompresi v různých dalších formátech obrázků, mezi které patří:
- WebP: Komprese obrázků WebP pomocí Sharp probíhá stejným procesem jako JPG. Jediný rozdíl je v tom, že musíte zavolat webp metoda místo toho .jpeg metoda na instanci Sharp.
- TIFF: Komprese obrazu TIFF (Tag Image File Format) pomocí Sharp probíhá stejně jako u JPG. Jediný rozdíl je v tom, že musíte zavolat tiff metoda místo toho .jpeg metoda na instanci Sharp.
- AVIF: Komprese obrazu AVIF (AV1 Image File Format) pomocí Sharp probíhá stejným procesem jako JPG. Jediný rozdíl je v tom, že musíte zavolat avif metoda místo toho .jpeg metoda na instanci Sharp. Výchozí hodnota AVIF pro kvalitní je 50.
- HEIF: Komprese obrázků HEIF (High Efficiency Image File Format) pomocí Sharp probíhá stejným procesem jako JPG. Jediný rozdíl je v tom, že musíte zavolat heif metoda místo toho .jpeg metoda na instanci Sharp. Výchozí hodnota AVIF pro kvalitní je 50.
Komprese Snímků S Ostrým
Pokud jste naklonovali úložiště GitHub, otevřete svůj app.js a přidejte následující importy.
const sharp = require("sharp");
const { exec } = require("child_process");
exec je funkce poskytovaná dětský_proces modul, který vám umožňuje spouštět příkazy shellu nebo externí procesy z vaší aplikace Node.js.
Tuto funkci můžete použít ke spuštění příkazu, který porovnává velikosti souborů před a po kompresi.
Dále nahraďte POST ‘/single' handler s blokem kódu níže:
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);
}
});
Výše uvedený blok kódu implementuje techniku pro kompresi obrázků JPEG a porovnává velikosti před a po použití du příkaz.
The du command je unixová utilita, která znamená "použití disku." Odhaduje využití místa v souboru a analyzuje využití disku v adresáři nebo sadě adresářů. Když spustíte du příkaz s -h příznak, zobrazí souborový prostor, který každý podadresář používá, a jeho obsah ve formě čitelné pro člověka.
Spusťte službu nahrávání spuštěním tohoto příkazu:
node app.js
Dále otestujte svou aplikaci odesláním obrázku JPG do trasy localhost:
Měli byste vidět odpověď podobnou této:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Další použití modulu Sharp
Kromě komprese obrázků dokáže ostrý modul také měnit velikost, ořezávat, otáčet a překlápět obrázky podle požadovaných specifikací. Podporuje také úpravy barevného prostoru, operace s alfa kanálem a převody formátů.
