Сжатие изображений для вашего веб-сайта или внутри вашего приложения может радикально повысить производительность. Sharp берет на себя тяжелую работу.
Неоправданно большие изображения могут привести к замедлению времени отклика, чрезмерному использованию полосы пропускания и замедлению работы пользователей, особенно тех, кто использует медленные соединения. Это может привести к более высокому показателю отказов или меньшему количеству конверсий.
Сжатие изображений перед их загрузкой может решить эти проблемы и улучшить взаимодействие с пользователем. Модуль Sharp делает этот процесс быстрым и простым.
Настройка среды разработки
Чтобы продемонстрировать процесс сжатия изображений, начните с настройка сервиса загрузки изображений с помощью multer. Вы можете ускорить процесс, клонировав этот репозиторий GitHub.
После клонирования репозитория GitHub запустите эту команду, чтобы установить зависимости для службы загрузки изображений:
npm install
Затем установите Sharp, выполнив следующую команду:
npm install sharp
Острый Модуль — это высокопроизводительная библиотека Node.js для обработки изображений и манипулирования ими. Вы можете использовать Sharp для эффективного изменения размера, обрезки, поворота и выполнения различных других операций с изображениями. Sharp также имеет отличную поддержку сжатия изображений.
Методы сжатия для разных форматов изображений
Различные форматы изображений имеют различные методы сжатия. Это связано с тем, что каждый из них ориентирован на конкретное использование и требования и отдает приоритет различным факторам, включая качество, размер файла и такие функции, как прозрачность и анимация.
JPG/JPEG
JPEG — это стандарт сжатия изображений, разработанный Объединенной группой экспертов по фотографии для сжатия фотографий и реалистичных изображений с непрерывными тонами и цветовыми градиентами. Оно использует алгоритм сжатия с потерями, генерируя файлы меньшего размера за счет удаления некоторых данных изображения.
Чтобы сжать изображение JPEG с помощью Sharp, импортируйте модуль Sharp и передайте путь к файлу или буфер изображения в качестве аргумента. Далее позвоните в .jpeg метод на Острый пример. Затем передайте объект конфигурации с качество свойство, которое принимает число между 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 (Portable Network Graphics) — это формат файлов изображений, известный своим сжатием без потерь и поддержкой прозрачного фона.
Сжатие изображения PNG с помощью Sharp аналогично сжатию изображения JPEG с помощью Sharp. Однако если изображение имеет формат PNG, необходимо внести два изменения.
- Sharp обрабатывает изображения PNG с помощью .png метод вместо .jpeg метод.
- .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 с помощью Sharp происходит по тому же процессу, что и JPG. Единственная разница в том, что вам придется позвонить в веб-сайт метод вместо .jpeg метод на экземпляре Sharp.
- ТИФФ: Сжатие изображений TIFF (Tag Image File Format) с помощью Sharp происходит по тому же процессу, что и JPG. Единственная разница в том, что вам придется позвонить в размолвка метод вместо .jpeg метод на экземпляре Sharp.
- АВИФ: Сжатие изображений AVIF (формат файла изображения AV1) с помощью Sharp осуществляется по тому же процессу, что и JPG. Единственная разница в том, что вам придется позвонить в живо метод вместо .jpeg метод на экземпляре Sharp. Значение AVIF по умолчанию для качество является 50.
- ХИФ: Сжатие изображений HEIF (высокоэффективный формат файлов изображений) с помощью Sharp осуществляется по тому же процессу, что и JPG. Единственная разница в том, что вам придется позвонить в телка метод вместо .jpeg метод на экземпляре Sharp. Значение AVIF по умолчанию для качество является 50.
Сжатие изображений с помощью Sharp
Если вы клонировали репозиторий GitHub, откройте свой приложение.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 и сравнивает размеры до и после использования ты команда.
ты Команда — это утилита Unix, которая означает «использование диска». Он оценивает использование файлового пространства и анализирует использование диска в каталоге или наборе каталогов. Когда вы запускаете ты команда с помощью -час флаг, он отображает файловое пространство, используемое каждым подкаталогом, и его содержимое в удобочитаемой форме.
Запустите службу загрузки, выполнив следующую команду:
node app.js
Затем протестируйте свое приложение, отправив изображение JPG по маршруту. локальный хост:
Вы должны увидеть ответ, похожий на этот:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
Другие варианты использования модуля Sharp
Помимо сжатия изображений, модуль Sharp также может изменять размер, обрезать, поворачивать и переворачивать изображения в соответствии с желаемыми характеристиками. Он также поддерживает настройку цветового пространства, операции с альфа-каналом и преобразование формата.
