Как сжать изображения в Node.js с помощью Sharp

Сжатие изображений для Интернета или приложений может значительно повысить производительность. Sharp поможет вам легко сжимать изображения в Node.js.

Неоправданно большие изображения могут замедлить время отклика, увеличить пропускную способность и ухудшить работу пользователя, особенно для тех, у кого ограниченные сетевые планы. Это приводит к снижению показателей отказов или переходов между страницами в Интернете.

Сжатие изображений перед их загрузкой может свести к минимуму эти проблемы и улучшить взаимодействие с пользователем. Модуль Sharp делает этот процесс быстрым и простым.

Настройка среды разработки

Чтобы проиллюстрировать процесс сжатия изображений, начните с настройки службы загрузки изображений с помощью multer. Вы можете ускорить этот процесс, клонировав нужный шаблон из репозитория GitHub.

После клонирования репозитория GitHub выполните следующую команду, чтобы установить зависимости изображений службы загрузки изображений:

установка npm

Затем установите Sharp, выполнив следующую команду:

npm установить резкое

Модуль Sharp — это высокопроизводительная библиотека Node.js для обработки изображений и манипулирования ими. Вы можете использовать Sharp для эффективного изменения размера, обрезки, поворота и выполнения других операций с фотографиями. Sharp также имеет отличную поддержку сжатия изображений.

Методы сжатия изображений для разных форматов

JPG/JPEG

JPEG — это стандарт сжатия изображений, разработанный Объединенной группой экспертов по фотографии для сжатия фотореалистичных фотографий с использованием прогрессивных тонов и цветовых градиентов. Он использует термин «сжатие с потерями», создавая файлы меньшего размера за счет удаления некоторых данных изображения.

Чтобы сжать изображения JPEG с помощью Sharp, импортируйте модуль Sharp и передайте filePath или буфер изображений в качестве аргумента. Затем вызовите метод .jpeg на экземпляре Sharp. Затем передайте объект конфигурации со свойством качества, которое принимает в качестве значения число от 0 до 100. В частности, 0 возвращает самое маленькое сжатое изображение с самым низким качеством, а 100 возвращает самое сжатое изображение с лучшим качеством.

Вы можете установить значение в соответствии с вашими потребностями. Если вам нужны наилучшие результаты сжатия изображений, сохраняйте значение в диапазоне 50–80, чтобы достичь баланса между размером и качеством.

Завершите работу, сохранив сжатое изображение в файловой системе с помощью метода .toFile. Передайте путь к файлу, который вы хотите записать, в качестве аргумента.

Например:

await Sharp(req.file.path).jpeg({quality: 60 }) .toFile(`./images/compressed-${req.file.filename}`) .then(() => { console.log( `${req.file.filename} успешно сжат`); });

Значение качества по умолчанию — 80.

PNG

PNG — это формат файлов изображений, предназначенный для сжатия без потерь и поддержки прозрачного фона.

Сжатие изображения PNG с помощью Sharp аналогично сжатию изображения JPEG с помощью Sharp. Однако есть два изменения, которые необходимо внести, если фотография находится в формате PNG.

Sharp обрабатывает изображения PNG, используя метод .png вместо .jpeg.
Метод .png использует compressLevel — число от 0 до 9, которое заменяет качество в объекте конфигурации. 0 дает максимально быстрое и максимальное значение сжатия, а 9 — самое медленное и наименьшее значение сжатия.

Например:

await Sharp(req.file.path).png({ compressLevel: 5, }) .toFile(`./images/compressed-${req.file.filename}`) .then(() => { console.log (`${req.file.filename} успешно сжат`); });

Значение по умолчанию для compressLevel — 6.

Другие форматы

Sharp поддерживает сжатие различных форматов изображений, включая WebP, TIFF, AVIF, HEIF.

Сжимайте изображения с помощью Sharp

Если вы клонировали репозиторий GitHub, откройте файл app.js и добавьте следующий импорт.

const Sharp = require(“Sharp”); const {exec} = require(“child_process”);

Excel — это функция, предоставляемая модулем 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 (“Пожалуйста, загрузите допустимое изображение”); } const compressedFileName = req.file.filename.split(“.”)(0); const compressedImageFilePath = `./images/${compressedFileName}-compressed.png`; ожидайте резкий (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: “Изображение успешно загружено и сжато”, sizeBeforeCompression, sizeAfterCompression, }); }); }); }) ; } catch (ошибка) { console.log(error); } });

Приведенный выше блок кода реализует технику сжатия изображений JPEG и сравнивает размер до и после использования команды du.

Команда du — это утилита Unix, сокращение от «использование диска». Он оценивает файловое пространство и анализирует использование диска в папке или группе папок. Когда вы запускаете команду du с флагом -h, она показывает размер файла, который использует каждый подкаталог, вместе с содержимым в удобочитаемой форме.

Запустите службу загрузки, выполнив следующую команду:

узел app.js

Затем протестируйте приложение, отправив изображение JPG по маршруту localhost:/upload-and-compress с помощью клиента приложения Postman или любого другого инструмента тестирования API.

Вы увидите ответ, подобный этому:

{ “message”: “Изображение успешно загружено и сжато”, “sizeBeforeCompression”: “13M”, “sizeAfterCompression”: “3.1M” }

Выше описано, как сжимать изображения в Node.js с помощью Sharp. Надеюсь, статья окажется для вас полезной.

В приведенной выше статье вы познакомились с «Как сжимать изображения в Node.js с помощью Sharp». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!