Stiskanje slik za vaše spletno mesto ali v vaši aplikaciji lahko radikalno izboljša učinkovitost. Sharp opravlja težka dela.
Nepotrebno velike slike lahko privedejo do počasnejših odzivnih časov, porabijo prekomerno pasovno širino in zagotovijo počasno izkušnjo za uporabnike, zlasti tiste s počasnejšimi povezavami. To lahko povzroči višje stopnje obiskov ene strani ali manj konverzij.
Stiskanje slik, preden jih naložite, lahko ublaži te težave in zagotovi boljšo uporabniško izkušnjo. Modul Sharp omogoča hiter in enostaven postopek.
Nastavitev vašega razvojnega okolja
Če želite prikazati postopek stiskanja slik, začnite z nastavitev storitve nalaganja slik z uporabo multerja. Postopek lahko pospešite s kloniranjem tem repozitoriju GitHub.
Po kloniranju repozitorija GitHub zaženite ta ukaz, da namestite odvisnosti za storitev nalaganja slik:
npm install
Nato namestite Sharp tako, da zaženete ta ukaz:
npm install sharp
The Ostro modul je visoko zmogljiva knjižnica Node.js za obdelavo in obdelavo slik. Sharp lahko uporabite za učinkovito spreminjanje velikosti, obrezovanje, obračanje in izvajanje različnih drugih operacij na slikah. Sharp ima tudi odlično podporo za stiskanje slik.
Tehnike stiskanja za različne slikovne formate
Različni formati slik imajo različne tehnike stiskanja. To je zato, ker vsaka ustreza specifični uporabi in zahtevam ter daje prednost različnim dejavnikom, vključno s kakovostjo, velikostjo datoteke in funkcijami, kot sta preglednost in animacije.
JPG/JPEG
JPEG je standard za stiskanje slik, ki ga je razvila Joint Photographic Experts Group za stiskanje fotografij in realističnih slik z neprekinjenimi toni in barvnimi prelivi. Uporablja se algoritem stiskanja z izgubo, ustvarjanje manjših datotek z zavrženjem nekaterih slikovnih podatkov.
Če želite stisniti sliko JPEG s Sharpom, uvozite modul Sharp in posredujte filePath ali medpomnilnik slike kot argument. Nato pokličite .jpeg metoda na Ostro primerek. Nato posredujte konfiguracijski objekt z a kakovosti lastnost, ki sprejme število med 0 in 100 kot vrednost. Kje 0 vrne najmanjšo kompresijo z najnižjo kakovostjo in 100 vrne največjo kompresijo z najvišjo kakovostjo.
Vrednost lahko nastavite glede na svoje potrebe. Za najboljše rezultate stiskanja ohranite vrednost med 50-80 najti ravnotežje med velikostjo in kakovostjo.
Končajte s shranjevanjem stisnjene slike v datotečni sistem z uporabo .toFile metoda. Kot argument posredujte pot do datoteke, v katero želite pisati.
Na primer:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Privzeta vrednost za kakovosti je 80.
PNG
PNG (prenosna omrežna grafika) je oblika slikovne datoteke, znana po stiskanju brez izgub in podpori za prosojna ozadja.
Stiskanje slike PNG s Sharpom je podobno stiskanju slike JPEG s Sharpom. Če pa je slika v formatu PNG, morate narediti dve spremembi.
- Sharp obdela slike PNG z uporabo .png metoda namesto .jpeg metoda.
- The .png metoda uporablja stopnja stiskanja, ki je število med 0 in 9 namesto kakovosti v svojem konfiguracijskem objektu. 0 zagotavlja najhitrejše in največje možno stiskanje, medtem ko 9 zagotavlja najpočasnejšo in najmanjšo možno kompresijo.
Na primer:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Privzeta vrednost za raven stiskanja je 6.
Drugi formati
Sharps podpira stiskanje v različnih drugih formatih slik, ki vključujejo:
- WebP: Stiskanje slik WebP s Sharpom sledi istemu postopku kot JPG. Edina razlika je, da morate poklicati webp metoda namesto .jpeg metodo na primerku Sharp.
- TIFF: Stiskanje slik TIFF (Tag Image File Format) s Sharpom sledi istemu postopku kot JPG. Edina razlika je, da morate poklicati tiff metoda namesto .jpeg metodo na primerku Sharp.
- AVIF: Stiskanje slik AVIF (AV1 Image File Format) s Sharpom sledi istemu postopku kot JPG. Edina razlika je, da morate poklicati avif metoda namesto .jpeg metodo na primerku Sharp. Privzeta vrednost AVIF za kakovosti je 50.
- HEIF: stiskanje slik HEIF (High Efficiency Image File Format) s Sharpom sledi istemu postopku kot JPG. Edina razlika je, da morate poklicati heif metoda namesto .jpeg metodo na primerku Sharp. Privzeta vrednost AVIF za kakovosti je 50.
Stiskanje slik s Sharp
Če ste klonirali repozitorij GitHub, odprite svoj app.js datoteko in dodajte naslednje uvoze.
const sharp = require("sharp");
const { exec } = require("child_process");
izv je funkcija, ki jo zagotavlja otroški_proces modul, ki vam omogoča izvajanje ukazov lupine ali zunanjih procesov iz vaše aplikacije Node.js.
To funkcijo lahko uporabite za zagon ukaza, ki primerja velikosti datotek pred in po stiskanju.
Nato zamenjajte POST '/single' s spodnjim blokom kode:
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);
}
});
Zgornji blok kode izvaja tehniko za stiskanje slik JPEG in primerja velikosti pred in po uporabi du ukaz.
The du ukaz je pripomoček Unix, ki pomeni "uporaba diska." Oceni uporabo prostora za datoteke in analizira uporabo diska v imeniku ali nizu imenikov. Ko zaženete du ukaz z -h zastavico, prikaže datotečni prostor, ki ga uporablja vsak podimenik, in njegovo vsebino v človeku berljivi obliki.
Zaženite storitev nalaganja tako, da zaženete ta ukaz:
node app.js
Nato preizkusite svojo aplikacijo tako, da na pot pošljete sliko JPG lokalni gostitelj:
Morali bi videti odgovor, podoben temu:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Druge uporabe modula Sharp
Poleg stiskanja slik lahko modul Sharp tudi spreminja velikost, obrezuje, vrti in obrača slike na želene specifikacije. Podpira tudi prilagoditve barvnega prostora, operacije kanalov alfa in pretvorbe formatov.