Компресирането на изображения за вашия уебсайт или в приложението ви може радикално да подобри производителността. Sharp върши тежката работа.
Ненужно големите изображения могат да доведат до по-бавно време за реакция, да изразходват прекомерна честотна лента и да осигурят бавно изживяване за потребителите, особено тези с по-бавни връзки. Това може да доведе до по-високи нива на отпадане или по-малко реализации.
Компресирането на изображения, преди да ги качите, може да смекчи тези проблеми и да осигури по-добро потребителско изживяване. Модулът Sharp прави този процес бърз и лесен.
Настройване на вашата среда за разработка
За да демонстрирате процеса на компресиране на изображения, започнете с настройка на услуга за качване на изображения с помощта на multer. Можете да ускорите процеса чрез клониране това хранилище на GitHub.
След като клонирате хранилището на GitHub, изпълнете тази команда, за да инсталирате зависимостите за услугата за качване на изображения:
npm install
След това инсталирайте Sharp, като изпълните тази команда:
npm install sharp
The Остър module е високопроизводителна Node.js библиотека за обработка и манипулиране на изображения. Можете да използвате Sharp за ефективно преоразмеряване, изрязване, завъртане и различни други операции върху изображения. Sharp също има отлична поддръжка за компресиране на изображения.
Техники за компресиране за различни формати на изображения
Различни формати на изображения имат различни техники за компресиране. Това е така, защото всеки от тях отговаря на конкретни употреби и изисквания и дава приоритет на различни фактори, включително качество, размер на файла и функции като прозрачност и анимации.
JPG/JPEG
JPEG е стандарт за компресиране на изображения, разработен от Joint Photographic Experts Group за компресиране на снимки и реалистични изображения с непрекъснати тонове и цветови градиенти. То използва алгоритъм за компресия със загуби, генерирайки по-малки файлове чрез изхвърляне на някои данни за изображения.
За да компресирате JPEG изображение с Sharp, импортирайте модула Sharp и предайте filePath или буфер на изображението като аргумент. След това се обадете на .jpeg метод на Остър инстанция. След това предайте конфигурационен обект с a качество свойство, което приема число между 0 и 100 като стойност. Където 0 връща най-малката компресия с най-ниско качество и 100 връща най-голямата компресия с най-високо качество.
Можете да зададете стойността в зависимост от вашите нужди. За най-добри резултати при компресия запазете стойността между 50-80 за постигане на баланс между размер и качество.
Завършете, като запазите компресираното изображение във файловата система с помощта на .toFile метод. Подайте пътя на файла, в който искате да пишете, като аргумент.
Например:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
Стойността по подразбиране за качество е 80.
PNG
PNG (преносима мрежова графика) е файлов формат за изображения, известен със своята компресия без загуби и поддръжка за прозрачен фон.
Компресирането на PNG изображение с Sharp е подобно на компресирането на JPEG изображение с Sharp. Има обаче две промени, които трябва да направите, когато изображението е във формат PNG.
- Sharp обработва PNG изображения с помощта на .png метод вместо на .jpeg метод.
- The .png използва метод ниво на компресия, което е число между 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.
Други формати
Sharps поддържа компресия в различни други формати на изображения, които включват:
- WebP: Компресирането на WebP изображение с Sharp следва същия процес като JPG. Единствената разлика е, че трябва да се обадите на webp метод вместо на .jpeg метод на екземпляра на Sharp.
- TIFF: TIFF (Tag Image File Format) компресирането на изображения с Sharp следва същия процес като JPG. Единствената разлика е, че трябва да се обадите на тиф метод вместо на .jpeg метод на екземпляра на Sharp.
- AVIF: AVIF (AV1 Image File Format) компресирането на изображения с Sharp следва същия процес като JPG. Единствената разлика е, че трябва да се обадите на avif метод вместо на .jpeg метод на екземпляра на Sharp. Стойността по подразбиране на AVIF за качество е 50.
- HEIF: HEIF (високоефективен файлов формат за изображения) компресирането на изображения с Sharp следва същия процес като JPG. Единствената разлика е, че трябва да се обадите на хейф метод вместо на .jpeg метод на екземпляра на Sharp. Стойността по подразбиране на AVIF за качество е 50.
Компресиране на изображения с Sharp
Ако сте клонирали хранилището на GitHub, отворете вашето app.js файл и добавете следните импортирания.
const sharp = require("sharp");
const { exec } = require("child_process");
изп е функция, предоставена от дете_процес модул, който ви позволява да изпълнявате команди на обвивката или външни процеси от вашето приложение Node.js.
Можете да използвате тази функция, за да изпълните команда, която сравнява размерите на файловете преди и след компресирането.
След това заменете POST „/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);
}
});
Кодовият блок по-горе прилага техниката за компресиране на JPEG изображения и сравнява размерите преди и след използването на ду команда.
The ду командата е помощна програма на Unix, която означава „използване на диск“. Той оценява използването на файловото пространство и анализира използването на диска в директория или набор от директории. Когато стартирате ду команда с -ч флаг, той показва файловото пространство, което използва всяка поддиректория, и нейното съдържание в четима от човека форма.
Стартирайте услугата си за качване, като изпълните тази команда:
node app.js
След това тествайте приложението си, като изпратите JPG изображение към маршрута локален хост:
Трябва да видите отговор, подобен на този:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Други употреби на модула Sharp
В допълнение към компресирането на изображения, модулът Sharp може също да преоразмерява, изрязва, завърта и обръща изображения според желаните спецификации. Той също така поддържа корекции на цветовото пространство, операции с алфа канали и конвертиране на формати.