×

WebP-формат: что это такое и как его использовать

Россия +7 (909) 261-97-71
Шрифт:
1 2145
Подпишитесь на нас в MAX

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

Использование изображений WebP ускоряет работу сайта, не съедает мобильный трафик и не тратит впустую пространство на жестком диске. Все это оказывает положительное влияние на SEO-продвижение.

Топвизор-Журнал в статье рассказывает, как работать с WebP-форматом для SEO.

Что такое WebP

WebP – это формат изображений, который позволяет сжать файл без потери качества. Он разработан компанией Google в 2010 году на замену традиционным форматам JPEG, PNG и GIF.

Преимущества WebP-формата перед другими

  • использование WebP-формата на сайте обеспечивает прирост в среднем до 20–30 баллов по шкале Pagespeed Insights;

  • вес файлов WebP меньше, чем файлов других форматов;

  • передача до 16,7 миллиона цветов у 32-битных и 24-битных изображений.

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

Сравним WebP с другими наиболее популярными форматами.

JPEG

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

Формат назван в честь объединенной группы экспертов по фотографии – комитета по стандартам Joint Photographic Experts Group. Он появился в 1992 году для передачи изображений с одного компьютера на другой. Ранее разработанные методы сжатия были мало пригодны для сжатия данных полноцветных изображений с градацией и с сотней или тысячей цветов. JPEG справился с глубиной от 6 до 24 бит/пиксель.

Особенности формата:

  • поддерживает палитру цветов в 24 бита – отображает до 16,7 миллиона цветов;

  • поддерживается всеми графическими редакторами и браузерами;

  • при использовании JPEG сохраняют отличное качество изображения, но при сжатии и редактировании часть данных удаляется и качество может пострадать;

  • формат поддерживает технологию EXIF, позволяющую хранить различные метаданные.

Исследование Google в 2019 году показало, что WebP отличается от JPEG кодировкой графической информации и за счет использования меньшего количества битов на пиксель сохраняет качество.
При сжатии «с потерями» WebP-формат сохраняет качество, но ухудшает детали и текстуру – это не всегда видно человеческому глазу.

PNG

Еще один популярный формат – PNG. Он, как и JPEG, создан для хранения, обработки и передачи изображения и используется в приложениях и на сайтах . Одинаково успешно конкурирует с JPEG и GIF.
PNG появился в 1995 году как альтернатива GIF.
По детализации, цветопередаче и поддержке прозрачных слоев PNG не уступает WebP. При этом WebP-формат при уменьшении изображения в среднем на 30% лучше сохраняет качество.

GIF

GIF появился в 1987 году для передачи цветной цифровой графики. Сейчас формат используется для передачи графики, диаграмм, логотипов с небольшим количеством цветов и для поддержания анимации.

WebP-формат тоже поддерживает анимацию, но при равном качестве весит примерно на 10–20% меньше. Одновременно с этим GIF используют для простой анимации, и, в отличие от WebP, он не подходит для хранения и размещения в сети фотографий, иллюстраций и макетов.

SVG

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

В отличие от растровых изображений, векторные при увеличении/уменьшении сохраняют качество. Если сравнивать с WebP, SVG дольше загружаются на сайте, поэтому для улучшения скорости работы сайта предпочтение отдают графике WebP. Кроме того, SVG не может отображать столько деталей, сколько WebP-формат, так как основан не на пикселях, а на точках и путях.

Недостатки WebP

  • формат поддерживают не все браузеры;

  • формат не поддерживает ранняя версия WordPress,

  • набор программ по просмотру и редактированию ограничен;

  • при сжатии с потерями объекты на картинке WebP могут выглядеть плоскими, детали – размытыми, а в пиксельной графике теряется часть цветов.

Как использовать изображения WebP на сайте

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

Как работать с WebP

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

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

Если вкратце, то при работе с картинкой надо уделить особое внимание ее названию и описанию.

  • Название файла должно отражать то, что изображено.
    Пример: topvisorseo-image.webp

Используйте транслитерацию, не используйте только цифры, наборы символов с пробелами.

  • Текст, прописанный в alt, отражается в поиске по картинкам.

Пример:

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

  • Заголовок title должен максимально точно передавать суть изображаемого – выводится при наведении курсора на картинку.

  • Тексты ссылок на изображения нужно делать описательными, например: «пример оптимизации webp-изображения».

Какие браузеры поддерживают изображения WebP

Проще всего открыть изображения WebP в браузере. Файл читают большинство браузеров: Chrome, Opera, Firefox и Яндекс.

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

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

Как открыть изображения WebP

Помимо браузеров, WebP-файл можно открыть в бесплатных программах:

  • на Windows: GIMP, Google Picasa, FastStone Image Viewer, ФайлПроИнформация и 123 Photo Viewer;

  • на Mac: FastStone Image Viewer, XnView, PhotoKilter;

  • на Linux: gThumb, XnView, qview.

Способы конвертации

В WebP

Бесплатные:

  1. Microsoft Paint для Windows.
  2. XnView для для Windows / macOS / Linux.
  3. Movavi для Windows и macOS.
  4. GIMP для Windows:

Конвертация в WebP

Конвертация в WebP

Платные:

  1. Adobe Photoshop для Windows и Mac за $20,99 в месяц (можно купить, используя VPN и иностранную карту).

  2. Adobe Photoshop Lightroom для Windows и Mac за $19,99 в месяц (можно купить, используя VPN и иностранную карту).

  3. WidsMob WebP для Windows и Mac с пожизненной лицензией за $25,99.

  4. Wondershare UniConverter для Windows и Mac с пожизненной лицензией за $55,99.

  5. Онлайн-конвертеры: CloudConvert, Convertio, EZGIF, Online-convert.com.

Из WebP

Перечисленные сервисы одинаково хорошо конвертируют самые популярные форматы изображений в WebP и обратно. Например, программа для Windows – Microsoft Paint:

Конвертация в WebP

или Online-convert.com:

Конвертация в WebP

Что запомнить

Можно смело сказать, что изображения WebP – это ценный инструмент для веб-мастеров:

  • WebP-формат сохраняет качество;

  • формат изображений не увеличивает время загрузки сайта;

  • картинки WebP не занимают много места на диске, а значит, экономят память.

Все это сочетается с множеством сервисов, которые читают такие файлы:

  • браузеры: Chrome, Opera, Firefox и Яндекс;

  • программы на Windows: GIMP, Google Picasa, FastStone Image Viewer, ФайлПроИнформация и 123 Photo Viewer;

  • программы на Mac: FastStone Image Viewer, XnView, PhotoKilter;

  • программы на Linux: gThumb, XnView, qview.

Также формат легко конвертировать в любой другой и обратно с помощью:

  • GIMP,

  • Microsoft Paint,

  • Adobe Photoshop,

  • Wondershare UniConverter,

  • XnView.

Есть о чем рассказать? Тогда присылайте свои материалы в редакцию.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • shaherselim
    1
    комментарий
    0
    читателей
    shaherselim
    больше года назад
    Еще интересный плагин для оптимизации картинок:
    optipic.io/ru/modules/wordpress/
    Он автоматически конвертирует изображения в Webp (для браузеров, которые поддерживают webp), а также сжимает/оптимизирует png и jpeg (для браузеров, которые не поддерживают webp)
    -
    0
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Мы сократили рутину SEO-специалиста на 95% – вот архитектура, которая это сделала
Гостьkorayaskin
2
комментария
0
читателей
Полный профиль
Гостьkorayaskin - Можно также посмотреть разбор инструментов типа KeywordKick — помогает быстрее понять, где именно конфликт сигналов.
Как ChatGPT выбирает компании для рекомендаций: что уже известно и как бизнесу подготовиться к эпохе AI Search
Сергей Семенов
1
комментарий
0
читателей
Полный профиль
Сергей Семенов - Спасибо за вопрос. Нет, полностью автоматически отчёт не генерируется. Мы сознательно не пошли по пути «нажал кнопку — получил PDF». В RECOMO мы используем ИИ как инструмент анализа, а не как замену методологии. Наш процесс состоит из нескольких этапов: Проводится серия проверок в различных AI-системах (ChatGPT, Gemini, Claude и других) по заранее сформированной методике и набору запросов. Собираются данные о том, какие компании рекомендуются, в каком контексте, какие источники используются и какие цифровые сигналы присутствуют. Далее ИИ помогает структурировать и анализировать большой объём информации, выявлять закономерности и формировать черновики выводов. После этого отчёт обязательно проходит экспертную проверку нашей командой. Мы дополняем его интерпретацией результатов, практическими рекомендациями и проверяем, чтобы выводы действительно соответствовали данным. Пока рынок AI Search только формируется, полностью доверять генерацию подобных аудитов одной языковой модели было бы неправильно. Именно поэтому мы сочетаем собственную методологию, автоматизированный сбор и анализ данных и экспертную валидацию результатов. Наша цель — не просто красиво оформить отчёт, а дать бизнесу рекомендации, которые действительно помогут повысить AI Visibility и увеличить вероятность появления бренда в рекомендациях современных AI-систем.
Накрутка ПФ vs Бизнес: как накрутка поведенческих факторов «убьет» ваш бизнес в интернете
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Вообще бред несут-пункт позиции и там и там суотрудничать,банов нет,риски и остальные пункты просто смешно,пф гораздо эффективнее чем платить в пиксель)))
Сервисы для создания квизов: сравнение по конверсии, гибкости сценариев и интеграциям
Виктор
1
комментарий
0
читателей
Полный профиль
Виктор - Без сервиса FormDesigner.ru эта подборка будет не полной. Удивлен, почему вы его не включили в список?
5 полезных сервисов для работы с учебными текстами
Anna B.
2
комментария
0
читателей
Полный профиль
Anna B. - Отличный разбор, очень своевременно!
Битрикс24 запускает бесплатный курс по вайбкодингу для гуманитариев
Ирина
1
комментарий
0
читателей
Полный профиль
Ирина - Хорошее решение для бизнеса
Сайт компании в 2026 году: что проверяет Роскомнадзор и как не получить штраф
Олег Черников
1
комментарий
0
читателей
Полный профиль
Олег Черников - Дима спасибо, отличный обзор! За ГОСТ Р 52872-2019 спасибо! Давно около него ходил.
Yandex Cloud сменил логотип и визуальный стиль
Гостьфы
1
комментарий
0
читателей
Полный профиль
Гостьфы - это че такое
Яндекс добавил продвинутую ИИ-модель в Алису на всех умных устройствах
Тимофей
1
комментарий
0
читателей
Полный профиль
Тимофей - Какой смысл усовершенствовать если в нашей стране запрещено говорить правду!
Рынок безалкогольных напитков в 2026 году: как категория продает через доверие к бренду
Алексей
1
комментарий
0
читателей
Полный профиль
Алексей - Все бы хорошо, но это в прошлом. В 2026 г. о росте 2020-2025 гг. остается только мечтать. Рынок БАН перешел к снижению. К серьезному снижению.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
393
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
142
Комментариев
130
Комментариев
121
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
66
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!