Оптимизация графики для Web в Ubuntu

В данной статье пойдет речь о двух консольных программах OptiPNG и jpegoptim, которые сжимают изображения формата PNG и JPEG без потери качества.

Как советует Google, для графики лучше использовать форматы PNG и JPEG.

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

  • PNG почти во всем превосходит GIF, хотя некоторые прежние версии браузеров могут поддерживать PNG лишь частично.
  • Используйте GIF для очень маленьких или простых изображений (если размер меньше 10 x 10 пикселей или в палитре менее 3 цветов), а также для изображений, содержащих анимацию.
  • Используйте JPG для фотографий.
  • Не используйте BMP и TIFF.

Подробнее тут:
https://developers.google.com/speed/docs/insights/OptimizeImages

Для оптимизации графики для web можно воспользоваться Gimp:
Установить Gimp в Ubuntu 14.04 — 13.10 — 12.04. Сделать Gimp похожим на Photoshop

Почему удобнее использовать данные консольные программы, а не gimp?

Потому что, консольной программой можно очень быстро сжать весь каталог изображений. То есть, не открывать по одному в gimp, а выполнить одну команду в терминале и сжать все 100 или 200 или еще больше изображений за раз.

Разберем работу каждой из них.

Оптимизация PNG изображений для web в Ubuntu.

Воспользуемся программой OptiPNG.
Для её установки выполните следующую команду в терминале:

sudo apt-get install optipng

Теперь инструмент для сжатия графики PNG установлен в Ubuntu.
Данная утилита/программа поддерживает следующие типы файлов для сжатия: PNG, BMP, GIF, PNM or TIFF.

Но для веб лучше использовать png или jpeg, следовательно, остальные форматы учитываться в статье не будут.

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

optipng файл.png

В место файл.png — имя вашего файла изображения png
Либо выполнить команду:

optipng *.png

Тогда будут сжаты все файлы png, находящиеся в каталоге.

Примеры использования.
Переходим в каталог, где лежат наши файлы png:

cd ~/optipng/

Затем выполняем:

optipng javarussia_0001.png

Получим сообщение:

Как видно, то сжатие получилось около 26 процентов. Неплохо, и это только один файл.

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

optipng *.png

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

Также, у данной утилиты очень много опций, просмотреть все можно выполнив команду:
optipng —help

Кроме того, при выполнении данных команд, несжатые файлы не сохраняются. Если вы хотите сохранить неоптимизированные копии, то нужно выполнять все команды с флагом —keep:
optipng —keep *.png

Для удаления данной утилиты нужно выполнить следующую команду:

sudo apt-get remove optipng

Оптимизация JPEG изображений для Web в Ubuntu.

Воспользуемся программой jpegoptim.
Устанавливается с помощью следующей команды:

sudo apt-get install jpegoptim

Всё. Теперь инструменты для оптимизации Jpeg графики в Ubuntu установлен.
Теперь, чтобы сжать изображение Jpeg или Jpg нужно перейти в каталог и выполнить команду с флагом —strip-all

jpegoptim —strip-all имя_файла.jpg

либо для всех файлов jpeg в каталоге:

jpegoptim —strim-all *.jpg

или в случае когда расширения разные jpeg и jpg:

jpegoptim —strim-all *.jp*

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

jpegoptim —strim-all *.jp* *.JP*

—strip-all удаляет все ненужные маркеры файла, к примеру геоданные съемки фотографии и прочее, что для веба абсолютно не нужно.

Примеры использования.
Переходим в каталог с изображениями:

cd jpegoptim/

И выполняем оптимизацию нужного изображения:
jpegoptim —strip-all IMG_0046.JPG
Выдаст сообщение:

Сжатие незначительное, всего 2 процента. Но если у вас фотографий 100 по 2.5 мегабайт, сжатие на 2 процента позволит освободить на сервере 5 мегабайт.

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

Будьте осторожны!
Сжатые изображения перезаписывают существующие, поэтому лучше экспериментируйте над копиями.

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

jpegoptim —help

К примеру, вот несколько полезных параметров:
-t — выводит полную статистику по сжатым изображениям в конце.

jpegoptim —strip-all -t *.jp*

Выведет следующее сообщение в конце:

-m<quality> — выставляется качество изображения, от 0 — 100, чем меньше цифра, тем хуже получится изображение по качеству, но заметно сократится объем.

jpegoptim —strip-all -m80 -t *.jp*

На 20 процентов ухудшили качество, а получили более чем вдвое меньше объем изображений:

Для удаления jpegoptim выполните следующую команду:

sudo apt-get remove jpegoptim

Заключение.

Вот такие 2 очень полезных инструмента для оптимизации графики для Web в Ubuntu. Возможно еще существует куча подобных инструментов, но в данной статье рассказал про те, которые советует Google веб разработчикам.

  • https://www.blogger.com/profile/10236263910646274699 Дмитрий

    Спасибо за статью. Я себе установил. Как раз искал для работы программу для сжатия фотографий.

  • https://www.blogger.com/profile/08644244181041481779 Linuxsoid

    Зачем париться через консоль если есть готовое приложение gThumb, преобразовываем формат и сжимаем изображение в итоге экономия очень значительная, работаю с данной прогой, сделает с обычного png который весит 500-600 кб либо до метра, преобразовываем в jpeg в итоге на выходе имеет изображение с тем же качеством, но с весом в 120-140 кб, конечно каждое фото по разному, но сжатие ощутимо))