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

Простой способ оптимизировать размер изображений на сайте, при этом, при меньшей потере качества. Способ, который рекомендует Google и, соответственно, использует для проверки сжатия картинок в своих иснтрументах типа Google PageSpeed Tools, Test My Site.

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

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

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

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

Если у вас шаред хостинг, то тут тоже, ничего вам посоветовать не могу. На 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 .

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

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

Drupal 8 ¶

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

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

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

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

UPD 17.06.2017 ImageMagick для Drupal 8 теперь имеет вторую версию. Необходимо отключить (удалить из админки) старый модуль, затем поставить новый. Новый ставится исключительно композером: composer require drupal/imagemagick:

2.0 . Если вы не знакомы с композером у меня есть статья про это. Код для 8-ки обновлен в соответствии с API, старый будет еррорить.