Оптимизация графики для 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 веб разработчикам.

Поделиться:

Если у Вас возникли вопросы.

Приглашаю задавать их на сервисе вопросов и ответов: Ask LinuxRussia.com.
Там Ваши вопросы не потеряются и Вы быстрее получите ответ, в отличие от комментариев.

2 коммент. :

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

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

    ОтветитьУдалить