Webp express: настройка, проверка

Один из способов оптимизации изображений для сайта – это их конвертация в формат .webp. Для Google изображения в этом формате уже давно стали необходимостью. В Яндексе это, вероятно, тоже учитывается. В WordPress конвертировать изображения в .webp помогает специальный плагин Webp Express, настройка которого будет рассмотрена в этой статье.

Плагин Вордпресс

Что такое формат .webp

Формат .webp был разработан в 2010 году специалистами из Google. Однако лишь в последние лет 5 он стал популярным и начал использоваться на страницах сайта.

Главные свойства картинок в формате .webp – это низкий вес и хорошее качество. Например, на странице сайта нельзя будет визуально отличить изображение в формате .jpg, которое весит 1 Мб, от изображения в формате .webp, вес которого будет менее 100 кб. То есть при одинаковых внешних данных, картинка в формате .webp может весить более чем в 10 раз меньше, чем картинка в другом формате.

Таким образом, скорость загрузки страницы значительно увеличивается, ведь изображения – это самые тяжёлые части сайта. Google и другие поисковики стремятся к тому, чтобы показать на хороших позициях, наиболее удобные для пользователей сайты, и скорость загрузки является одним из главных приоритетов. Именно поэтому рекомендуется конвертировать изображения на сайте в этот формат. Это хорошо для SEO.

Какие недостатки .webp

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

Есть у .webp ещё один недостаток, который пока ещё не устранён, но со временем его не станет – не все устройства поддерживают этот формат. Казалось бы, если .webp так хорош для SEO, то почему бы не конвертировать просто все изображения в этот формат перед загрузкой на сайт. Однако, если так сделать, то определённая часть пользователей изображения просто не увидит, потому что их устройства не поддерживают этот формат. В первую очередь это пользователи с устаревшими смартфонами и компьютерами, которых сейчас всё ещё много.

Плагин Webp Express настройка которого будет разобрана в этой статье, позволяет устранить этот недостаток. Рассмотрим его далее.

Webp Express – настройка

Плагин Webp Express обладает несколькими достоинствами. Во-первых, он полностью бесплатный, без скрытых функций, которые становятся доступны после оплаты. В этом плагине всё сразу доступно и есть всё, что нужно. Во-вторых, он устраняет недостаток формата .webp, и делает так, чтобы все пользователи смогли видеть изображения. И использует для этого простой способ – после конвертации изображений в .webp плагин оставляет оригиналы картинок в традиционных форматах, таких как .jpg и .png, которые видны у всех. Если на страницу сайта заходит пользователь, устройство которого .webp не поддерживает, он перенаправляет все изображения на традиционные форматы – .jpg и .png. А для всех остальных, в том числе и для поисковика, отображает картинки в .webp.

Недостаток у плагина в отсутствии русского языка в интерфейсе и настройка Webp Express не сразу становится понятной с первого взгляда. Инструкция ниже поможет вам разобраться в этом.

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

https://ru.wordpress.org/plugins/webp-express/

В разделе “Настройка”, в подразделе “Webp Express” находятся опции плагина. Перейдите туда. Изменить нужно всего несколько опций. В опции “Image types to work on” выберите какие форматы изображений будут конвертироваться плагином в формат .webp. По умолчанию выбран вариант конвертации и .jpg и .png. Но в некоторых случаях это недопустимо. Например, изображения логотипа часто делаются в .png, потому у него нужен прозрачный фон. Но если эту картинку конвертировать в .webp, то прозрачный фон станет чёрным. Поэтому рекомендуется выбрать так, чтобы в .webp конвертировались только картинки в формате .jpg – вариант “Only jpegs”.

Only jpegs

Прокрутите страницу настроек в самый низ и включите “Alert HTML”. Эта опция отвечает за то, чтобы плагин перенаправлял на картинки в формате .jpg, если .webp у пользователя не поддерживаются; или на .webp – если поддерживается. Все остальные настройки оставьте здесь по умолчанию.

Alert HTML

Теперь сохраните изменения. Но для этого надо нажать не на кнопку “Save”, а на кнопку “Save settings and force new .htaccess rules”.

Save settings anв force new .htaccess rules

И это ещё не всё. Теперь надо сделать так, чтобы плагин конвертировал все картинки на сайте в формат .webp. Для этого на странице настроек плагина нажмите на кнопку “Bulk convert”.

Bulk convert

Нажмите на кнопку “Start convertation”.

Start convertation

Начнётся конвертация изображений. Её длительность зависит от того, сколько картинок имеется на сайте. Чем больше картинок, тем дольше будет конвертироваться. Обычно это занимает несколько часов.

Когда конвертация завершится, об этом будет свидетельствовать надпись “Done” в окне со списком конвертируемых изображений. После этого можно проверять, как работает плагин. Для этого перейдите на страницу сайта, где есть изображение в формате .jpg, и скачайте картинку на свой компьютер. Посмотрите в каком формате она скачалась. Если картинка скачалась в формате .webp, то плагин настроен верно. Если в .jpg, то неверно (проверяйте именно на картинках в .jpg, потому что для .png мы настроили плагин так, чтобы он их не конвертировал).

Если плагин Webp Express не конвертирует в .webp, то вернитесь к его настройкам и поэкспериментируйте с опциями, которые показаны на скриншоте.

Настройка плагина

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *