Блог по продвижению сайтов Блог по SEO

Как использовать новый формат Webp на своём сайте

Просмотров: 3014

Жили - не тужили и тут Google опять огорошил веб-сообщество: используйте современные форматы изображений. А разве JPG или PNG уже не катят?

Да, увы, с точки зрения Google нужно использовать новые форматы, такие как Webp, которые при том же качестве занимают в несколько раз меньше места, а значит, быстрее грузятся и меньше жрут трафика. Итак, Webp что за формат и самое главное, как его включить на своём сайте.

webp что за форматСам формат Webp продвигается Google уже лет 10, но только сейчас, с момента появления его в качестве важного параметра для оптимизации скорости загрузки сайта, он стал активно внедряться в сайты и просмотрщики, а до этого его толком и просмотреть-то было нечем.

Кратко о чем статья:

⭐⭐⭐⭐⭐ WebP что за формат и как включить его на сайте WordPress. Уменьшение размера в несколько раз. Новый формат Webp от Google.

Есть ли эффект от Webp?

Да, на личном опыте скажу, что эффект от применения формата Webp на сайте очевиден.

Google Page Speed убирает ошибку про современные форматы изображений.

используйте современные форматы изображений google

Да и сайт грузится быстрее (особенно заметно на мобильном интернете когда много тяжелых картинок). Но даже если картинок всего 4, то всё равно несколько дополнительных баллов в Google Page Speed можно получить.

webp увеличивает скорость

Внешне я сколько не смотрел никакого ухудшения качества при использовании Webp не заметил.

Читайте также:  Google опять пугает владельцев сайта: на этот раз SSL

Попробуйте найти разницу:

webp что за формат сравнение с jpg разница в несколько раз

Причем JPG был хорошо сжат в Photoshop и занимал всего около 200Кб, без дополнительного сжатия насколько я помню около 400Кб, а png этой же картинки - 1.3 М.
Если ужимать в сервисе tinypng.com - то исходный jpg занимал около 185Кб, но качество падало прямо ощутимо заметно, особенно красных оттенков.

Короче, я думал, что ужал по-максимуму.
Но Webp ужал еще в 2 раза!

Проблемы Webp

  • Не все браузеры поддерживают Webp (Safari и IE не поддерживают этот формат).
  • Нет возможности загрузить Webp в WordPress или Opencart напрямую в интерфейсе CMS.
  • Стандартные просмотрщики в компьютере обычно не воспринимают формат *.webp и отказываются просматривать картинки в нем, приходиться пользоваться сторонними решениями, благо это несложно сделать (смотрите ниже).
  • По отзывам многих специалистов этот формат уже устарел и есть более прогрессивные алгоритмы сжатия, однако Google продвигает в первую очередь именно его.

Как задействовать Webp в WordPress

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

В новом WordPress с 5.8 уже поддерживается Вебп на уровне медиагалереи! :smile:

Да и радости перелопачивать сотни картинок особенной нет.

Поэтому я остановился на плагинах для автоматического конвертирования Jpg и Png в Webp для WordPress:

  • плагин Converter for Media (лучший, просто раньше не знал его и писал статью под Webp Express).
  • плагин Webp Express (уже редко использую, там где не работает Converter for Media)
Читайте также:  Яндекс сайт индексирует, а Гугл нет. Google всё? Неужели сдулся...

Как настроить Webp Express

  1. Устанавливаем как обычный плагин WordPress.
  2. Переходим в Настройки - Webp Express
  3. Я использую примерно такие настройки:

настройки webp плагин webp express wordpress

Наиболее важные пункты, на которые нужно обратить основное внимание:

Conversion method - хотя бы один флажок должен быть.
Если нету ни одного зеленого флажка, а все красные, то пишите хостеру. Если не реагирует - меняйте хостера (вот лидеры хостинга лично для меня).

Именно по этой причине у меня не получилось прямо сейчас поставить использовать Webp Express на своем собственном блоге, так как на моем дешевом VPS (читайте как я купил сервер за 1000р в месяц) просто нет нужных библиотек и придется вникать и как-то ставить их.

Впрочем, в ближайший месяц я думаю, что найду время и переведу блог на Webp, а пока что перевел на этот формат своих клиентов по СЕО продвижению.

Alter HTML - поставить галку, иначе у меня не работало.

И выбрать по возможности первый режим «Replace <img> tags with <picture> tags, adding the webp to srcset» и посмотреть на сайте - если всё ок, то его и оставляйте.

Если не сработало и показываются старые картинки в форматах jpg или png, а не webp - то включите второй режим, «Replace image URLs» и обязательно поставьте ниже галку «Only do the replacements in webp enabled browsers», иначе картинки не будут показываться в iPhone и т.п.

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

Читайте также:  Бесплатный SSL сертификат для сайта

Convert on upload - имеет смысл снять галку чтобы не тупило при загрузке картинок на сайт.

Cache-Control header - я ставлю 1 год.

WebP express +  Fastest Cache

Я использую плагины кеширования во всех проектах, которые продвигаю, особенно мне нравится именно Fastest Cache.

Но при включении изображений в формате Webp на сайте всё равно показывались закешированные старые картинки.

Итак, что нужно сделать:

  1. Включить режим CDN Friendlycnd friendly webp
  2. Не ставить галочку "Предварительная автоматическая генерация кэша".

снять галочку fastest cache и webp

Я проверил на нескольких сайтах - работает и кэш и вебп картинки.

Чем просмотреть формат Webp на компьютере

Чтобы смотреть стандартными средствами Windows (например, через просмотрщик картинок) - поставьте кодек WebpCodecSetup.exe от Google вот тут https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

что за формат webp codec setup скачать

Как еще один вариант - скачать FastStone или XnView с поддержкой формата webp.

Выводы и итоги

Webp формат - действительно позволяет сделать картинки меньше в несколько раз, причем визуально изменения в качестве незаметны.

Конвертировать все картинки в webp автоматически - наиболее удобно, чем обрабатывать заранее картинки до загрузки на сайт. Потому что ни WordPress, ни тот же Opencart вообще не поддерживают загрузку в интерфейсе webp формата.

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

А вот использование автоматических плагинов типа WebP Express и Converter for Media - супер удобная вещь!

Успехов в бизнесе!

Полезные цитаты: Работники работают ровно столько, чтобы их не уволили. А наниматели платят лишь столько, чтобы работники не уволились. Вполне закономерно, что большинство работников ни к чему не стремится.

Блог — Сергея Арсентьева 📈
image
Сергей Арсентьев
Всего материалов на сайте: 239
Активных комментариев: 3 500
Работает онлайн: 10.6 лет
Читателей за это время: 2 466 066
Я в соцсетях —
Фото
Бесплатный видеокурс для начинающих. Что такое фриланс, можно ли на нем зарабатывать и сколько?
Бесплатно Подробнее
Фото
Бесплатная мини книга для тех, кто хочет заказать сайт, но растерялся во множестве CMS и вариантов выбора.
Бесплатно Подробнее
Фото
Пошаговый видеокурс "Как работать в Опенкарт" с уроками по добавлению товаров и статей.
Комментариев 12
  • Кирилл
    Кирилл

    У WebP есть такой нюанс - не все браузеры его поддерживают.
    К примеру, некоторые версии iOS Safari, обычный Safari, IE - не поддерживают WebP.
    https://caniuse.com/#feat=webp
    Поэтому надо хранить всегда как минимум две версии каждой картинки. Webp (для браузеров с поддержкой WebP) и исходную карти
    И отдавать нужную версию в зависимости от браузера.
    А исходную картинку надо при этом еще и оптимизировать/сжимать - чтобы даже для браузеров без поддержки WebP картинки отдавались оптимизированными (более легкими по весу) - это еще третья! версия файла.
    У сервиса optipic я недавно заметил новый функционал, в который это все уже заложено в коробку.
    https://optipic.io/ru/webp/wordpress/
    Можно даже подключить все так, чтобы урлы картинок не менялись (они остаются точно такими же и выглядят как внутренние url на моем сайте). Но на самом деле они подгружаются через их систему с автоматическим сжатием, конвертацией в webp и распознаванием поддержки webp.
    Получается совсем все просто и красиво, да и недорого))

    Комментировать
    • Сергей Арсентьев

      optipic.io - платный сервис, с учетом бесплатных плагинов под WordPress, которые естественно отдают нужную версию фотки в зависимости от браузера, смысла в нем нет.

      Комментировать
  • Kissmyass
    Kissmyass

    Статейка уже устарела, но автору на это по йух

    Комментировать
    • Сергей Арсентьев

      что именно устарело? что webp не нужно применять?

      Комментировать
  • Дмитрий

    Как быть с Яблочниками, если их браузеры не поддерживают WEBP? Это же потеря части трафика, в моем случае около 5% - существенно.

    Комментировать
    • Сергей Арсентьев

      Да, поэтому плагин НЕ удаляет оригинальные фотки, а создает новые в WEBP и показывает их только тем браузерам, которые поддерживают.
      В итоге в Safari посетители видят JPG или PNG, а В Firefox или Chrome - webp.
      Естественно, после применения вебп плагина рекомендуется сбросить кеши и протестировать сайт во всех устройствах и режимах, вдруг в настройках что-то забыли указать.

      Комментировать
  • Юрий
    Юрий

    Чего только не придумает Гугл чтоб содрать с трудящихся))

    Комментировать
  • Виктория
    Виктория

    Добрый день! Спасибо за информацию! Очень полезная статья, хорошо, что есть такой полезный плагин для Вордпресса, вот только действительно жалко, что такие картинки не применимы к плагину Faster Cache, а к плагину YOST применимы ли? На сколько я знаю в пакете Yost тоже есть функция кеширования сайта.

    Комментировать
    • Сергей Арсентьев

      Добрый, я нашел способ подружить Fastest Cache и Webp Express, проверил несколько дней - вроде всё ок, завтра обновлю статью.

      Комментировать
    • Сергей Арсентьев

      Обновил - попробуйте так как в разделе "WebP + Fastest Cache"
      У меня на всех сайтах работает.

      Комментировать
      • Виктория
        Виктория

        Спасибо! Я попробовала. Но почемуто после установки плагина и настроек у меня пропали все картинки на странице, что делаю не так? :(

        Комментировать
        • Сергей Арсентьев

          А в Consersion Metod http://prntscr.com/paraou есть хоть один зеленый флажок?
          Если нету, то не сможете использовать webp на этом хостинге. Нужно писать провайдеру.

          Если есть, тогда проверьте пункт ALTER HTML: сначала выбрать первый вариант, проверить, потом второй.
          Если ничего не поможет, то или искать другой плагин или писать в техподдержку этого плагина.

          Комментировать
Смотреть еще комментарии
Добавить свой комментарий