Главная › Новости

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

Опубликовано: 01.09.2018

Важность оптимизации

Здравствуйте.

В одной из прошлых статей я делал обзор и сравнение бесплатного функционала лучших плагинов для оптимизации изображений .

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

Люди довольствуются либо потерей десятков килобайт и падением оценки в PageSpeed Insigths, либо покупают премиум пакеты для обработки изображений.

Максимальное сжатие и экономия веса страницы особенно важны для:

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

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

к содержанию ↑

Выбор кодировщика и удобного способа

Ключевой идей для Игоря (автора плагина) является использование лучших кодировщиков на сегодняшний день, возможность выбирать из них, задавать нужные опции, а также производить обработку на внешнем сервере для ускорения процесса.

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

Opti MozJpeg Guetzli WebP

Он недавно появился в репозитории, пока даже нет утвержденного перевода. Но это не страшно. Так как вся документация и вопросы по использованию плагина доступны на официальном сайте как минимум на трех языках.

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

Итак, краеугольные возможности плагина.

Доступны на выбор 3 кодировщика (возможно добавление новых в будущем):

mozjpeg   — самый популярный кодировщик изображений на сегодняшний день, обеспечивает отличное сжатие с довольно высокой производительностью; guetzli — новый алгоритм оптимизации изображений от Google с уменьшением веса на 20-30% и сохранением высокого визуального качества изображения. Минусом является очень долгая обработка и высокое потребление ресурсов; webp — формат сжатия изображений, предложенный от Google в 2010 г, оптимизированный для веб. Но не поддерживается всеми браузерами, поэтому на сайтах обычно хранятся несколько копий изображений в разных форматах;

Значит ли это, что нужно самому качать и устанавливать эти библиотеки? Нет. Плагин достаточно гибкий и автор предоставил три варианта его использования:

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

к содержанию ↑

Сравнение результатов оптимизированных изображений

Для тестирования установил плагин на чистый WordPress и сгенерировал 150 записей с изображениями от медиастока unsplash.com.

По времени, mozjpeg  в два одновременных потока обработал 160 изображений примерно за 10 минут (на моем довольно слабом ноутбучном процессоре). Guetzli занимает очень много времени и ресурсов, поэтому я не стал прогонять через него все медиафайлы.

Оптимизировал и сравнил одно случайное изображение.

Если честно, я не особо замечаю разницу. Возможно, на высококачественной матрице вы увидите её, если заметите — напишите. Разрешение у всех одинаковое 254х300 (сгенерированный WordPress размер medium)

Оригинал (вверху слева) — Вес: 25,3 кб. ewww image optimizer (вверху справа, для внешнего сравнения выбрал этот плагин, потому что активно использую и считаю одним из лучших) — Вес: 23,4 кб. mozjpeg (внизу слева) — Вес: 23,9 кб. guetzli (Внизу справа) — Вес: 19.4 кб.

Конечно, одной картинки в малом разрешении недостаточно. Чем больше разрешение, тем больше выигрыш и разрыв.

Например, в оригинальном разрешении (1500х1200), результаты оптимизации следующие:

оригинал — 389.6 кб. ewww — 364.6 кб. mozjpeg — 332,6 кб. guetzli — 284,4 кб.

Делайте выводы. Я сделал свой вывод, что плагин Игоря очень полезный инструмент, помогающий получить наилучшие результаты обработки изображений с сохранением высокого качества, где это особенно востребованно, и использовать его совершенно бесплатно.

Я также попросил Игоря задать ему несколько вопросов относительно развития плагина. Надеюсь, вам будет интересно почитать.

к содержанию ↑

Короткое интервью с автором

1. Как появилась идея создать плагин с таким функционалом?

Последним временем в SEO особым вниманием пользуется Google PageSpeed Insights. В 2017 году на Google пришлось около 75% всех поисковых запросов в мире, поэтому SEO сейчас — это в первую очередь подстройка сайта под Google. PageSpeed Insights — это механизм оценки скорости загрузки страницы. Чем быстрее грузится страница — тем выше у нее рейтинг в результатах поиска Google.

Одним из ключевых моментов улучшения показателя в PageSpeed Insights является оптимизация изображений. За неоптимизированные изображения снимается много баллов. Осенью 2017 года мне поступило несколько заказов на PageSpeed SEO для сайтов. Возникла необходимость оптимизации изображений на них.

Сначала я купил платный плагин EWWW Image optimizer. Закинул в него $50, посчитал что должно хватить с запасом. Включил оптимизацию.

Процесс дошел на первом сайте до 40% и заглох. Я начал разбираться, оказывается деньги закончились. Плагин берет деньги за оптимизацию каждого thumbnail.

А там их по десять штук на одно изображения.

Решил поставить WP Smush, бесплатную версию. Оптимизирует бесплатно 50 изображений, а потом нужно нажать кнопку в админке.

Оптимизировал часть изображений. Протестировал в Google Pagespeed, а он все равно показывает, что изображения не оптимизированы.

Если до этого было на 30-40% больше нормы, то после применения бесплатной версии WP Smush на 10-15%.

Решил я все изображения загрузить по ftp и оптимизировать консолью с помощью энкодера Mozilla MozJpeg.

Пробовал несколько раз, пока не добился того что Google Pagespeed убрал претензии к изображениям. Но качество изображений стало очень плохое.

Оказалось что с осени 2017 года Google PageSpeed изменил правила определения оптимизированности изображений, и теперь требует, чтобы изображения были меньше чем webp с качеством 75 + 10% запас. Webp сжимает изображения на 40% лучше любого jpeg энкодера, поэтому получить оптимизированные изображения для Google без использования webp не получится.

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

Они слишком дорого стоят, особенно когда нужно часто генерировать разные размеры thumbnails.

Вот тогда и родилась идея создать свой плагин для оптимизации изображений, в первую очередь ориентированный на оптимизацию для Google PageSpeed Insights.

Основная проблема оптимизации изображений в WordPress сайтах — это зачастую отсутствие возможности устанавливать дополнительные программы на сервер с сайтом. Большинство сайтов используют хостинги, а не отдельные сервера. Вот тут и пришло решение — создать плагин, который будет работать не только с локально установленными энкодерами, но и дистанционно. Самый простой способ запустить программу дистанционно в мире Linux — это подключиться по ssh. Поэтому я встроил в свой плагин ssh клиент, и он может использовать энкодеры удаленно.

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

a) Если у Вас Linux десктоп, то устанавливаете на нем ssh сервер и энкодеры, и подключаете плагин к своему десктопу. Плагин будет автоматически передавать изображения на Ваш Linux десктоп по ssh, оптимизировать их, и забирать обратно на сервер.

б) Если у Вас Windows десктоп, то Вы можете установить на нем бесплатный эмулятор виртуального компьютера Oracle VirtualBox.

Запустить в нем специально созданную мной виртуальную машину, в которой есть Linux, ssh сервер и необходимые энкодеры. И подключить плагин к этой виртуалной машине.

2. Почему бесплатно?

Мне хочется иметь свой pet project. И делится им с другими программистами. Я и сам использую огромное число бесплатных программ, например тот же Linux, VirtualBox, WordPress. Так я смогу внести свой небольшой вклад в мир свободного ПО.

Кроме того, все платные плагины для оптимизации изображений в WordPress имеют свои сервера, на которых ведется оптимизация.

Сервера — это дорого. Поэтому и цена таких плагинов не малая. Мне удалось реализовать механизм, по которому Ваш компьютер — это и есть сервер оптимизации изображений. По этому для работы моего плагина мне не нужно создавать облачные сервера оптимизации и тратить на них большие деньги.

В разработку плагина я вкладываю только свое время.

3. Планируется ли дополнять функционал при росте популярности и чем?

Конечно да, первая функция, которую я добавлю в плагин — это автоматическая оптимизация при добавлении изображения в Media Library.

Эта функция нужна после того, как программист сделал оптимизацию сайта и сдал заказ. Заказчик будет работать с сайтом, добавлять изображения, и они должны автоматически оптимизироваться. Программист может создать бесплатно виртуальный сервер на Amazon AWS, установить в нем Linux, энкодеры и ssh. И подключать своих клиентов к нему после завершения работ.

Также планируется добавит комбинированные режимы «Mozilla MozJpeg + Google Web» и «Google Guetzli + Google Web»

4. В скольких проектах вы его уже использовали и каковы результаты/степень оценки/удовлетворение клиентов?

У меня плагин отработал на нескольких больших сайтах. Также плагином пользуются другие программисты. Я регулярно получаю от них письма с вопросами, поэтому от недавно начал вести страницу

«Часто задаваемых вопросов» по плагину. Что касается собственников сайтов, то их интересует только результат. Сколько баллов получит их сайт в PageSpeed Insights. И если в PageSpeed вообще нет замечаний к изображениям, значит плагин отработал на отлично.

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

Плагин дает возможность самостоятельно и очень гибко создавать мини-серверы оптимизации. Это единственный бесплатный плагин, который работает на хостингах и не нуждается в облачных серверах.

Спасибо, Игорь, за отличный плагин и ответы на вопросы! Я буду пользоваться и рекомендовать плагин. Желаю ему дальнейшего ускоренного развития и роста популярности.