Svetainės ar programos vaizdų suspaudimas gali iš esmės pagerinti našumą. „Sharp“ pakelia sunkumus.
Dėl bereikalingai didelių vaizdų gali sulėtėti atsako laikas, sunaudoti per daug pralaidumo ir naudotojams, ypač lėtesniems ryšiams, gali būti vangiai. Dėl to gali padidėti atmetimo rodikliai arba sumažėti konversijų.
Suglaudinus vaizdus prieš juos įkeliant galima sumažinti šias problemas ir suteikti geresnę naudotojo patirtį. Sharp modulis leidžia greitai ir lengvai atlikti šį procesą.
Kūrimo aplinkos nustatymas
Norėdami parodyti vaizdų glaudinimo procesą, pradėkite nuo vaizdų įkėlimo paslaugos nustatymas naudojant multer. Galite pagreitinti procesą klonuodami šioje „GitHub“ saugykloje.
Klonavę „GitHub“ saugyklą, paleiskite šią komandą, kad įdiegtumėte vaizdo įkėlimo paslaugos priklausomybes:
npm install
Tada įdiekite „Sharp“ vykdydami šią komandą:
npm install sharp
The Aštrus modulis yra didelio našumo Node.js biblioteka, skirta vaizdams apdoroti ir manipuliuoti. Naudodami Sharp galite efektyviai keisti vaizdų dydį, apkarpyti, pasukti ir atlikti įvairias kitas operacijas. „Sharp“ taip pat puikiai palaiko vaizdus suglaudinant.
Įvairių vaizdo formatų suspaudimo būdai
Įvairūs vaizdo formatai turi skirtingus suspaudimo būdus. Taip yra todėl, kad kiekvienas iš jų atitinka konkrečius naudojimo būdus ir reikalavimus ir teikia pirmenybę skirtingiems veiksniams, įskaitant kokybę, failo dydį ir funkcijas, pvz., skaidrumą ir animaciją.
JPG/JPEG
JPEG yra vaizdų glaudinimo standartas, sukurtas Jungtinės fotografijos ekspertų grupės, skirtas suspausti nuotraukas ir tikroviškus vaizdus su nuolatiniais tonais ir spalvų gradientais. Tai naudoja nuostolingas glaudinimo algoritmas, generuodami mažesnius failus, atmetę kai kuriuos vaizdo duomenis.
Norėdami suspausti JPEG vaizdą naudodami „Sharp“, importuokite „Sharp“ modulį ir kaip argumentą pateikite failo kelią arba vaizdo buferį. Toliau skambinkite .jpeg metodas ant Aštrus instancija. Tada perduokite konfigūracijos objektą su a kokybės savybė, kuri užima skaičių tarp 0 ir 100 kaip vertybė. Kur 0 grąžina mažiausią suspaudimą su žemiausia kokybe ir 100 grąžina didžiausią suspaudimą ir aukščiausios kokybės.
Vertę galite nustatyti pagal savo poreikius. Norėdami gauti geriausius suspaudimo rezultatus, laikykite reikšmę tarp 50-80 rasti pusiausvyrą tarp dydžio ir kokybės.
Užbaikite išsaugodami suspaustą vaizdą failų sistemoje naudodami .į failą metodas. Perduokite failo, į kurį norite įrašyti, kelią kaip argumentą.
Pavyzdžiui:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Numatytoji reikšmė kokybės yra 80.
PNG
PNG (Portable Network Graphics) yra vaizdo failo formatas, žinomas dėl savo nuostolingo glaudinimo ir skaidrių fonų palaikymo.
PNG vaizdo suspaudimas naudojant Sharp yra panašus į JPEG vaizdo suspaudimą naudojant Sharp. Tačiau, kai vaizdas yra PNG formato, turite atlikti du pakeitimus.
- „Sharp“ apdoroja PNG vaizdus naudodama .png metodas vietoj .jpeg metodas.
- The .png metodo naudojimo suspaudimo lygis, kuris yra skaičius tarp 0 ir 9 vietoj kokybės savo konfigūracijos objekte. 0 suteikia greičiausią ir didžiausią įmanomą suspaudimą, tuo tarpu 9 suteikia lėčiausią ir mažiausią įmanomą suspaudimą.
Pavyzdžiui:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Numatytoji reikšmė suspaudimo lygis yra 6.
Kiti formatai
„Sharps“ palaiko įvairių kitų vaizdo formatų glaudinimą, įskaitant:
- WebP: „WebP“ vaizdo glaudinimas naudojant „Sharp“ vyksta taip pat kaip ir JPG. Vienintelis skirtumas yra tas, kad turite paskambinti webp metodas vietoj .jpeg metodas „Sharp“ egzemplioriuje.
- TIFF: TIFF (Tag Image File Format) vaizdo glaudinimas naudojant Sharp vyksta taip pat kaip ir JPG. Vienintelis skirtumas yra tas, kad turite paskambinti tiff metodas vietoj .jpeg metodas „Sharp“ egzemplioriuje.
- AVIF: AVIF (AV1 vaizdo failo formatas) vaizdo glaudinimas naudojant Sharp vyksta taip pat kaip ir JPG. Vienintelis skirtumas yra tas, kad turite paskambinti avif metodas vietoj .jpeg metodas „Sharp“ egzemplioriuje. Numatytoji AVIF reikšmė kokybės yra 50.
- HEIF: HEIF (didelio efektyvumo vaizdo failo formatas) vaizdo glaudinimas naudojant Sharp vyksta taip pat kaip ir JPG. Vienintelis skirtumas yra tas, kad turite paskambinti heif metodas vietoj .jpeg metodas „Sharp“ egzemplioriuje. Numatytoji AVIF reikšmė kokybės yra 50.
Vaizdų glaudinimas naudojant Sharp
Jei klonavote „GitHub“ saugyklą, atidarykite savo app.js failą ir pridėkite toliau nurodytus importuotus elementus.
const sharp = require("sharp");
const { exec } = require("child_process");
vykdytojas yra funkcija, kurią teikia vaikas_procesas modulis, leidžiantis vykdyti apvalkalo komandas arba išorinius procesus iš Node.js programos.
Šią funkciją galite naudoti norėdami paleisti komandą, kuri palygina failų dydžius prieš ir po suspaudimo.
Tada pakeiskite POST'/singletvarkyklę su toliau pateiktu kodo 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);
}
});
Aukščiau pateiktame kodo bloke įdiegta JPEG vaizdų glaudinimo technika ir palyginami dydžiai prieš ir po naudojimo du komandą.
The du komanda yra „Unix“ programa, kuri reiškia „disko naudojimą“. Jis įvertina failų vietos naudojimą ir analizuoja disko naudojimą kataloge arba katalogų rinkinyje. Kai paleisite du komandą su -h vėliavėlė, ji rodo kiekvieno pakatalogio naudojamą failų erdvę ir jos turinį žmogui suprantama forma.
Paleiskite įkėlimo paslaugą vykdydami šią komandą:
node app.js
Tada išbandykite savo programą, nusiųsdami JPG vaizdą į maršrutą localhost:
Turėtumėte pamatyti atsakymą, panašų į šį:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Kiti „Sharp“ modulio naudojimo būdai
Be vaizdų suglaudinimo, ryškus modulis taip pat gali keisti, apkarpyti, pasukti ir apversti vaizdus pagal norimas specifikacijas. Jis taip pat palaiko spalvų erdvės koregavimą, alfa kanalo operacijas ir formatų konvertavimą.
