Оптимизация картинок на сервере.

GooglePageSpeed — требует уменьшения размер картинок, притом достаточно настойчиво.
Так же это действительно помогает снизить нагрузку на сайт и у увеличить скорость его загрузки.

Для этого нам понадобится  две утилиты jpegoptim  - она будет оптимизировать jpg ну и png  займется optipng

Для начала установим их

 sudo apt-get install jpegoptim optipng -y 

Мало вероятно что нам понадобятся исходные фото, поскольку процедура действительно безопасна, однако сделаем резервную копию всех картинок с сохранением структуры.

 find /home/bitrix/ext_www/shop.wildorchid.ru/ -regex ".*\.\(jpg\|jpeg\|gif\|png\|JPG\|JPEG\|GIF\|PNG\)" -print0 | xargs -0 cp --parents --target-directory ./tmp/backup

Теперь нам остается только сжать картинки до приемлемого качества.

find /home/bitrix/ext_www/shop.wildorchid.ru/{upload/resize_cache,upload/iblock/,local}/ -type f -regex ".*\(jpg\|jpeg\|JPG\|JPEG\)" -exec jpegoptim --preserve --preserve-perms --max=85 {} \;

—max=85 — качество изображения, ступени по 5

В find нет флага регистронезависимости а по этому в примере не все варианты написания Jpg, если же вам нужно действительно все варианты написания от Jpeg до jPg включая наличие и отсутствие «e», то можно сделать так:

... -regex "^.*[j|J][p|P]\(e\|E\|\)[g|G]$"

И вариант jpg+png

 -regex ".*\([j|J][p|P]\(e\|E\|\)[g|G]\|\([p|p][n|N][g|G]\)\)"

Или так если вешать на крон

find /home/bitrix/ext_www/shop.wildorchid.ru/{upload/resize_cache,upload/iblock/,local}/ -type f -regex ".*\(jpg\|jpeg\|JPG\|JPEG\)" -exec jpegoptim --preserve --preserve-perms --max=85 {} \;  > /dev/null 2>&1 

А вот PNG могу обжимаются куда как дольше а главное если вы до сих пор не используете SVG (что странно), то прозрачные PNG в элементах оформления могут немного «замылиться» .По этому мы по умолчанию сохраняем рядом исходный файл.

find /home/bitrix/ext_www/shop.wildorchid.ru/{upload/resize_cache,upload/iblock/,local}/ -type f -regex ".*\(png\|PNG\)" -print -exec optipng -o5 -quiet -keep -preserve {} \;

Для того чтоб проверить что у нас получилось, я взял верстку одного из проектов и прогнал всю папку верстки с изменением в 5 пунктов от 70% до 100. Так же я не буду показывать все картинки на сайте, поскольку динамика была на лицо. Да и отобразить их на сайте в размере 100% оказалось трудно. Заострю внимание лишь на явных изменениях при использование 100% 85% и 70%

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

Исходные данные 100% качество, не обжатые изображения:

...

Для сравнения взял достаточно трудную картинку для оптимизации, поскольку множество мелких деталей дает множество артефактов, однако для наглядности само то. В среднем эффект куда менее заметен.

Посмотрим что у нас получилось:

Разница между 85 и 75%

Давайте посмотрим как изменилась скорость загрузки страницы после конвертации всех изображений, запускаем сессии в режиме инкогнито без кеширования, первый хит.

Реальный контент, единственное на что стоит обратить внимание, так это верстка совсем сырая и картинки не 1:1 ужаты средствами html а следовательно для более качественного сравнение открыть их нужно в 100% размере, однако не стал переделывать, поскольку программно сжатые картинки тоже встречаются и достаточно часто.

Пример верстки 70%   Пример верстки 75%   Пример верстки 80%  
Пример верстки 85%   Пример верстки 90%   Исходное качество  100%

Итог:

85% Отличное соотношение цена-качество, уменьшение размера картинок более чем на 100%, уменьшение скорости загрузки сайта несколько раз!
При этом потеря качества настолько не очевидна, что даже для притязательного зрителя остается в приделах нормы. Идеальный вариант, мы уже уменьшаем размер контента, притом значительно но все еще уверены в качестве. При 80% соотношение размера еще лучше, но артефакты уже начинают появляться.

75% Собственно тут бы оно казалось золотая середина, но нет, артефакты уже явно заметны и на контенте хорошего качества будут видны, что не дает нам прогонять любой сайт с полной уверенностью через оптимизатор.
А вот размер относительно 85% уменьшается незначительно, что конечно даст нам протиста скорости но убавит уверенности что эти действия останутся незаметны на сайте.

70% Уже явно выражены артефакты на сложном контенте, далее я покажу что на большинстве картинок их все-же не заметно но факт того что за контентом нужно будет следить уже остается. А мы собирались прогнать весь сайт сразу, в таком же случае нам придется обходить самые вкусные баннеры.
Данный режим хоть и дал лучшую производительность и объем данных, но цена качество оказался не лучшим. Оy идеально подойдет к не требовательным к качеству контента сайтам, шин монтаж, юристы и тд.

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

Если вам нужно обжать картинки выше определенного разрешения, то это можно сделать так ( утилита входит в состав ImageMagick)

find * -iname '*.jpg' -print0 | xargs -0 mogrify -resize 800x800\> -monitor -format jpg

где \> это именно больше