Оптимизация и сжатие изображений из консоли

Jan 18, 2018 10:00 · 484 words · 3 minute read scripts

Скорость загрузки практически любого сайта так или иначе зависит от количества и качества используемых изображений.

Оптимизация изображений — очень важная задача. Давайте размеремся!

В данной статье рассмотрим использование инструментов optipng, zopflipng, cjpeg (MozJPEG) и jpegoptim для оптимизации изображений и инструмента cwebp для создания изображений в формате WebP.

Начнем с установки необходимых пакетов.

  • Установка optipng выглядит так:
sudo apt-get update

sudo apt-get install optipng
  • Установка jpegoptim тоже довольно проста:
sudo apt-get update

sudo apt-get install jpegoptim
  • Для установки zopflipng нужно проделать чуть больше действий:
git clone https://github.com/google/zopfli.git

cd zopfli

make zopflipng

По желанию можно также скопировать исполняемый файл в каталог /bin:

sudo cp ./zopflipng /bin
  • Установка MozJPEG еще чуть сложнее, сначала устанавливаем зависимости:
sudo apt-get update

sudo apt-get install autoconf automake libtool nasm make pkg-config git

потом собираем из исходников и устанавливаем сам MozJPEG:

git clone https://github.com/mozilla/mozjpeg.git

cd mozjpeg

autoreconf -fiv

./configure

sudo make && make install
  • Для установки cwebp ставим зависимости:
sudo apt-get update

sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-dev

скачиваем архив с исходниками:

wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.1-linux-x86-32.tar.gz

распаковываем его:

tar xvzf libwebp-0.6.1.tar.gz

собираем и устанавливаем cwebp:

cd libwebp-0.6.1

./configure

make

sudo make install

Примечание. если при создании изображений в формате WebP появится ошибка вида: cwebp: error while loading shared libraries: libwebp.so.7: cannot open shared object file: No such file or directory то следует сделать так:

sudo cp libwebp-0.6.1/src/.libs/* /usr/local/lib

Давайте посмотрим, как пользоваться данными инструментами.

  • Для максимальной оптимизации картинок с помощью optipng используем опцию -o7:
optipng -o7 path-and-directory/image.png

Найти все png-изображения в данном каталоге и его подкаталогах и выполнить их оптимизацию можно так:

find -name '*.png' -print0 | xargs -0 optipng -o7
  • Для оптимизации изображений с помощью инструмента zopflipng используем команду:
zopflipng -m --iterations=10 -y path-and-directory/image.png
  • Сжатие изображений инструментом MozJPEG выполняем так:
cjpeg -optimize -progressive -quality 80 -outfile path-and-directory/image_small.png path-and-directory/image.png
  • Очистка jpg-изображений инструментом jpegoptim делается так:
jpegoptim --strip-all path-and-directory/image.png
  • Создание изображений в формате WebP:
cwebp -quiet -pass 10 -alpha_method 1 -alpha_filter best -m 6 -mt -lossless path-and-directory/image.png -o path-and-directory/image.png.webp

Для удобства создадим несколько bash-скриптов. Первый, png-optimize.sh, содержит такие строки:

#!/usr/bin/env sh

optipng -o7 ${1}

tmpfile=$(mktemp)
/root/zopfli/zopflipng -m —iterations=10 -y ${1} ${tmpfile}
mv ${tmpfile} ${1}

Второй скрипт, jpg-optimize.sh, выглядит так:

#!/usr/bin/env sh

tmpfile=$(mktemp)
/opt/mozjpeg/bin/cjpeg -optimize -progressive -quality 80 -outfile ${tmpfile} ${1}
mv ${tmpfile} ${1}

jpegoptim —strip-all ${1}

Третий и последний скрипт webp-create.sh такой:

#!/usr/bin/env sh

cwebp -quiet -pass 10 -alpha_method 1 -alpha_filter best -m 6 -mt -lossless ${1} -o ${1}.webp

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

find . -iname *.jpg  | xargs -I % /root/jpeg-optimize.sh % 

find . -iname *.png  | xargs -I % /root/png-optimize.sh % 

find . -iname *.jpg  | xargs -I % /root/webp-create.sh % 

find . -iname *.png  | xargs -I % /root/webp-create.sh %

Стоит отметить, что в моем случае оптимизация изображений в формате *.png принесла неплохой результат, в то время как оптимизация jpg-картинок напротив, увеличила их размер. В каждом конкретном случае опции сжатия картинок будут разными, поэтому не стоит бездумно копировать предложенные варианты.

tweet Share