Tīmekļa vietnes vai lietotnes attēlu saspiešana var būtiski uzlabot veiktspēju. Sharp paceļ smagumus.
Nevajadzīgi lieli attēli var palēnināt reakcijas laiku, patērēt pārmērīgu joslas platumu un nodrošināt lēnu pieredzi lietotājiem, īpaši tiem, kuri izmanto lēnāku savienojumu. Tas var izraisīt augstāku atlēcienu līmeni vai mazāk reklāmguvumu.
Attēlu saspiešana pirms to augšupielādes var mazināt šīs problēmas un nodrošināt labāku lietotāja pieredzi. Sharp modulis padara šo procesu ātru un vienkāršu.
Jūsu attīstības vides iestatīšana
Lai demonstrētu attēlu saspiešanas procesu, sāciet ar attēlu augšupielādes pakalpojuma iestatīšana, izmantojot multer. Jūs varat paātrināt procesu, klonējot šajā GitHub repozitorijā.
Pēc GitHub repozitorija klonēšanas palaidiet šo komandu, lai instalētu attēla augšupielādes pakalpojuma atkarības:
npm install
Pēc tam instalējiet Sharp, izpildot šo komandu:
npm install sharp
The Ass modulis ir augstas veiktspējas Node.js bibliotēka attēlu apstrādei un apstrādei. Varat izmantot Sharp, lai efektīvi mainītu attēlu izmērus, apgrieztu, pagrieztu un veiktu dažādas citas darbības. Sharp ir arī lielisks atbalsts attēlu saspiešanai.
Saspiešanas paņēmieni dažādiem attēlu formātiem
Dažādi attēlu formāti ir atšķirīgas saspiešanas metodes. Tas ir tāpēc, ka katrs no tiem atbilst konkrētiem lietojumiem un prasībām, kā arī piešķir prioritāti dažādiem faktoriem, tostarp kvalitātei, faila izmēram un funkcijām, piemēram, caurspīdīgumam un animācijām.
JPG/JPEG
JPEG ir attēlu saspiešanas standarts, ko izstrādājusi Apvienotā fotogrāfiju ekspertu grupa, lai saspiestu fotogrāfijas un reālistiskus attēlus ar nepārtrauktiem toņiem un krāsu gradientiem. Tā izmanto zudumu saspiešanas algoritms, ģenerējot mazākus failus, atmetot dažus attēla datus.
Lai saspiestu JPEG attēlu ar Sharp, importējiet Sharp moduli un kā argumentu nododiet faila ceļu vai attēla buferi. Tālāk zvaniet uz .jpeg metode uz Ass piemēram. Pēc tam nododiet konfigurācijas objektu ar a kvalitāti īpašums, kas aizņem skaitli starp 0 un 100 kā vērtību. Kur 0 atgriež mazāko kompresiju ar zemāko kvalitāti un 100 atgriež lielāko kompresiju ar visaugstāko kvalitāti.
Varat iestatīt vērtību atkarībā no jūsu vajadzībām. Lai iegūtu vislabākos saspiešanas rezultātus, saglabājiet vērtību starp 50-80 lai panāktu līdzsvaru starp izmēru un kvalitāti.
Pabeidziet, saglabājot saspiesto attēlu failu sistēmā, izmantojot .uz failu metodi. Kā argumentu norādiet faila ceļu, uz kuru vēlaties rakstīt.
Piemēram:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Noklusējuma vērtība kvalitāti ir 80.
PNG
PNG (Portable Network Graphics) ir attēla faila formāts, kas pazīstams ar bezzudumu saspiešanu un caurspīdīga fona atbalstu.
PNG attēla saspiešana ar Sharp ir līdzīga JPEG attēla saspiešanai ar Sharp. Tomēr, ja attēls ir PNG formātā, ir jāveic divas izmaiņas.
- Sharp apstrādā PNG attēlus, izmantojot .png metodi, nevis .jpeg metodi.
- The .png metodes lietojumi kompresijas līmenis, kas ir skaitlis starp 0 un 9 tā vietā kvalitāti savā konfigurācijas objektā. 0 nodrošina ātrāko un lielāko iespējamo saspiešanu, kamēr 9 nodrošina lēnāko un mazāko iespējamo saspiešanu.
Piemēram:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Noklusējuma vērtība kompresijas līmenis ir 6.
Citi formāti
Sharps atbalsta saspiešanu dažādos citos attēlu formātos, tostarp:
- WebP: WebP attēla saspiešana ar Sharp notiek tāpat kā JPG. Vienīgā atšķirība ir tā, ka jums ir jāzvana uz webp metodi, nevis .jpeg metode Sharp instancē.
- TIFF: TIFF (Tag Image File Format) attēla saspiešana ar Sharp notiek tāpat kā JPG. Vienīgā atšķirība ir tā, ka jums ir jāzvana uz tiff metodi, nevis .jpeg metode Sharp instancē.
- AVIF: AVIF (AV1 attēla faila formāta) attēla saspiešana ar Sharp notiek tāpat kā JPG. Vienīgā atšķirība ir tā, ka jums ir jāzvana uz avif metodi, nevis .jpeg metode Sharp instancē. AVIF noklusējuma vērtība kvalitāti ir 50.
- HEIF: HEIF (augstas efektivitātes attēla faila formāta) attēla saspiešana ar Sharp tiek veikta tāpat kā JPG formātā. Vienīgā atšķirība ir tā, ka jums ir jāzvana uz heif metodi, nevis .jpeg metode Sharp instancē. AVIF noklusējuma vērtība kvalitāti ir 50.
Attēlu saspiešana ar Sharp
Ja klonējāt GitHub repozitoriju, atveriet savu app.js failu un pievienojiet tālāk norādīto importu.
const sharp = require("sharp");
const { exec } = require("child_process");
izpild ir funkcija, ko nodrošina bērns_process modulis, kas ļauj izpildīt čaulas komandas vai ārējos procesus no lietojumprogrammas Node.js.
Varat izmantot šo funkciju, lai palaistu komandu, kas salīdzina failu izmērus pirms un pēc saspiešanas.
Pēc tam nomainiet POST/singleapdarinātājs ar tālāk norādīto koda bloku:
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);
}
});
Iepriekš minētais koda bloks ievieš JPEG attēlu saspiešanas paņēmienu un salīdzina izmērus pirms un pēc izmantošanas du komandu.
The du komanda ir Unix utilīta, kas apzīmē "diska lietojumu". Tas novērtē faila vietas lietojumu un analizē diska lietojumu direktorijā vai direktoriju komplektā. Kad palaižat du komandu ar -h karodziņš, tas parāda faila vietu, ko izmanto katrs apakšdirektorijs, un tā saturu cilvēkiem lasāmā formā.
Sāciet augšupielādes pakalpojumu, izpildot šo komandu:
node app.js
Pēc tam pārbaudiet savu lietojumprogrammu, nosūtot maršrutā JPG attēlu localhost:
Jums vajadzētu redzēt atbildi, kas ir līdzīga šai:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Citi Sharp moduļa lietojumi
Papildus attēlu saspiešanai asais modulis var arī mainīt attēlu izmērus, apgriezt, pagriezt un apgriezt attēlus atbilstoši vēlamajām specifikācijām. Tā atbalsta arī krāsu telpas pielāgošanu, alfa kanālu darbības un formātu konvertēšanu.
