WebP — будущее изображений, которое уже наступило. WebP в SEO
30 сентября 2020
Автор: User

WebP — будущее изображений, которое уже наступило. WebP в SEO

Формат изображений WebP был разработан еще в 2010. Но только неделю назад стал таким, который можно рекомендовать к внедрению на всех сайтах.

Что произошло? Почему следует использовать на всех сайтах? Как внедрить на сайте?

Почему Google рекомендует заменить изображения?

Разберемся с вопросами далее.

WebP — будущее изображений в интернете, которое уже настало


WebP является форматом изображений, который был разработан Google. Формат создан как альтернатива PNG и JPG. WebP отличается значимо меньшим размером файла при аналогичном качестве изображения.

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

Что произошло? Worldwide Developers Conference прошла пару недель назад. На конференции было объявлено о том, что обновлен браузер Safari.

Публично Apple большую часть изменений не огласили. Но разработчики разобрались с обновлениями.

Выяснилось, что теперь Safari поддерживает WebP. Причем, как на MacOS, так и на iPhone.

Еще были внесены такие изменения:

  • В API появилась опция передачи геопозиции примерного местоположения, а не точного;
  • Поддержка HDR video. Режим картинка в картинке для тега video. Улучшения в части работы progressive web application;
  • Поддержка HTTP/3. Но пока только при включении соответствующего флага.

А еще теперь сайтам можно использовать FaceID и TouchID. Больше информации — Meet Face ID and Touch ID for the web.

Браузер Safari использует значительная часть аудитории. По различным данным доля на рынке составляет около 20%.

По популярности Safari является вторым в мире, сразу после Google Chrome, а поддержка WebP имплементирована только с последним обновлением.

Итого теперь все самые популярные браузеры поддерживают WebP — Safari, Opera, Firefox, Chrome, Edge.

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


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

Сравнение возможностей форматов WebP, PNG, JPG:

Сравнение WebP, PNG, JPG

Чем WebP лучше других форматов изображений? WebP позволяет уменьшать файлы изображений без значимой потери в качестве. Различные тесты подтверждают. Google расписал преимущества по результатам собственного исследования.

Результаты такие:

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

WebP в поисковой оптимизации сайтов


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

WebP в поисковой оптимизации сайтов

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

Цели:

  • Улучшение показателя конверсии посредством повышения скорости. Уменьшение расходов пользователя на трафик;
  • Поисковая оптимизация сайта за счет повышения скорости загрузки и улучшения поведенческих факторов;
  • Оптимизация ресурсов. Уменьшение нагрузки на сервер сайта. Уменьшение расходов на исходящий трафик.

Зачем внедрять формат AVIF на сайте

AVIF и WebP называются форматами нового поколения, так называемые next-gen image formats.

Рекомендуемый материал в блоге MegaIndex на тему изображений по ссылке далее — Будущее изображений в интернете. AVIF в SEO — новый формат, который взорвал интернет.

Google посредством инструмента Lighthouse рекомендует использовать формат WebP на всех сайтах.

Next gen format webp

Множество проектов уже используют WebP вместо JPG. Facebook используем формат в приложении.

OLX использует формат на всем сайте. При загрузке фотографии все автоматически конвертируются в WebP.

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


Правильная логика внедрения заключается в использовании прогрессивного метода улучшений на сайте. Что конкретно имеется ввиду? Принцип следующий:

  • Если браузер поддерживает WebP, то на странице выводить WebP;
  • Если браузер не поддерживает WebP, то выводить JPG.

Как проверить поддержку WebP в браузере? Например, через JavaScript. Код:

function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Вариантов по внедрению множество. Инструменты являются бесплатными.

Способ 1. Наилучшее решение заключается в настройках веб-сервера. В таком варианте нет надобности даже менять верстку на страницах сайта.

Как реализовать такое решение на сайте? Вариант с использованием NGINX в примере.

Ссылка на конвертер WebP под Linux, Windows — WebP Precompiled Utilities.

Внедрением подобных решений занимаются технические специалисты. Задача оптимизатора заключается в правильной постановке цели.

Способ 2. Использовать тег picture. Пример:

<picture>
	<source srcset="img/photo.avif" type="image/avif">
	<source srcset="img/photo.webp" type="image/webp">
	<img src="img/photo.jpg" alt="Description of Photo">
</picture>

Как работает тег picture? При использовании такой разметки браузер загрузит первое изображение, которое поддерживает. Если браузер не поддерживает picture, то указан img по умолчанию.

Способ 3. Если контента на сайте мало, есть вариант использовать конвертер изображений.

Инструмент Squoosh предоставляет возможность оптимизации изображений. Разработкой занимался Google.

Ссылка на сервис — Squoosh.

Также инструмент позволяет наблюдать за процессом изменения графики. Сервис бесплатный.

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

Ссылка на сервис — MegaIndex Аудит.

Пример отчета далее:

Аудит сайта на предмет тега title

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

Выводы


Формат изображений WebP теперь поддерживают все популярные браузеры.

Как поисковая система обрабатывает WebP? Технологию разработал Google. Изображения индексируются, обрабатываются и ранжируются аналогично, как и JPG. Разметка логотипов теперь также допускает использование формата.

Преимущество от внедрения WebP заключается в уменьшении размера файлов изображений на 30%.

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

WebP в поисковой оптимизации сайтов

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

Остались вопросы, замечания или комментарии по теме использования формата WebP? Напишите в комментариях.

Обсуждение

stanislav_441
Так может лучше подождать, когда все браузеры будут поддерживать AVIF, раз он на 20% лучше, чем WEBP? Вариант с проверкой поддержки на стороне клиента и вывода соответствующего варианта - это лишняя трата процессорного времени, памяти на сервере и человекочасов. Гораздо проще ужать PNG и получить на 20% больший файл, зато без всех этих заморочек.
Плюс есть ещё проблемы с поддержкой всех этих новых форматов всякими сервисами, программами и т. д.
jeka0899
А стоит ли менять на WEBP формат вот на этом сайте https://tikitavi.ru так на нём очень много картинок или эта работа по замене формата пустая трата времени и сил.
Помогите с ответам улучшит показатели в поиске или всё останется как было.
User
Все просто. Если на проекте все крайне сложно по внедрению, то смысл минимальный. Если есть ресурс, то следует использовать. Для опытного инженера решение задачи по автоматизации заняло бы порядка день-два.
albertzzz2000
Да не только карточки товара. У многих сайтов либо в шапке либо большая картинка (например https://himgdz.ru/) либо карусель из фоток.
olgag3005
Для такого сайта https://simprint.com.ua/ по печати, где большая картинка на стартовой на весь экран, актуально менять? По сути сайт занимается печатью и вышивкой на одежде. Не хотелось бы, чтобы ухудшилось качество картинок.
rzsolt
Мы уже 2.5 года успешно внедряем WEBP, а вы еще только решили статью об этом написать. Кстати ранее я писал о WEBP в своем блоге https://rz-style.ru/kak-soxranit-kartinki-v-webp/
User
Формат стал актуальным только после добавления поддержки в браузер Safari.
kotal
Я в основном встречал сайты, где наполовину внедрили webp формат (например, diolife.com.uaл). Например, логотип webp, товарные карточки jpg. Толи боятся до конца, толи хитрят чего, толи от безграмотности.
kirilltsarenko
WebP - классный. Заменяет и gif тоже. При том же качестве вес меньше. Но в админке битрикса картинка отображается как отсутствующая, почему-то. Битрикс не умеет видеть webp почему-то. Пруф https://yadi.sk/i/p5ljlBO8drmKSg. По этой причине я не могу внедрить webp в свои проекты.
9152533259a
Добрый день. Не "видит" только в карточках товара на превьювках, на больших фото карточек видит , на баннеры ок, особенно на главной есть баннеры на ширину страницы, если сжимать обычный формат гадость и все равно занимает больше места чем webp
general
Спасибо, возьмем на заметку
general
Кстати, если что обращайтесь, поможем заменить, если сами не справитесь)
zug4me
Спасибо, потихоньку начали переходить. Пока только на мобильной версии
grossman.r
Пытались применить при редизайне сайта (https://ottisk.com/). Как раз столкнулись с проблемой отображения на яблочной технике.
За идею спасибо!
servir007
А когда на сайте действительно много фоток, то эту массу переделать еще то развлечение. А фоновое изображение думаю тоже нужно менять? пример https://bodrus.com/
sergeypetrovbse
У нас новый сайт на WP имеем проблему со скоростью загрузки , поможет ли замена формата фотографий товара? Как это сделать, программа, плагин или конвертер? www.bse- info.com.ua
grossman.r
Лучше руками и почистить код.
Постарайтесь минимизировать количество плагинов на оптимизацию и, как минимум, избавиться от элементора. Он может серьезно увеличивать загрузку страниц.
div2303
я у себя внедрил давно на сайте по продаже шин и продукции рти
wwwklenua
На нашем https://klen.ua еще jpg, нужно подумать как переделать без сбоев и другой чепухи
fki
Интересно. Опять работенку подкинули. Теперь нужно весь сайт перелопатить на предмет замены картинок https://www.optprommetiz.ru Это может затянуться очень на долго. А когда сделаем, то они назад вернут и png и jpg и gif и анимацию - не удивлюсь!
animestarsorg
Уже как пол года используется формат изображения WebP. Сайт действительно стал быстрее грузится и пользователям очень понравилось https://animestars.org/
vkaudio
Стоит ли внедрять WebP на небольшом по объёму сайте https://audiopik.ru?
Или это актуально в основном для интернет-магазинов с огромным ассортиментом?
wi-lex
А кто-нибудь знает какой-нибудь конвертер в WebP "на лету" для opencart 3.0? https://rezzon.ru
maks89876887749
Да уж, apple "впереди всех", добавил поддержку webp спустя 10 лет.
Ну и в реальности webp хоть как то конкурирует с jpeg только при очень сильном сжатии, когда у jpeg появляются кубики, ну или на картинках, где много чётких контуров, но нету мелких текстур, это например аниме арты, жепег не может в чёткие контуры.
Фотки webp не может нормально сжимать, особенно нормальные фотки, которые получены из raw или из гугл камеры без шумодава, он просто нещадно мылит.
Сжатие без потерь тоже зависит от картинки, часто оптимизированный PNG получается почти такого же размера как webp.
Так что не сказал бы, что есть смысл менять все жепеги на webp, нужно менять только те, которые подходят под webp.
А вот на avif можно поменять все жепеги, визуальная разница в качестве между avif и webp, заметно больше, чем между webp и jpeg. Только apple наверное добавит avif к тому времени, как гугл выпустит следующий кодек, если вообще добавит. Сейчас в avif используется кодек AV1 и вроде как он не поддерживается эплом, тогда как гуглом и мозилой поддерживается давно, а сам avif поддерживается хромом с 85 версии.
------------------------------------
Мой вывод на основе сравнения форматов на разных картинках.
Нужно переходить на avif, а если всё таки хочется webp, то нужно сначала проверить самому какие картинки будут лучше по качеству, а какие нет.
Ну и у каждого своё понятие о качестве и своё восприятие.
spice2001
Мне так нравится этот сайт! Прям выставка "профессионализма" и "мастерства" )) Авторы пишут про "экономию серверных ресурсов", при этом далее пишут о том, что по факту нужно будет хранить две версии графики на сервере в разных форматах.
User
В ресурсы сервера входит трафик, который оплачивается, ОЗУ и нагрузка на сервер. Две версии хранить не обязательно, но в идеале. Пожалуйста, не оскорбляйте участников в комментариях
Unlimited Platon
test
cyberjohn
Вот у меня на информационном развлекательном ресурсе https://hamsterstyle.ru/ все картинки в png и jpg, мне теперь их надо все менять на web формат ? Там порядка 500 статей и в каждой статье от 5 изображений.
Ратник Ратников
Подскажете, имеет ли смысл менять формат изображений на webp для магазина https://voensklad.su/ который работает на opencart ?
serihel
Получается все сайты под управлением CMS джумла, например https://stavki-best.online/ , цмска сама все изображения как-то переконвертирует? Или нужно будет все ручками менять?
7772467
мне кажется, гугл уже платит мегаиндекс за статьи
retinova
Хоторошо. Но. Изображение в формате WebP может передаваться при шаринге страницы в соцсети? И в rich snippets?
admin
В ближайшее время будем реализовывать на своем сайте https://ppobzor.ru/ WebP формат изображений. Есть люди кто уже их сделал и был результат? Так понимаю, вопрос не маловажный, так как влияет на скорость загрузки, которую сейчас ставят в первоочередные задачи.
Admin
В любом ИМ, например в интернет-магазине светильников https://frezia-light.ru/ изображений настолько много, что остаётся только ждать выхода модулей CMS, которые решают эту задачу. Такие начали появляться полгода назад, но работали плохо, не у всех посетителей картинки отображались.
volk.mav
Да работенки то хватит сейчас по замене jpg, у меня на сайте https://windows10all.ru более 1000 картинок )) .
vbros
1,5 года назад, поменял на сайте веб-студии www.sozdan-site.ru почти все картинки на новый формат. И гугл, и Яндекс сразу отреагировали положительно!
yaspoltava
Сильно упала скорость загрузки мобильной версии нашего сайта https://yas-poltava.com/ Все фотографии ipg сжаты. Сможет ли формат WebP дать реальный прирост в скорости?
klod8
Здравствуйте. Сейчас по developers google скорость у моих блогов https://otdyhsamostoyatelno.ru/ и https://travelblogstories.com/ - 64. Сколько примерно сможет дать формат WebP реального прироста в скорости? На что примерно можно рассчитывать? Спасибо.
Надя
А у нас после внедрения формата webp картинки из микроразметки пропали.
valdiss1978
добавление еще одного скрипта с проверкой условий, хм... не наш вариант. только оптимизировал здесь https://panel-pribor.ru картинки онлайн оптимизатором. Лучше подождем решений на стороне веб-сервера, а то "Внедрением подобных решений занимаются технические специалисты..." ))
pavelm27
я у себя давно заменил https://speczakaz.online/
impools.analytics
подскажите есть ли смысл менять все изображения на https://impools.ua/
dimitry
Привет я из Португалии создаем новый сайт по продаже продукта https://birdfreeportugal.pt/ веб мастер сопротивляется новому формату даже не знаю что делать ? Так же имею интернет магазин где тоже придётся менять картинки https://antipombos.pt может кто подскажет если в этом минусы ?
impools.analytics
У меня сайт по финансовым консультациям, в основном о возврате денег: https://www.traders-chargeback.com.ua/ На нём протестирую описанную технологию с картинками
onecoolhost
Я попробую внедрить это на https://www.perfector.com.ua/ - сайте о автономных канализациях, отпишусь если будут заметные улучшения
unknown.user.good
Спасибо, отличная статья! Мобильная версия может сильно увеличить производительность и в правильным руках и исполнении, может получится отличный результат.
nibbl
а у меня еще лучше) я случайно увеличил скорость сайта и выросли сразу все показатели
кстати я в статье не сжимал картинки в формат webP а только оптимизировал с потерей качества, но сейчас пробегусь и сделаю оптимизацию в WebP
qeu67211
Сегодня перелапатил больше 20 000 файлов в веб, с помощью плагина WebP Express, и получилось. По мне так результат отличный. Проверил где то отдает веб где то джипег
168
На сайте салона красоты размещение картинок в этом формате принесло выигрыш в скорости на 20%
footashes
Стоит ли использовать плагины для сайта или делать формат WebP вручную?
bikaschnackhar
Дайте комментарии, плз, по моему проекту: https://wikiprof.ru/. Не понимаю, почему не получается внедрить. Уже и стили, и внедрение переписали.
Для добавления комментария, пожалуйста, авторизуйтесь