A webhelyen vagy az alkalmazáson belüli képek tömörítése radikálisan javíthatja a teljesítményt. Sharp végzi a nehézemelést.
A szükségtelenül nagy képek lassabb válaszidőhöz, túlzott sávszélességhez vezethetnek, és lomha élményt nyújtanak a felhasználóknak, különösen a lassabb kapcsolatot használóknak. Ez magasabb visszafordulási arányt vagy kevesebb konverziót eredményezhet.
A képek feltöltése előtti tömörítése enyhítheti ezeket a problémákat, és jobb felhasználói élményt nyújthat. A Sharp modul gyors és egyszerűvé teszi ezt a folyamatot.
Fejlesztői környezet beállítása
A képek tömörítési folyamatának bemutatásához kezdje ezzel képfeltöltő szolgáltatás beállítása multer segítségével. A folyamatot felgyorsíthatja klónozással ezt a GitHub-tárat.
A GitHub-tár klónozása után futtassa ezt a parancsot a képfeltöltési szolgáltatás függőségei telepítéséhez:
npm install
Ezután telepítse a Sharp programot a következő parancs futtatásával:
npm install sharp
A Éles modul egy nagy teljesítményű Node.js könyvtár a képek feldolgozásához és manipulálásához. A Sharp segítségével hatékonyan átméretezheti, körbevághatja, elforgathatja és számos egyéb műveletet hajthat végre a képeken. A Sharp kiválóan támogatja a képek tömörítését is.
Tömörítési technikák különböző képformátumokhoz
Különböző képformátumok különböző tömörítési technikákkal rendelkeznek. Ennek az az oka, hogy mindegyik speciális felhasználási területet és követelményeket kielégít, és különböző tényezőket részesít előnyben, beleértve a minőséget, a fájlméretet és az olyan funkciókat, mint az átlátszóság és az animációk.
JPG/JPEG
A JPEG a Joint Photographic Experts Group által kifejlesztett képtömörítési szabvány a fényképek és valósághű képek folyamatos tónusokkal és színátmenetekkel való tömörítésére. Használja veszteséges tömörítési algoritmus, kisebb fájlokat generál néhány képadat eldobásával.
A JPEG kép Sharp programmal való tömörítéséhez importálja a Sharp modult, és argumentumként adja meg a fájl elérési útját vagy a kép pufferét. Ezután hívja a .jpeg módszer a Éles példa. Ezután adjon át egy konfigurációs objektumot a minőség közötti számot vesz fel 0 és 100 mint érték. Ahol 0 a legkisebb tömörítést adja vissza a legalacsonyabb minőséggel és 100 a legnagyobb tömörítést adja vissza a legjobb minőséggel.
Az értéket igény szerint állíthatja be. A legjobb tömörítési eredmény érdekében tartsa a közötti értéket 50-80 egyensúlyt teremteni a méret és a minőség között.
Befejezésül mentse a tömörített képet a fájlrendszerbe a segítségével .fájlhoz módszer. Adja meg argumentumként annak a fájlnak az elérési útját, amelybe írni szeretne.
Például:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
A következő alapértelmezett értéke minőség van 80.
PNG
A PNG (Portable Network Graphics) egy képfájlformátum, amely veszteségmentes tömörítéséről és az átlátszó hátterek támogatásáról ismert.
A PNG-kép Sharp-pal való tömörítése hasonló a JPEG-kép Sharp-pal történő tömörítéséhez. Azonban két változtatást kell végrehajtania, ha a kép PNG formátumú.
- A Sharp a PNG-képeket a .png módszer helyett a .jpeg módszer.
- A .png módszert használ tömörítési szint, amely közötti szám 0 és 9 ahelyett minőség konfigurációs objektumában. 0 a lehető leggyorsabb és legnagyobb tömörítést adja, míg 9 a lehető leglassabb és legkisebb tömörítést adja.
Például:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
A következő alapértelmezett értéke tömörítési szint van 6.
Egyéb formátumok
A Sharps támogatja a tömörítést számos más képformátumban, beleértve:
- WebP: A WebP képtömörítés Sharppel ugyanazt a folyamatot követi, mint a JPG. Az egyetlen különbség az, hogy fel kell hívnia a webp módszer helyett a .jpeg módszer a Sharp példányon.
- TIFF: A TIFF (Tag Image File Format) képtömörítés Sharppel ugyanazt a folyamatot követi, mint a JPG. Az egyetlen különbség az, hogy fel kell hívnia a tiff módszer helyett a .jpeg módszer a Sharp példányon.
- AVIF: Az AVIF (AV1 Image File Format) képtömörítés Sharppel ugyanazt a folyamatot követi, mint a JPG. Az egyetlen különbség az, hogy fel kell hívnia a avif módszer helyett a .jpeg módszer a Sharp példányon. Az AVIF alapértelmezett értéke minőség van 50.
- HEIF: A HEIF (High Efficiency Image File Format) képtömörítés Sharppel ugyanazt a folyamatot követi, mint a JPG. Az egyetlen különbség az, hogy fel kell hívnia a heif módszer helyett a .jpeg módszer a Sharp példányon. Az AVIF alapértelmezett értéke minőség van 50.
Képek tömörítése Sharp programmal
Ha klónozta a GitHub adattárat, nyissa meg app.js fájlt, és adja hozzá a következő importálást.
const sharp = require("sharp");
const { exec } = require("child_process");
végrehajtó által biztosított funkció gyermek_folyamat modul, amely lehetővé teszi shell-parancsok vagy külső folyamatok végrehajtását a Node.js alkalmazásból.
Ezzel a funkcióval olyan parancsot futtathat, amely összehasonlítja a tömörítés előtti és utáni fájlméreteket.
Ezután cserélje ki a POST "/single' kezelő az alábbi kódblokkkal:
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);
}
});
A fenti kódblokk a JPEG képek tömörítésének technikáját valósítja meg, és összehasonlítja a méreteket a használata előtt és után du parancs.
A du A parancs egy Unix segédprogram, amely a „lemezhasználat” rövidítése. Megbecsüli a fájlterület-használatot, és elemzi a lemezhasználatot egy könyvtárban vagy könyvtárcsoportban. Amikor futtatja a du parancsot a -h flag, az egyes alkönyvtárak által használt fájlterületet és annak tartalmát ember által olvasható formában jeleníti meg.
Indítsa el a feltöltési szolgáltatást a következő parancs futtatásával:
node app.js
Ezután tesztelje az alkalmazást egy JPG kép elküldésével az útvonalra helyi kiszolgáló:
Ehhez hasonló választ kell látnod:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
A Sharp Modul egyéb felhasználásai
A képek tömörítésén kívül az éles modul képes a képeket a kívánt specifikációk szerint átméretezni, levágni, elforgatni és átfordítani. Támogatja a színtér-beállításokat, az alfa-csatorna-műveleteket és a formátumkonverziókat is.