Drupal: Оптимизация сжатия и загрузки изображений

30.03.2017

Скорее всего, вы пользуетесь Google PageSpeed Tools или Test My Site и если вы ничего не тюните, он будет ругаться на размер картинок. Причем порой ругается на картинок 20, и типа, пережми, сохрани 19кб! Полное безумие. Уменьшай, не уменьшай качество сжатия в Drupal, он будет ругаться и дальше, пока ты не уменьшишь качество по шкале шакалов до 5+, он всё будет ныть что не так, и то не факт что спасет. Такие проверки делают, наверное, вообще все тестировщики сайтов и орут что размер не оптимален. Эта статья, именно о том, как в пару строк, сделать их оптимальными, при этом, увеличив их качество.

Как рекомендует Google (в англоязычной версии статьи, в русской там какой-то бред) — сжимать картинки лучше всего через ImageMagick. ImageMagick — это такая консольная утилита которая позволяет пережимать и конвертировать данные. Она идет по дефолту во всех Linux системах, разве что, в каких-нибудь core и minimal она может отсутствовать, и то не факт. В Windows, я не знаю, скорее всего, эта штука ставится отдельно, и тут я вам не советник. Придется вам тут разобраться.

Если вы пользуетесь Linux и ваш сервер на Linux, то можно даже особо не париться, эта либа поставляется в виде пакета convert. Если интересно, установлено ли, можно проверить командой convert -version

Version: ImageMagick 6.8.9-9 Q16 x86_64 2017-03-14 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2014 ImageMagick Studio LLC
Features: DPC Modules OpenMP
Delegates: bzlib cairo djvu fftw fontconfig freetype jbig jng jpeg lcms lqr ltdl lzma openexr pangocairo png rsvg tiff wmf x xml zlib

У меня вывел следующий результат. Это значит что всё стоит и работает. Это можно сделать и дальше, точнее, это сделает за вас модуль.

Если у вас шаред хостинг, то тут тоже, ничего вам посоветовать не могу. На VPS вы можете поставить пакет самостоятельно, если отсутствует, что сомнительно. На хостингах скорее всего тоже стоит, но может быть ограничен к ней доступ. Тут уж только проверять. Например, на Drupalhosting доступ есть.

Не ждите от этого гайда чуда, он лишь позволит немного сбросить общий весь картинок, и следовательно вес страницы в целом, примерно на 10-20%, что в свою очередь, ускорит загрузку и все эти проверки-нытики не будут вас доставать.

Но оптимизацией размера и сжатия мы не ограничимся. Через ImageMagick мы можем сделать Progressive PNG\JPG. Это когда картинка на медленном соединении грузится не сверху-внизу, оставляя внизу белый экран, а видна сразу в очень плохом качестве (пиксилизованная) и постепенно прогружается в качестве.

Так что убьем сразу двух зайцев.

Сообщаю наперед результаты сжатия для общей картины. У каждой картинки и исходного формата будет разный конечный результат, все сильно зависит от самой картинки, но примерно уловить можно.

Исходный 6000x4000, размер 3.86МБ, jpg. Он пережимается в ноде до 1000х1000, и вот результаты:

  • Сжатие Drupal из коробки, степень сжатия 75% — 106,3кб
  • Сжатие Drupal из коробки, степень сжатия 85% — 144,9кб
  • Сжатие ImageMagick из коробки, степень сжатия 75% — 108,1кб
  • Сжатие ImageMagick из коробки, степень сжатия 85% — 148,3кб
  • Сжатие ImageMagick с оптимизацией, степень сжатия 75% — 103,7кб
  • Сжатие ImageMagick с оптимизацией, степень сжатия 85% — 141.2кб

Как вы можете обратить внимание, ImageMagick из коробки сделает только хуже, его нужно тюнить. Он не может пережать нормально, если ему не обьяснить как. Разница конечно смешная и файл не очень красочный, но везде по чуть-чуть, в итоге серьезно экономится в целом по странице + progression загрузка, что тоже круто.

Установка модуля ImageMagick

Первым делом необходимо установить и включить модуль ImageMagick. После включения перейти на страницу /admin/config/media/image-toolkit и вы увидите что появилось чем пережимать.

Если у вас установлен IM и всё в порядке, раздел Verision Information после выбора IM будет заполнен тем что выводит convert -version. Там же вы можете подкорректировать откуда вызывать данную команду, например для Windows там можно указать путь до .exe, для Linux ничего указывать не нужно, всё настроится самостоятельно. На Drupal 7 будет написано convert, а на Drupal 8 будет пустым.

Обратите внимание что настройки качества хранятся разные, для дефолтного GD2, и IM.

Оптимизируем на Drupal 7

Делается это очень просто, как на 7-ке, так и на 8-ке, но немного отличается код. Модуль ImageMagick предоставляет парочку хуков, которые позволяют нам внедряться на различных этапах сжатия картинки, и мы этим воспользуемся. Нас интересует hook_imagemagick_arguments_alter(), который позволяет добавлять и менять аргументы, которые уйдут команде convert. Основываясь на рекомендациях гугла, нам необходимо использовать -sampling-factor 4:2:0 для более качественного сжатия с меньшими потерями. И для progression изображений мы должны использовать -interlace Plane.

MYMODULE.module
/**
 * Implements hook_imagemagick_arguments_alter().
 */
function MYMODULE_imagemagick_arguments_alter(&$args, $context = array()) {
  # https://developers.google.com/speed/docs/insights/OptimizeImages
  $args['google_advice'] = '-sampling-factor 4:2:0';
  # Progression JPEG and interlaced PNG's support.
  $args['progression'] = '-interlace Plane';
  # Clean image for all unused data. EXIF etcetera.
  $args['strip'] = '-strip';
}

После этого сбрасываем кэш, чтобы хук подцепился.

Теперь, необходимо сбросить все ранее сгенерированные картинки, и при заходе на страницу будут генерироваться новые. Для этого воспользуйтесь drush image-flush --all или конкретный стиль изображения drush image-flush STYLENAME, также можно просто ввести команду без аргумента drush image-flush и он предоставит на выбор какие стили почистить. Это удалит старые изображения и при заходе сгенерирует новые.

Всё!

Drupal 8

Аналогично как и в Drupal 7, только слегка другой код.

MYMODULE.module
/**
 * Implements hook_imagemagick_arguments_alter().
 */
function MYMODULE_imagemagick_arguments_alter(\Drupal\imagemagick\Plugin\ImageToolkit\ImagemagickToolkit $toolkit, $command) {
  # https://developers.google.com/speed/docs/insights/OptimizeImages
  $toolkit->addArgument('-sampling-factor 4:2:0');
  # Progression JPEG and interlaced PNG's support.
  $toolkit->addArgument('-interlace Plane');
  # Clean image for all unused data. EXIF etcetera.
  $toolkit->addArgument('-strip');
}

Сброс кэша, drush image-flush и вы готовы!

Вот и всё. Чтобы посмотреть на progression в действии, перейдите в Chrome или в FireFox в режим адаптивного дизайна. У обоих браузеров есть возможность выбор эмуляции скорости интернета. Выбирайте самый маленький, GPRS 50кб\сек, тогда вы увидите насколько круто грузятся теперь изображения при медленном интернете.

UPD Добавлен третий аргумент -strip который срезает приличное кол-во данных. Он удаляет все метаданные у файла, EXIF и тому подобное. Например, файл у меня весил 86кб, только срезав метаданные он уменьшился до 22кб! В обрезанных и оптимизированных изображения эти данные в 99.9% случаях просто не нужны.

Прикрепленные файлы

Комментарии

Антон
30.03.2017

Большое спасибо! Как раз появилась задача по оптимизации сайта в соотвествии с Google PageSpeed Tools

Plazik
30.03.2017

1) > Как рекомендует Google Он не рекомендует, там приведен просто пример. В русской версии вообще его нет, там другие программы указаны.

2) Сравнение сжатия изображений только по размеру бессмысленно. Нужно еще смотреть как они выглядят, есть ли заметные артефакты сжатия и тд, а то можно сжать 3 мб и в 10 кб, но там будет сплошные пиксели :)

Вообще рекомендую другой модуль https://www.drupal.org/project/imageapi_optimize

Niklan
30.03.2017
  1. Да что-то в русской версии вообще другое написано. Я просто читал в англоязычной, думал русской нет, ну максимум перевод, а там вообще какая-то чушь.

  2. Ну учитывая что приходилось снижать качество до 75%. То новые 85% смотрятся очень заметно лучше, при этом весят меньше и progression работает. А между 85% от IM и GD2 очень сложно заметить. По крайней мере на тех сайтах где я тестил я ничего бросающегося в глаза не заметил.

В чем его отличие от просто ImageMagick? Его меньше использует народу, так он ещё и сам пишет: "Если хотите использовать ImageMagick, пожалуйста используется соответствующий модуль" и линкует на модуль из статьи.

Niklan
31.03.2017

Прикрепил (и добавил ссылку в статью) на сжатые картинки которые были использованы для теста чтобы посмотреть на качество сжатия. Сама картинка сохранена, разумеется, без сжатия и вставлена ссылкой чтобы Drupal не пережимал.

Shu
30.03.2017

Спасибо за способ. Использовал вот этот сайт, чтобы сжимать файлы: https://tinypng.com/ Есть модуль под друпал: https://www.drupal.org/project/tinypng В бесплатной версии позволяет сколько-то файлов сжимать. Для маленьких сайтов пойдёт.

Shu
30.03.2017

При сохранении комментария, кстати такая ошибка вылезла: http://joxi.ru/ZrJOQ0pT9RMB1m

30.03.2017

Да сайт все руки не доходят перекинуть на новый сервак. На текущем я апдейты давно не ставил и вообще подзабил следить за ним, бывает его контузит. Начинает 500 выдавать по всему серваку просто так.

Содержимое данного поля является приватным и не предназначено для показа.