Почему так нужна оптимизация изображений
Любая страница сайта это некоторый объем информации, который загружается на устройство пользователя прежде чем отобразиться в привычном виде в браузере. Страница состоит из html кода, различных технических файлов (обычно они занимают небольшой объем) и конечно из изображений, именно они составляют львиную долю объема данных, из которых состоит веб-страница сайта. Если эти изображения занимают много места на сайте, то и у пользователя на диске тоже соответственно страница веб-сайта будет грузиться долго.
Это означает что оптимизация изображений на сайте, является важным шагом для увеличения скорости загрузки сайта, повышение поведенческого фактора, ведь каждая лишняя секунда при загрузке сайта, это потеря определенного процента аудитории или потеря конверсии. Скорость загрузки сайта замеряют поисковые системы, понижая в выдаче медленные сайты. Таким образом при медленной загрузке вашего сайта вы теряете вдвойне.
А что было раньше?
Вообще идея оптимизации изображений пришла к нам с настольных компьютеров, функции оптимизации изображений впервые появились в программах для обработки изображений для настольных компьютеров. Вебмастера оптимизировали изображения для сайта заранее на своем компьютере а затем загружали их по FTP на сайт.
Со временем интернет-сообщество выработало несколько упрощенных идей по оптимизации изображений:
Уменьшение разрешение изображения прямо на сайте при помощи языка PHP (библиотека PHP-GD). В погоне за скоростью загрузки сайта, вебмастера уменьшали разрешение изображения очень сильно, буквально на грани восприятия, вот еще чуть чуть и уже непонятно что изображено, придется всматриваться чтобы понять детали.
Размещение на веб странице уменьшенной копии страницы, при клике на которую открывается полноразмерное изображение. Популярная реализация этого процесса была разработана на языке JavaScript при помощи библиотеки LightBox.
Lazy Load (ленивая загрузка) – страница подгружается не полностью а только та часть которая находится в области видимости на экране устройства пользователя, подгрузка оставшейся части контента страницы, происходит постепенно в процессе прокрутки пользователем контента страницы.
Тестирование через сервис Google Page Speed
Итак, как же проверить оптимизированы ли изображения на вашем сайте и на сколько быстро сайт загружается у пользователя? Для этого есть сервисы тестирования загрузки сайта. Мы используем Google Page Speed. В этой статье мы рассмотрим только оптимизацию изображений. Вот результаты тестирования загрузки мобильной версии нашего тестового сайта:
На снимке видно, что по мнению Google, изображения на сайте можно оптимизировать еще на 17% и это позволит уменьшить размер изображения на 22 килобайта.
Оптимизация изображений WordPress с помощью Robin Image Optimizer
Существует 2 варианта использования Robin image optimizer. В качестве многофункционального плагина Clearfy. Либо если вам нужна только одна функция по оптимизации изображений, мы можем предложить воспользоваться отдельным плагином Robin image optimizer (аддон Clearfy)
Clearfy. Установка плагина с функциями оптимизации изображений:
- Скачайте и установите Clearfy на сайте https://ru.clearfy.pro/
- Активируйте плагин.
Затем в разделе “Плагины” вы увидите уведомление с предложением установить Robin image optimizer. Нажмите на кнопку Установить=>Включить
Зайдите в Настройки=>Clearfy меню
Затем перейдите в раздел “Оптимизация изображений”. Это и будет вашей рабочей зоной
Robin image optimizer. Плагин является отдельным и самостоятельным аддоном к плагину Clearfy. Его можно найти в репозитории WordPress. Установка:
- Заходим в список плагинов=>Добавить новый, затем выбираем и скачиваем Robin image optimizer=>Активировать
- Далее заходим в раздел Настройки=>Robin image optimizer
Рабочая зона плагина Robin Image Optimizer.
Хочется отметить, что плагины одинаковые по функционалу и различаются лишь способом установки. Таким образом, интерфейс рабочей зоны плагинов идентичен. Поэтому далее мы продемонстрируем как работать с плагином на примере Clearfy.
Оптимизировать все изображения на стартовой странице плагина Clearfy можно с помощью кнопки “Запустить”.
или в разделе Image Optimizer в навигационном меню Clearfy.
Если на вашем сайте нет изображений более 4 мегабайт, то можете смело нажать “Запустить”, чтобы оптимизировать все изображения. В ином случае вам нужно включить опцию “Изменение размера больших изображений” в разделе Image Optimizer в основных настройках. После нажатия кнопки ВКЛ.
Если вас не устроило по каким-то причинам качество оптимизированных изображений, вы всегда можете восстановить оригинальные изображения из резервной копии в разделе Image Optimizer – Основные настройки:
Итак мы разобрали базовые возможности оптимизации изображений на имеющемся у вас сайте, но что делать с новыми изображениями которые загружаются на ваш сайт? Для оптимизации поступающих изображений на сайт существует 3 варианта оптимизации:
- Автоматическая оптимизация изображений WordPress при загрузке, расположена в том же разделе Image optimizer – Основные настройки.
- Кнопка включить оптимизацию по расписанию, расположена в том же разделе Image optimizer – Основные настройки. В данном случае, оптимизация изображений будет происходить через выбранный в настройках, интервал времени. Такой сценарий может быть полезен для сильнонагруженных сайтов, где загрузка изображений происходит в большом количестве в определенные периоды времени. И чтобы в эти периоды снизить нагрузку на сайт, можно включить именно оптимизацию по расписанию.
- Оптимизация каждого изображения в отдельности. В случае если на вашем сайте достаточно мало изображений, и вы решили не оптимизировать все имеющиеся изображения на сайте, хранящиеся в библиотеке медиафайлов, то можно оптимизировать каждое изображение в отдельности, с помощью кнопки “Оптимизировать”. Она находится в блоке справа при открытии изображения в библиотеке медиафайлов сайта:
Уровень оптимизации используется тот, что задан в настройках. После нажатия кнопки оптимизировать, уровень оптимизации данного изображения, можно изменить чтобы повторно оптимизировать его на другом уровне сжатия.
Настройки для опытных пользователей
Изменение оставшихся настроек (описаны ниже), следует вносить если вы являетесь опытным пользователем wordpress.
Режимы сжатия
Есть 3 режима сжатия изображений: нормальный, средний, высокий.
Нормальный режим, установлен по умолчанию – этот режим обеспечивает сжатие без потерь и ваши изображения будут оптимизированы без видимых изменений. Если вы хотите идеальное качество изображений, мы рекомендуем этот режим. Размер файлов уменьшится приблизительно в 2 раза. Если вам этого недостаточно, попробуйте другие режимы.
Средний режим – этот режим обеспечивает идеальную оптимизацию ваших изображений без существенных потерь качества. Размер файлов уменьшится приблизительно в 5 раз при незначительном снижении качества изображений. Чаще всего, невооруженным взглядом это даже незаметно.
Высокий режим – этот режим будет использовать все доступные методы оптимизации для максимального сжатия изображения. Размер файлов уменьшится приблизительно в 7 раз. Качество некоторых изображений может немного ухудшиться. Используйте этот режим, если вам требуется максимальное снижение веса, и вы готовы смириться с потерей качества изображений.
Журнал ошибок
Данная настройка, позволяет включить ведение журнала ошибок. Он будет отображаться на отдельной вкладке. Если при работе с Сlearfy возникают ошибки, включите данную опцию, чтобы техническая поддержка могла определить причину ошибки и исправить её.
Управление резервными копиями
Если происходит оптимизации изображений WordPress с помощью плагина, то Clearfy делает резервную копию оригиналов изображений, чтобы при необходимости у вас оставалась возможность восстановления оригиналов изображений . В случае если восстанавливать оригиналы не нужно, есть кнопка “Очистить резервные копии”.
Оставлять данные EXIF
EXIF – это информация, хранящаяся в фотографиях: модель камеры, скорость затвора, компенсация экспозиции, ISO, GPS и т. д. По умолчанию плагин удаляет расширенные данные EXIF. Если ваш проект посвящён фотографии и вам нужно отображать эти данные, то включите эту опцию.
Выбор сервера оптимизации
В плагине вам будет предложено выбрать один из трех серверов оптимизации. Какая разница какой сервер? Каждый из них готов выдержать определенную нагрузку:
- Сервер 1. Предназначен для оптимизации изображений размером не более 5 Мб. Если объем какой-либо картинки будет превышать это значение, то файл не будет обработан системой и не сожмется.
- Сервер 2. Работает аналогично серверу №1, только размер файлов данном случае не должен быть больше 1 Мб.
- Сервер 3. Размер изображений для оптимизации неограничен.
Но это не значит, что если размер одной из ваших фотографий больше 1 Мб, то вы должны использовать только Сервер №1. Можно использовать и Сервер №3. Или если у вас картинка занимает 500 Кб памяти (то есть не превышает 1 Мб), то вам запрещено использовать Сервер №2. Такое количество вариантов сделано для того, чтобы в случае отказа одного сервера вы могли подключить к другому.
Оптимизировать миниатюры
Отметьте галочками те размеры миниатюр, которые нужно оптимизировать, и снимите галочки напротив тех размеров миниатюр, которые в этом не нуждаются.
Заключение
Оптимизация изображений WordPress будет полезна блогерам, фотографам и администраторам сайтов, которые работают с изображениями. Особенно удачным для этой цели выглядит использование плагина Robin image optimizer. Он позволяет оптимизировать изображения в нескольких режимах:нормальный, средний и высокий. Выбор зависит от задач, которые перед собой ставит администратор. Если фотограф хочет сохранить хорошее качество фотографий, то следует сжать изображения в нормальном режиме и т.д. Любая оптимизация изображений WordPress с помощью плагина происходит в пару кликов. Остальное за вас сделает автоматика.