seo/оптимизация

Что за формат WebP и как его использовать на своем сайте.

288
Что за формат WebP и как его использовать на своем сайте.
Active vision

WebP — это формат веб-изображений, разработанный Google, при помощи которого вы получите маленький размер изображения без потери качества. В этом посте мы углубимся в вопрос "Что за формат WebP?" и расскажем вам больше по этой теме.

WebP что за формат Используем WebP

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

Сравним WebP с другими форматами

Есть много типов изображений, которые принято использовать в интернете. Три наиболее распространенных варианта — PNG, JPEG (или JPG) и GIF. Хотя эти форматы популярны, каждый из них имеет свои плюсы и минусы:

  1. Jpeg хорош для с большим количеством деталей и цветов, что делает его идеальным выбором для фотографий. В то же время, файлы часто очень получаются большие и не всегда хорошо сжимаются.
  2. Png идеально подходит для изображений c небольшим количеством данных, например логотипы или скриншоты интерфейса. Он отлично сохраняют качество при сжатии и поддерживают прозрачность, но плохо работает для фотографий.
  3. GIF отлично подходит для анимации, но плох для статических изображений.

Вы можете сжать WebP как "с потерями" (lossy), так и "без потерь" (lossles). Последний вариант сохранит больше данных, в то время как первый делает размеры результирующего файла еще меньше.

По данным Google, изображения WebP:

  1. на 25-34% меньше по размеру, чем аналогичные изображения JPEG.
  2. на 26% меньше по сравнению с PNG.

Как открыть WebP?

Программы, которыми можно открыть WebP на Windows:

Microsoft Edge Microsoft Edge
Google Chrome Google Chrome
Mozilla Firefox Mozilla Firefox
Opera Opera
Adobe Photoshop с плагином WebP File Format Adobe Photoshop с плагином WebP File Format
Google Picasa Google Picasa
XnView XnView
WebP Codec WebP Codec

Программы, которыми можно открыть WebP на Mac:

Google Chrome Google Chrome
Mozilla Firefox Mozilla Firefox
Pixelmator Pixelmator
Opera Opera
Adobe Photoshop с плагином WebP File Format Adobe Photoshop с плагином WebP File Format
Google Picasa Google Picasa
XnView XnView
WebP Codec WebP Codec

Программы, которыми можно открыть WebP на Linux:

Google Chrome Google Chrome
Mozilla Firefox Mozilla Firefox
Opera Opera
XnView XnView
WebP Codec WebP Codec

Плюсы и минусы использования WebP на вашем сайте

Теперь, когда мы ответили на вопрос “Что за формат WebP?", давайте поговорим о том, стоит ли его использовать и обсудим плюсы и минусы изображений WebP.

Плюсы WebP изображений

Как мы уже упоминали, основная цель этого формата — веб-ориентированное изображение, которое превосходит как PNG, так и JPEG в большинстве ситуаций.

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

Изображения, сохраненные в формате WebP, могут быть значительно меньше, чем JPEG и PNG с таким же качеством.

Сравнение WebP и jpeg Сравнение форматов WebP и jpeg

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

Минусы WebP изображений

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

Поддерживают WebP:

Вот сравнение текущей поддержки браузера, а также доли каждого браузера в России на десктопном и мобильном рынке по состоянию на сентябрь 2019 года по данным Яндекс Радара:

  1. Chrome — 44% десктоп / 38.6% мобильные устройства
  2. Yandex браузер 28% десктоп / 12.9% мобильные устройства
  3. Firefox (только десктоп) — 9.2%
  4. Edge — 3.2% десктоп
  5. Opera — 9.7% десктоп / 1.2% мобильные устройства
  6. Samsung Internet — 4.8% мобильные устройства

Не поддерживают WebP:

  1. Safari – 1% десктоп / 17.1% мобильные устройства
  2. Internet Explorer – 3.4% десктоп
  3. Firefox для Android - менее 1% мобильных устройств
  4. UC Browser для Android – 0.6% мобильные устройства

Хотя большинство браузеров теперь поддерживают WebP, все еще есть те, у которых поддержки нет (в частности, Safari).

К счастью, вы ничего не теряете, используя WebP на своем сайте, так как вы можете просто включить "запасное" изображения PNG и/или JPEG, которые отображаются для посетителей с браузерами, которые не поддерживают изображения WebP. Да потребуется немного поработать, но эта работа положительно скажется на производительности.

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

Добавить WebP к себе на сайт довольно просто. Сконвертируйте ваше изображение в формат WebP. Найдите код изображения в HTML вашей страницы:


HTML
<img src="my_image.jpg" alt="Моё изображение">

И добавьте тег picture и source:


HTML
<picture>
  <source srcset="my_image.webp" type="image/webp">
  <img src="my_image.jpg" alt="Моё изображение">
</picture>

Для популярных CMS существует множество плагинов для автоматизации этой работы:

  1. Smush для WordPress
  2. Ускорение загрузки сайта для 1С Битрикс
  3. WebP Image Module для Opencart
  4. Изображения WEBP для Shop-Script

Вывод

Что за формат WebP? Это тип файла изображений, который имеет потенциал для ускорения вашего сайта, даже больший, чем при использовании сжатых PNGs или JPEG. WebP сжимается как с потерями, так и без потерь дает нам меньшие размеры файлов при сопоставимом качестве.

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

1 комментарий

  • Alex_cops Новый пользователь
    13 сентября 2019 21:51
    Круто. Большое спасибо за подробную статью!

Написать комментарий