Sažimanje slika za vaše web mjesto ili unutar vaše aplikacije može radikalno poboljšati izvedbu. Sharp podiže teške poslove.
Nepotrebno velike slike mogu dovesti do sporijeg vremena odgovora, zauzeti prekomjernu propusnost i pružiti usporeno iskustvo korisnicima, posebno onima na sporijim vezama. To može rezultirati višim stopama napuštanja početne stranice ili manjim brojem konverzija.
Sažimanje slika prije nego što ih učitate može ublažiti te probleme i pružiti bolje korisničko iskustvo. Sharp modul čini ovaj proces brzim i lakim.
Postavljanje vašeg razvojnog okruženja
Da biste demonstrirali postupak sažimanja slika, započnite s postavljanje usluge učitavanja slika pomoću multera. Možete ubrzati proces kloniranjem ovo GitHub spremište.
Nakon kloniranja GitHub repozitorija, pokrenite ovu naredbu da instalirate ovisnosti za uslugu učitavanja slika:
npm install
Zatim instalirajte Sharp pokretanjem ove naredbe:
npm install sharp
The Oštar modul je Node.js biblioteka visokih performansi za obradu i manipuliranje slikama. Možete koristiti Sharp za učinkovito mijenjanje veličine, obrezivanje, rotiranje i izvođenje raznih drugih operacija na slikama. Sharp također ima izvrsnu podršku za komprimiranje slika.
Tehnike kompresije za različite formate slike
Različiti formati slika imaju različite tehnike kompresije. To je zato što svaki od njih zadovoljava posebne namjene i zahtjeve te daje prioritet različitim čimbenicima uključujući kvalitetu, veličinu datoteke i značajke poput transparentnosti i animacija.
JPG/JPEG
JPEG je standard kompresije slike koji je razvila Joint Photographic Experts Group za komprimiranje fotografija i realističnih slika s kontinuiranim tonovima i prijelazima boja. Koristi se algoritam kompresije s gubitkom, generirajući manje datoteke odbacivanjem nekih slikovnih podataka.
Za komprimiranje JPEG slike s Sharpom, uvezite Sharp modul i proslijedite filePath ili međuspremnik slike kao argument. Zatim nazovite .jpeg metoda na Oštar primjer. Zatim proslijedite konfiguracijski objekt s a kvaliteta svojstvo koje uzima broj između 0 i 100 kao vrijednost. Gdje 0 vraća najmanju kompresiju s najnižom kvalitetom i 100 vraća najveću kompresiju uz najvišu kvalitetu.
Možete postaviti vrijednost ovisno o svojim potrebama. Za najbolje rezultate kompresije, zadržite vrijednost između 50-80 pronaći ravnotežu između veličine i kvalitete.
Završite spremanjem komprimirane slike u datotečni sustav pomoću .toFile metoda. Proslijedite putanju datoteke u koju želite pisati kao argument.
Na primjer:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Zadana vrijednost za kvaliteta je 80.
PNG
PNG (Portable Network Graphics) format je slikovne datoteke poznat po svojoj kompresiji bez gubitaka i podršci za prozirne pozadine.
Sažimanje PNG slike s Sharpom slično je sažimanju JPEG slike s Sharpom. Međutim, postoje dvije promjene koje trebate napraviti kada je slika u PNG formatu.
- Sharp obrađuje PNG slike pomoću .png metoda umjesto .jpeg metoda.
- The .png metoda koristi razina kompresije, što je broj između 0 i 9 umjesto kvaliteta u svom objektu konfiguracije. 0 daje najbržu i najveću moguću kompresiju, dok 9 daje najsporiju i najmanju moguću kompresiju.
Na primjer:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Zadana vrijednost za razina kompresije je 6.
Ostali formati
Sharps podržava kompresiju u raznim drugim formatima slika koji uključuju:
- WebP: WebP kompresija slike sa Sharpom slijedi isti postupak kao JPG. Jedina razlika je u tome što morate nazvati webp metoda umjesto .jpeg metoda na Sharp instanci.
- TIFF: TIFF (Tag Image File Format) kompresija slike sa Sharpom slijedi isti postupak kao JPG. Jedina razlika je u tome što morate nazvati svadja metoda umjesto .jpeg metoda na Sharp instanci.
- AVIF: AVIF (AV1 Image File Format) kompresija slike sa Sharpom slijedi isti postupak kao JPG. Jedina razlika je u tome što morate nazvati avif metoda umjesto .jpeg metoda na Sharp instanci. AVIF zadana vrijednost za kvaliteta je 50.
- HEIF: HEIF (High Efficiency Image File Format) kompresija slike sa Sharpom slijedi isti postupak kao JPG. Jedina razlika je u tome što morate nazvati heif metoda umjesto .jpeg metoda na Sharp instanci. AVIF zadana vrijednost za kvaliteta je 50.
Sažimanje slika uz Sharp
Ako ste klonirali GitHub repozitorij, otvorite svoj app.js datoteku i dodajte sljedeće uvoze.
const sharp = require("sharp");
const { exec } = require("child_process");
izvrs je funkcija koju pruža dijete_proces modul koji vam omogućuje izvršavanje naredbi ljuske ili vanjskih procesa iz vaše Node.js aplikacije.
Ovu funkciju možete koristiti za pokretanje naredbe koja uspoređuje veličine datoteka prije i nakon kompresije.
Zatim zamijenite POST '/single’ rukovatelj s blokom koda ispod:
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);
}
});
Gornji blok koda implementira tehniku za komprimiranje JPEG slika i uspoređuje veličine prije i nakon korištenja du naredba.
The du naredba je Unix pomoćni program koji označava "korištenje diska". Procjenjuje korištenje prostora datoteke i analizira korištenje diska u direktoriju ili skupu direktorija. Kada pokrenete du naredba s -h zastavicom, prikazuje prostor datoteke koji svaki poddirektorij koristi i njegov sadržaj u obliku koji je čitljiv za čovjeka.
Pokrenite svoju uslugu prijenosa izvođenjem ove naredbe:
node app.js
Zatim testirajte svoju aplikaciju slanjem JPG slike na rutu lokalni domaćin:
Trebali biste vidjeti odgovor sličan ovome:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Druge upotrebe Sharp modula
Osim komprimiranja slika, oštri modul također može promijeniti veličinu, obrezivati, rotirati i okrenuti slike prema željenim specifikacijama. Također podržava prilagodbe prostora boja, operacije alfa kanala i konverzije formata.
