актуально
Массово оптимизируем все фото на сайте для Google PageSpeed Insights

Массово оптимизируем все фото на сайте для Google PageSpeed Insights

Думаю нет ни одного владельца сайтов, который не столкнулся с инструментом PageSpeed Insights и его требованиями к оптимизации изображений. С вновь добавляемыми картинками все более-ли-менее понятно и существует масса модулей практически для любых CMS позволяющих оптимизировать картинку в момент загрузки. А вот со старыми фотографиями накопленными годами не все так просто и массово оптимизировать их с помощью модулей не всегда возможно.

Данная методика подходит для любых сайтов расположенных на VPS или отдельных серверах к которым у вас есть доступ. Однако, в нашем примере рассмотрен VPS под управлением CentOS с установленной Виртуальной машиной Битрикс.

Угождаем 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] загрузки сайта.

Внедренная оптимизация с OptiPNG и jpegoptim

Примечания

  1. Рекомендации Google к изображениям на сайте.
  2. Пример ускорения корпоративного сайта на Битрикс.
  3. Проверка сайта в PageSpeed.

Комментарии
Полезность статьи
0 / 5 5 5 1
На основе 0 оценок
0%
0%
0%
0%
0%
Понравилась статья?
Отлично
Комментарий*
Представьтесь

Возврат к списку