20 июня 2017

Оптимизация изображений в WordPress

Пока не появился Гугл ПейджСпид со своими рекомендациями к уменьшению размера изображений, мало кто заморачивался по этому поводу. Теперь многие пытаются решить задачу используя для уменьшения размера изображений различные плагины. Я протестировал способности двух популярных плагинов («EWWW Image Optimizer» и «Smush Image Compression and Optimization») и пришел к неутешительному выводу: если эти плагины и способны сжимать изображения до степени, удовлетворяющей Гугл ПейджСпид, то только в платной версии.

Посмотрим на рекомендации Гугл ПейджСпид.

До установки плагинов:

Гугл ПейджСпид до установки плагинов уменьшения изображения

После установки и активации плагинов, минимизации изображений:

После установки плагинов сжатия изображения

Как видно из скринов выше, немного что-то ужалось, но Гугл ПейджСпид все равно не доволен.

Мало того, чтобы запустить в работу плагин «EWWW Image Optimizer» вовсе не достаточно его просто установить и активировать. Если в админке вы видите сообщения об ошибках (см. скрин ниже), то плагин вообще ничего делать не будет, несмотря на то, что прогресс-бар процесса оптимизации бежит и многие думают, что оптимизацию они провели.

Ошибки плагина EWWW

Нормальный хостер может установить недостающие библиотеки и «EWWW Image Optimizer» будет работать. Однако, основываясь на результатах тестирования, я вообще не вижу в этом никакого смысла.

Нет смысла использовать плагины оптимизации. Не вижу смысла использовать даже платные версии плагинов. Ведь jpg-изображения легко подготовить для публикации при помощи сжатия в Фотошопе.

Как сжимать jpg, чтобы Гугл ПейджСпид был доволен

Проэкспериментировав я выяснил, что Гугл ПейджСпид будет удовлетворен качеством не выше 50 попугаев в диалоге сохранения для Web.

Диалог сохранения для Web в Фотошопе

Не смотря на такое сильное сжатие, большинство изображений выглядит замечательно, при этом сильно теряя в весе. Конечно, если это будет логотип с мелкими деталями, то 50 попугаев дадут ужасный результат.

Кстати говоря, Гугл ПейджСпид позволяет скачать оптимизированные изображения. Скачанные jpg-изображения весят столько же и выглядят также, как и сохраненные на 50 попугаях в Фотошопе.

Скачивание оптимизированных файлов в Гугл ПейджСпид

Итого, сохраняем jpg в качестве 50 попугаев Фотошопом и будет нам счастье. Естественно не забываем при этом мониторить результат, т.к. может получиться срамота.

Сравнение веса сжатых изображений (75 и 50 попугаев):

Сравнение веса изображений

Что делать с png-изображениями

Иногда требуется использовать png-изображения (тогда, когда нужна прозрачность в картинке). И тут Фотошоп нам сжатием не поможет. Результат сохранения прийдется дополнительно сжимать. Я для этого использую консольную утилиту pngquant.

Результат применения команды pngquant --quality 75 --speed 1 file_name.png можно видеть на скриншоте ниже.

Сжатие png

Как видите, сжатие серьезное. При этом качество зрительно не изменилось.

Также можно пробовать сжимать png он-лайн сервисами.

Не смотря на отсутствие в списке рекомендаций Гугл ПейджСпид не сжатых png-изображений, я все равно рекомендую их сжимать (ведь они так классно жмутся).

Как правильно выбрать ширину и высоту

Часто проблемы со сжатием возникают из-за неправильно выбранных размеров изображения. Нужно отталкиваться от следующих соображений. Максимальная ширина загружаемой картинки не должна превышать ширину контентной области.

Поскольку сейчас большинство сайтов адаптивны и ширина контентной области может меняться, нужно отталкиваться от максимальной ее ширины.

Тут же возникает законный вопрос. Если ширина изображения превышает ширину контентной области на одном из адаптивов, то как-то это все не ресурсоемко получается. И в этом нам поможет srcset, о котором я писал ранее. Кстати говоря, srcset в в записях картинкам заботливый ВордПресс проставляет автоматически.

Различные мнения

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить