Kuvien pakkaaminen verkkosivustollesi tai sovellukseesi voi parantaa suorituskykyä radikaalisti. Sharp nostaa raskaita.
Tarpeettoman suuret kuvat voivat hidastaa vasteaikoja, kuluttaa liikaa kaistanleveyttä ja tarjota käyttäjille hitaamman käyttökokemuksen, erityisesti niille, joilla on hitaammat yhteydet. Tämä voi johtaa korkeampiin poistumisprosentteihin tai vähemmän tuloksiin.
Kuvien pakkaaminen ennen niiden lataamista voi lieventää näitä ongelmia ja tarjota paremman käyttökokemuksen. Sharp-moduuli tekee tästä prosessista nopean ja helpon.
Kehitysympäristösi luominen
Aloita kuvien pakkaamisen esittelystä kuvien latauspalvelun perustaminen multerin avulla. Voit nopeuttaa prosessia kloonaamalla tämä GitHub-arkisto.
Kun olet kloonannut GitHub-arkiston, suorita tämä komento asentaaksesi kuvan latauspalvelun riippuvuudet:
npm install
Asenna seuraavaksi Sharp suorittamalla tämä komento:
npm install sharp
The Terävä moduuli on tehokas Node.js-kirjasto kuvien käsittelyyn ja käsittelyyn. Sharpin avulla voit muuttaa kuvien kokoa, rajata, kiertää ja suorittaa useita muita toimintoja tehokkaasti. Sharp tukee myös erinomaisesti kuvien pakkaamista.
Pakkaustekniikat eri kuvaformaateille
Erilaisia kuvaformaatteja niillä on erilaisia pakkaustekniikoita. Tämä johtuu siitä, että jokainen niistä vastaa tiettyihin käyttötarkoituksiin ja vaatimuksiin ja priorisoi erilaisia tekijöitä, kuten laatua, tiedostokokoa ja ominaisuuksia, kuten läpinäkyvyyttä ja animaatioita.
JPG/JPEG
JPEG on Joint Photographic Experts Groupin kehittämä kuvanpakkausstandardi valokuvien ja realististen kuvien pakkaamiseen jatkuvilla sävyillä ja värigradienteilla. Se käyttää häviöllinen pakkausalgoritmi, luo pienempiä tiedostoja hylkäämällä joitain kuvatietoja.
Jos haluat pakata JPEG-kuvan Sharpilla, tuo Sharp-moduuli ja anna argumenttina kuvan filePath tai puskuri. Soita seuraavaksi .jpeg menetelmällä Terävä ilmentymä. Ohita sitten konfigurointiobjekti a laatu ominaisuus, jonka välissä on luku 0 ja 100 arvona. Missä 0 palauttaa pienimmän pakkauksen heikoimmalla laadulla ja 100 palauttaa suurimman pakkauksen korkeimmalla laadulla.
Voit asettaa arvon tarpeidesi mukaan. Parhaan pakkaustuloksen saavuttamiseksi pidä arvo välillä 50-80 löytää tasapaino koon ja laadun välillä.
Viimeistele tallentamalla pakattu kuva tiedostojärjestelmään käyttämällä .arkistoida menetelmä. Anna argumentiksi sen tiedoston polku, johon haluat kirjoittaa.
Esimerkiksi:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Oletusarvo kohteelle laatu On 80.
PNG
PNG (Portable Network Graphics) on kuvatiedostomuoto, joka tunnetaan häviöttömästä pakkauksestaan ja tuesta läpinäkyville taustoille.
PNG-kuvan pakkaaminen Sharpilla on samanlaista kuin JPEG-kuvan pakkaaminen Sharpilla. Sinun on kuitenkin tehtävä kaksi muutosta, kun kuva on PNG-muodossa.
- Sharp käsittelee PNG-kuvia käyttämällä .png menetelmän sijaan .jpeg menetelmä.
- The .png menetelmän käyttöä pakkaustaso, joka on välissä oleva luku 0 ja 9 sijasta laatu sen konfigurointiobjektissa. 0 antaa nopeimman ja suurimman mahdollisen pakkauksen, kun taas 9 antaa hitain ja pienimmän mahdollisen pakkauksen.
Esimerkiksi:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Oletusarvo kohteelle pakkaustaso On 6.
Muut muodot
Sharps tukee pakkausta useissa muissa kuvamuodoissa, kuten:
- WebP: WebP-kuvapakkaus Sharpilla noudattaa samaa prosessia kuin JPG. Ainoa ero on, että sinun täytyy soittaa webp menetelmän sijaan .jpeg menetelmä Sharp-instanssissa.
- TIFF: TIFF (Tag Image File Format) -kuvan pakkaus Sharpilla noudattaa samaa prosessia kuin JPG. Ainoa ero on, että sinun täytyy soittaa tiff menetelmän sijaan .jpeg menetelmä Sharp-instanssissa.
- AVIF: AVIF (AV1 Image File Format) -kuvan pakkaus Sharpilla noudattaa samaa prosessia kuin JPG. Ainoa ero on, että sinun täytyy soittaa avif menetelmän sijaan .jpeg menetelmä Sharp-instanssissa. AVIF-oletusarvo kohteelle laatu On 50.
- HEIF: HEIF (High Efficiency Image File Format) -kuvan pakkaus Sharpilla noudattaa samaa prosessia kuin JPG. Ainoa ero on, että sinun täytyy soittaa heif menetelmän sijaan .jpeg menetelmä Sharp-instanssissa. AVIF-oletusarvo kohteelle laatu On 50.
Kuvien pakkaaminen Sharpilla
Jos kloonasit GitHub-arkiston, avaa app.js tiedosto ja lisää seuraavat tuonnit.
const sharp = require("sharp");
const { exec } = require("child_process");
exec on toiminto, jonka tarjoaa lapsi_prosessi moduuli, jonka avulla voit suorittaa komentotulkkikomentoja tai ulkoisia prosesseja Node.js-sovelluksestasi.
Tämän toiminnon avulla voit suorittaa komennon, joka vertaa tiedostokokoja ennen pakkaamista ja sen jälkeen.
Vaihda seuraavaksi POST'/single' käsittelijä alla olevalla koodilohkolla:
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);
}
});
Yllä oleva koodilohko toteuttaa tekniikan JPEG-kuvien pakkaamiseen ja vertaa kokoja ennen ja jälkeen käytön du komento.
The du komento on Unix-apuohjelma, joka tarkoittaa "levyn käyttöä". Se arvioi tiedostotilan käytön ja analysoi levyn käytön hakemistossa tai hakemistojoukossa. Kun käytät du komennon kanssa -h lippu, se näyttää kunkin alihakemiston käyttämän tiedostotilan ja sen sisällön ihmisen luettavassa muodossa.
Käynnistä latauspalvelu suorittamalla tämä komento:
node app.js
Testaa seuraavaksi sovelluksesi lähettämällä JPG-kuva reitille paikallinen isäntä:
Sinun pitäisi nähdä tämän kaltainen vastaus:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Muut Sharp-moduulin käyttötarkoitukset
Kuvien pakkaamisen lisäksi terävä moduuli voi myös muuttaa kuvien kokoa, rajata, kiertää ja kääntää kuvia haluttujen määritysten mukaan. Se tukee myös väriavaruuden säätöjä, alfakanavatoimintoja ja muotomuunnoksia.
