Стоит ли переходить на WebP и как это повлияет на SEO?

стоит ли переходить на webp SEO

В данной статье 🔥 вы узнаете стоит ли переводить свои сайты и интернет магазины на формат изображений WebP и что это даст в плане продвижения сайта в поисковых системах Яндекса и Гугла, а также продолжим нашу тему п вопросу, как влияет скорость загрузки сайта на его продвижение и SEO и какое это даст преимущество по отношению к вашим конкурентам! ✅

⭐️ еще мы затронем новый формате avif который через некоторое время станет лидером среди популярных форматов изображений.

С момента написание стать в которой я показывал 🔥 как бесплатно увеличил посещаемость своего блога на 30% где также увеличилась прибыль с контекстной рекламы, я решил продолжать работы в этом направлении которые позволят довести сайт до 100 баллов в PageSpeed Insight, чтобы доказать как влияет скорость сайта на его продвижение.

Поэтому сегодня мы поговорим о такой вещи как оптимизация картинок в новый формат WebP

Вы слышали про новый формат WebP
Да
88.57%
Нет
11.43%
Проголосовало: 35

Что такое WebP

WebP —  это новый формат изображений который пришел на смену jpg и png которые используются повсеместно на всех сайтах. 🔥 Самое главное отличие данного формата это меньший размер при аналогичном качестве изображения. Все благодаря новой системе сжатия которая состоит из двух этапов:

  1. На первом делается попытка «предсказать» содержимое одних блоков по уже декодированным (три блока над текущим и один блок слева от него)
  2. на втором кодируется ошибка предсказания. В результате чего изображение получается легче и без потерь в качестве

Преимущества WebP

WebP позволяет уменьшать файлы изображений без значимой потери в качестве.

сравнение преимущества WebP к PNG и JPG:

Результаты сравнения WebP к PNG и JPG

  • В сравнении с PNG при сжатии без потерь файл по размеру меньше на 24%;
  • В сравнении JPEG при сжатии с потерями файл по размеру меньше на 25-34%.

Чтобы наглядно показать разницу между форматами есть инструмент под названием Squoosh

Squooshhttps://squoosh.app/  инструмент разработанный компанией Google который предоставляет возможность не только оптимизировать ваши изображения под самые современные форматы изображений, но и наглядно сравнить разницу сжатий между форматами:

  • сравнение формата jpeg и webP
  • сравнение уровня сжатия между avif  и webP
  • сравнение форматов png и webP

webp сравнение с jpeg

Как видите  в этом примере мы сравниваем какой формат лучше сжимаем avif  и webP где avif сжимает на 6% лучше!

  • с левой стороны видим что наша картинка JPG при конвертировании в формат avif уменьшит ее размер на 83%
  • с правой стороны видим что картинка JPG при конвертировании в формат webP уменьшит ее размер на 76%

А теперь представьте масштаб вашего сайта или интернет магазина, где тысячи картинок и как все это можно уменьшить! у меня средний интернет магазин занимает на хостинге порядка 5 гигабайт фотоданных, т.к. многие сайты при загрузки картинки создает еще дополнительные картинки разных размеров в целях оптимизации и скорости сайта и 1 загруженная фотография создает еще таких же 5 фотографий разных форматов!

В этом случае помогает либо пакетная обработка фотографий для сайта либо сторонние сервисы. Для примера я в следующей статье покажу и расскажу как можно автоматизировать сжатие изображений на WordPress или любой другой сайт используя сервис https://imagify.io/  но о нем мы поговорим чуть позже.

Формат avif — Данный формат изображений является свободным форматом сжатия изображений с потерями качества, основанный на библиотеке для сжатия кадров AV1. Данный формат создан в альянсе такие компании как Apple, Intel, Google, Microsoft, Arm, AMD, Nvidia, Amazon, Facebook, Cisco, Netflix, Mozilla и как пишут этот формат может стать основным форматом в ближайшем будущем.

В чем плюсы от перехода сайта на  WebP

  1. Улучшение скорости сайта — значит увеличивается шанс конверсии!
  2. Улучшения поведенческих факторов — за счет быстрой загрузки страницы
  3. Уменьшение нагрузки на сервер сайта и дисковое пространство хостинга

Напомню, что с 2020 года Гугл и Яндекс очень сильно акцентируют внимание на скорости загрузки сайта и если скорость будет плохой, можете забыть о хороших позициях в мобильной выдаче (читайте о нововведениях гугла с мая 2012 года когда будет внедрен  web core vitals )

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

На чем сделан Ваш сайт?
Wordpress
58.97%
Joomla
5.13%
OpenCart
7.69%
Bitrix
10.26%
Drupal
0%
Другие
17.95%
Проголосовало: 39

Как внедрить или перейти на WebP?

⭐️ Для внедрения нового формата webP на ваш сайт или интернет магазин уже создана под каждую CMS огромное кол-во модулей и плагинов, но так как мой блог на котором я делаю этот эксперимент работает на WordPress мы будем рассматривать варианты под него.

Поддержка хостинга WebP

Перед тем как что то начать, необходимо убедиться, что ваш хостинг поддерживает формат WebP! Это сделать можно следующим способом:

  1. создаем файл с расширением php
  2. внесите в него следующий код:
    <?php  var_dump(gd_info());  ?>
  3. Перейдите через браузер на этот файл и на странице должен быть примерно такой текст:
    array(13) { [«GD Version»]=> string(5) «2.2.5» [«FreeType Support»]=> bool(true) [«FreeType Linkage»]=> string(13) «with freetype» [«GIF Read Support»]=> bool(true) [«GIF Create Support»]=> bool(true) [«JPEG Support»]=> bool(true) [«PNG Support»]=> bool(true) [«WBMP Support»]=> bool(true) [«XPM Support»]=> bool(true) [«XBM Support»]=> bool(true) [«WebP Support»]=> bool(true) [«BMP Support»]=> bool(true) [«JIS-mapped Japanese Font Support»]=> bool(false) }
  4. Как видим WebP Support стоит везде true, значит все хорошо и можно приступать к установке модулей или плагинов, если нет, то пишите вашим хостерам для включения данной функции на вебсервере.

А теперь перейдем к выбору плагинов.

Плагины wordpress для WebP

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

есть только один минус, в большинстве случаев все эти плагины платные и бесплатно вам дадут только попробовать на 5-10 картинках, за остальное придется платить.

Какой лучший плагин WebP для WordPress?

Двумя наиболее популярными специализированными плагинами преобразования jpg в WebP для WordPress являются:

  1. Imagify
  2. WebP Express
  3. WebP Converter for Media

Все три данных плагина будут платными, но тут и не стоит удивляться! Если вы хотите улучшить сайт в два клика, то за Вас это сделают, но придется немного заплатить!

Хоть я и указал только три варианта плагинов, но хотел бы выделить из них только один и это будет imagify!обработка фотографий через imagify

Почему я выбрал его?

  1. Это продукт от компании WP Rocket, а качество их кэширующего плагина меня просто потрясла и в связке эти два плагина будут только дополнять друг друга
  2. Imagify это не только плагин, но и сервис в котором вы можете на сайте через Drag and Drop перетащить фотографии с изменением их формата и разрешения в несколько нажатий.
  3. цена обработки фотографий очень лояльная и если вы не хотите парится, то пару баксов и сервис за вас обработает фотографии в лучшем виде!

Перейдя на сайт мы увидим что нам будет предложен выбор из трех вариантов по оптимизации картинок:

  • Normal
  • Agressive
  • Ultra

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

 

 

Как видите у

 

Вы будете переводить сайт на WebP
ДА
88.89%
нет
11.11%
Проголосовало: 18

Почему WordPress не загружает webp?

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

wordpress не загружает webp

Поэтому чтобы научить наш сайт на wordpress хотя бы грузить в ручном режиме данный формат картинок необходимо прописать в файле functions.php след код:

function webp_upload_mimes( $existing_mimes ) {      // add webp to the list of mime types      $existing_mimes['webp'] = 'image/webp';        // return the array back to the function with our added mime type      return $existing_mimes;  }  add_filter( 'mime_types', 'webp_upload_mimes' );

После чего wordpress станет считать webp картинкой и даст возможность ее добавлять в медиатеку.

Уменьшает ли WebP качество изображения?

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

  • WebP без потерь — сохраняют исходное качество изображения.
  • WebP с потерями — приводит к снижению качества изображения, хотя в большинстве случаев это маловероятно.

Чтобы изучить этот вопрос более глубоко, лучше обратится к документации гугла, где Вы можете просмотреть образцы изображений WebP без потерь и с потерями в Google WebP

✅ Данную статью хочу закончить на следующей ноте! WebP это формат который будет нам навязывать компания Google как формат изображений облегчающий загрузку контента на устройстве пользователей и если мы его не будем внедрять, то гугл будет нас принуждать это делать путем понижения сайта в выдаче. Если Вам «фиолетово» на свой сайт и вы не стремитесь к его продвижению, то можете не волноваться, но если у вас блог который приносит прибыль или работающий интернет магазин который продвигается в поисковых системах, я бы настоятельно рекомендовал бы уже сейчас переконвертировать все фотографии в формат WebP

🔥 В следующей статье я сделать инструкцию по пакетной конвертации изображений — вы сможете не прибегая к сомнительным сервисам и тем более платным программа бесплатно изменить формат изображений и тем самым облегчить свой сайт!

Подписывайтесь на мой блог и Вы всегда будете получать качественный контент и полезные инструкции которые помогут вам решать большое количество задач, а главное экономить время!

Мне было бы очень приятно чтобы вы оценили мою статью и я бы понял интересно ли Вам данное направление контента или нет.

сказать спасибо автору блога
Оцените статью
Блог ITишника и просто человека
Добавить комментарий