Компресовање слика за вашу веб локацију или унутар ваше апликације може радикално побољшати перформансе. Схарп прави тешки подизање.
Непотребно велике слике могу довести до споријег времена одзива, конзумирања превеликог пропусног опсега и пружања спорог искуства корисницима, посебно онима на споријим везама. Ово може довести до виших стопа посете само једне странице или мањег броја конверзија.
Компресовање слика пре него што их отпремите може ублажити ове проблеме и обезбедити боље корисничко искуство. Схарп модул чини овај процес брзим и лаким.
Подешавање вашег развојног окружења
Да бисте демонстрирали процес компресије слика, почните од подешавање услуге за отпремање слика помоћу мултера. Можете убрзати процес клонирањем ово ГитХуб спремиште.
Након клонирања ГитХуб спремишта, покрените ову команду да бисте инсталирали зависности за услугу за отпремање слика:
npm install
Затим инсталирајте Схарп тако што ћете покренути ову команду:
npm install sharp
Тхе Оштар модул је библиотека Ноде.јс високих перформанси за обраду и манипулисање сликама. Можете да користите Схарп за ефикасно мењање величине, исецање, ротирање и обављање разних других операција на сликама. Схарп такође има одличну подршку за компримовање слика.
Технике компресије за различите формате слика
Различити формати слика имају различите технике компресије. То је зато што сваки од њих задовољава специфичне намене и захтеве и дају приоритет различитим факторима, укључујући квалитет, величину датотеке и функције као што су транспарентност и анимације.
ЈПГ/ЈПЕГ
ЈПЕГ је стандард за компресију слике који је развио Јоинт Пхотограпхиц Екпертс Гроуп да компримује фотографије и реалистичне слике са непрекидним тоновима и преливом боја. Користи алгоритам компресије са губицима, генерисање мањих датотека одбацивањем неких сликовних података.
Да бисте компримовали ЈПЕГ слику помоћу Схарп-а, увезите Схарп модул и проследите пут до датотеке или бафер слике као аргумент. Затим позовите .јпег метода на Оштар инстанце. Затим проследите конфигурациони објекат са а квалитета својство које заузима број између 0 и 100 као вредност. Где 0 враћа најмању компресију са најнижим квалитетом и 100 враћа највећу компресију са највишим квалитетом.
Можете подесити вредност у зависности од ваших потреба. За најбоље резултате компресије, задржите вредност између 50-80 да успостави равнотежу између величине и квалитета.
Завршите тако што ћете сачувати компримовану слику у систем датотека користећи .да поднесе методом. Проследите путању датотеке у коју желите да пишете као аргумент.
На пример:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Подразумевана вредност за квалитета је 80.
ПНГ
ПНГ (Преносива мрежна графика) је формат сликовне датотеке познат по компресији без губитака и подршци за транспарентне позадине.
Компресовање ПНГ слике помоћу Схарп-а је слично компресовању ЈПЕГ слике помоћу Схарп-а. Међутим, постоје две промене које морате да направите када је слика у ПНГ формату.
- Оштра обрада ПНГ слике помоћу .пнг метод уместо .јпег методом.
- Тхе .пнг метода користи ниво компресије, што је број између 0 и 9 уместо квалитета у свом конфигурационом објекту. 0 даје најбржу и највећу могућу компресију, док 9 даје најспорију и најмању могућу компресију.
На пример:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Подразумевана вредност за цомпрессионЛевел је 6.
Други формати
Схарпс подржава компресију у разним другим форматима слика који укључују:
- ВебП: Компресија ВебП слике са Схарп-ом прати исти процес као ЈПГ. Једина разлика је у томе што морате да позовете вебп метод уместо .јпег метод на Схарп инстанци.
- ТИФФ: ТИФФ (Таг Имаге Филе Формат) компресија слике са Схарп-ом прати исти процес као ЈПГ. Једина разлика је у томе што морате да позовете тифф метод уместо .јпег метод на Схарп инстанци.
- АВИФ: АВИФ (АВ1 формат датотеке слике) компресија слике са Схарп-ом прати исти процес као ЈПГ. Једина разлика је у томе што морате да позовете авиф метод уместо .јпег метод на Схарп инстанци. АВИФ подразумевана вредност за квалитета је 50.
- ХЕИФ: ХЕИФ (Хигх Еффициенци Имаге Филе Формат) компресија слике са Схарп-ом прати исти процес као ЈПГ. Једина разлика је у томе што морате да позовете хеиф метод уместо .јпег метод на Схарп инстанци. АВИФ подразумевана вредност за квалитета је 50.
Компресовање слика помоћу Схарп-а
Ако сте клонирали ГитХуб спремиште, отворите свој апп.јс датотеку и додајте следеће увозе.
const sharp = require("sharp");
const { exec } = require("child_process");
екец је функција коју обезбеђује дете_процес модул који вам омогућава да извршавате команде љуске или спољне процесе из ваше Ноде.јс апликације.
Ову функцију можете користити за покретање команде која упоређује величине датотека пре и после компресије.
Затим замените ПОСТ ‘/single’ руковалац са блоком кода испод:
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);
}
});
Блок кода изнад имплементира технику компресије ЈПЕГ слика и упоређује величине пре и после употребе ду команда.
Тхе ду команда је услужни програм за Уник који је скраћеница за „коришћење диска“. Он процењује коришћење простора датотека и анализира коришћење диска у директоријуму или скупу директоријума. Када покренете ду команда са -х флаг, приказује простор датотека који сваки поддиректоријум користи и његов садржај у људском читљивом облику.
Покрените услугу отпремања тако што ћете покренути ову команду:
node app.js
Затим тестирајте своју апликацију слањем ЈПГ слике на руту локални домаћин:
Требало би да видите одговор сличан овом:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Друге употребе Схарп модула
Поред компресије слика, оштар модул такође може да промени величину, исече, ротира и окреће слике према жељеним спецификацијама. Такође подржава подешавања простора боја, операције алфа канала и конверзије формата.