В данной статье расскажу как можно уменьшить размер изображений. Для этого воспользуюсь npm пакетом под названием imagemin.

Например у меня есть пять изображений общим размером 1,6 МБ, которые необходимо разместить на сайте:

Соответственно их можно просто закачать на сайт. Или уменьшить их размер и тогда страница будет грузиться намного быстрее. Для продолжения потребуется nodejs. Как его установить я рассказал в следующей статье.

Проверить установлен ли nodejs можно следующей командой:

node -v

Если nodejs установлен, команда должна вывести версию nodejs.

А также потребуется npm:

npm -v

Сам пакет называется imagemin-cli. Cli говорит о том, что его можно использовать в командной строке.

Установлю данный пакет глобально при помощи следующей команды:

sudo npm install --global imagemin-cli

Перейду в папку с изображениями:

cd Изображения/test

Несжатое первое изображение весит 60 КБ:

Сожму его с помощи imagemin:

imagemin 1.png > 1-min.png

После сжатия оно весит 44 КБ:

Если сравнить сжатое и несжатое изображение в просмотре изображений, то они практически не отличаются по качеству:

Все изображения у меня представлены в png формате. Поэтому преобразую их в jpg формат следующей командой:

mogrify -format jpg *.png

Для этого потребуется установленная консольная утилита imagemagick. Установлю её следующей командой:

sudo apt install imagemagick

Ну и удалю изображения в формате png:

rm -r *.png

Выполняя эту команду убедитесь, что вы находитесь именно в нужной папке с изображениями, иначе можно удалить нужные файлы:

Теперь сожму jpg изображение:

imagemin 1.jpg > 1-min.jpg

И сравню их размеры до и после сжатия:

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

Все существующие плагины представлены в данной таблице:

Для сжатия мне потребуется плагин mozjpeg. Установлю его глобально:

sudo npm install -g imagemin-mozjpeg

И снова попробую сжать изображение явно указав плагин:

imagemin 1.jpg --plugin=mozjpeg > 1-min.jpg

Снова выведу размер этого файла. И как можно увидеть он весит 24 КБ:

А разница между изображениями минимальная.

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

imagemin *.jpg --plugin=mozjpeg --out-dir=build

Где в конце укажу папку, в которой будут созданы сжатые изображения в моём случае это папка Build. Соответственно до сжатия файлы весят 269 КБ, а после сжатия 89:

А по качеству соответственно они практически одинаковые.

Также можно указывать параметр качества изображения, тоесть насколько сильно нужно сжимать изображение. Для jpg можно указать качество от нуля до 100, где 100 - это идеальное качество, то есть сжатие не применяется.

Сожму третье изображение со стопроцентным качеством:

imagemin 3.jpg --plugin=mozjpeg.quality=100 > 3-min.jpg

И как можно увидеть изображение даже увеличило свой размер:

Теперь попробую понизить качество до 80:

imagemin 3.jpg --plugin=mozjpeg.quality=80 > 3-min2.jpg

И изображение сжалось до 40 КБ:

Таким образом можно регулировать баланс качества и размер изображения.