Массово оптимизируем все фото на сайте для Google PageSpeed Insights
Думаю, нет ни одного владельца сайтов, который не столкнулся с инструментом PageSpeed Insights и его требованиями к оптимизации изображений. С вновь добавляемыми картинками все более-менее понятно и существует масса модулей практически для любых CMS, позволяющих оптимизировать картинку в момент загрузки. А вот со старыми фотографиями, накопленными годами, не все так просто и массово оптимизировать их с помощью модулей не всегда возможно.
Угождаем Google - минифицируем все и вся
Из-за чего наши фотографии и картинки не оптимальны для web и на что смотрит Google? Не поверите, но от качества :) любая оптимизация уменьшает качество изображения за счет подмены близких по параметрам цветов к единому и сглаживанию изображения (если выражаться совсем грубо).
Как это ни странно, но размер зависит не только от самого фото, но и от его метаданных. Если вы просто загрузили фото с телефона на сайт, вместе с фотографией передались килобайты дополнительных данных в виде даты съемки, места, владельца и служебных комментариев, бороться с которыми необходимо очисткой meta информации файлов, но сегодня именно про графику. Почитав мануалы Гугла [1] мы увидим, что гигант рекомендует использовать ряд инструментов для сжатия JPEG и PNG файлов без влияния на качество картинки (визуально без влияния).
Чем оптимизировать JPG / JPEG ?
Для JPG / JPEG рекомендуют установить и использовать jpegtran или jpegoptim. Оба плагина дают схожие результаты и выбор остается за вами, мы используем jpegoptim.
Как использовать jpegoptim
Все работы в примерах мы проводим на сервере с CentOS
yum install jpegoptim
Для поиска и массовой оптимизации всех файлов на своих сайтах можно использовать команду
find /home/ -name *.jpg -exec jpegoptim --strip-all '{}' \
После выполнения данной команды все изображения данного формата на сайте будут оптимизированы и переписаны новыми
Чем оптимизировать PNG ?
Для PNG рекомендуют установить и использовать OptiPNG или PNGOUT
yum install optipng
Для поиска и массовой оптимизации всех PNG файлов можно использовать команду
find /home/ -name *.png -exec optipng -o4 '{}' \
Все как и в случае с jpg. В примере есть дополнительный параметр -o4, который является ключом –oX , в котором о – optimixation, а X – уровень сжатия ваших фотографий, который может быть от 1 до 7. Лично я не рекомендую выставлять в ключ значение больше 4.
После того как обе команды завершат свою работу, можно дти в PageSpeed[3] и радоваться улучшению результатов и ускорению [2] загрузки сайта.
Примечания
- Рекомендации Google к изображениям на сайте.
- Пример ускорения корпоративного сайта на Битрикс.
- Проверка сайта в PageSpeed.