WebP — это формат веб-изображений, разработанный Google, при помощи которого вы получите маленький размер изображения без потери качества. В этом посте мы углубимся в вопрос "Что за формат WebP?" и расскажем вам больше по этой теме.
Используем WebP
Мы также поговорим о плюсах и минусах WebP-изображений, чем его открыть и о том, как вы можете начать использовать WebP-изображения на своем сайте.
Сравним WebP с другими форматами
Есть много типов изображений, которые принято использовать в интернете. Три наиболее распространенных варианта — PNG, JPEG (или JPG) и GIF. Хотя эти форматы популярны, каждый из них имеет свои плюсы и минусы:
- Jpeg хорош для с большим количеством деталей и цветов, что делает его идеальным выбором для фотографий. В то же время, файлы часто очень получаются большие и не всегда хорошо сжимаются.
- Png идеально подходит для изображений c небольшим количеством данных, например логотипы или скриншоты интерфейса. Он отлично сохраняют качество при сжатии и поддерживают прозрачность, но плохо работает для фотографий.
- GIF отлично подходит для анимации, но плох для статических изображений.
WebP images — это формат изображений от Google, предназначенный для размещения картинок в интернете в качестве. Размер файла получается меньше, чем у других форматов, но качество при этом не ухудшается.
Что за формат WebP и как его использовать на сайте
ТвитнутьВы можете сжать WebP как "с потерями" (lossy), так и "без потерь" (lossless). Последний вариант сохранит больше данных, в то время как первый делает размеры результирующего файла еще меньше.
По данным Google, изображения WebP:
- на 25-34% меньше по размеру, чем аналогичные изображения JPEG.
- на 26% меньше по сравнению с PNG.
Как открыть WebP?
Программы, которыми можно открыть WebP на Windows:
Программы, которыми можно открыть WebP на Mac:
Программы, которыми можно открыть WebP на Linux:
Плюсы и минусы использования WebP на вашем сайте
Теперь, когда мы ответили на вопрос “Что за формат WebP?", давайте поговорим о том, стоит ли его использовать и обсудим плюсы и минусы изображений WebP.
Плюсы WebP изображений
Как мы уже упоминали, основная цель этого формата — веб-ориентированное изображение, которое превосходит как PNG, так и JPEG в большинстве ситуаций.
Файлы изображений занимают место на вашей странице, иногда много места. Чем больше изображений вы добавляете на свой сайт, тем больше вероятность ухудшения производительности страницы. Очень важно чтобы ваша страница загружалась быстро, иначе посетители уйдут с вашего сайта, прежде чем они увидят, что вы на нем предлагаете.
Изображения, сохраненные в формате WebP, могут быть значительно меньше, чем JPEG и PNG с таким же качеством.
Сравнение форматов WebP и jpeg
Также примечательно, что WebP поддерживает прозрачность. Прозрачные изображения невероятно полезны, вы можете использовать их для логотипов или инфографики.
Минусы WebP изображений
Если у WebP так много преимуществ, почему его использует так мало людей? Основным недостатком является то, что изображения WebP в настоящее время не поддерживаются всеми браузерами, хотя все больше и больше браузеров добавляют поддержку.
Поддерживают WebP:
Вот сравнение текущей поддержки браузера, а также доли каждого браузера в России на десктопном и мобильном рынке по состоянию на сентябрь 2019 года по данным Яндекс Радара:
- Chrome — 44% десктоп / 38.6% мобильные устройства
- Yandex браузер 28% десктоп / 12.9% мобильные устройства
- Firefox (только десктоп) — 9.2%
- Edge — 3.2% десктоп
- Opera — 9.7% десктоп / 1.2% мобильные устройства
- Samsung Internet — 4.8% мобильные устройства
Не поддерживают WebP:
- Safari – 1% десктоп / 17.1% мобильные устройства
- Internet Explorer – 3.4% десктоп
- Firefox для Android - менее 1% мобильных устройств
- 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 существует множество плагинов для автоматизации этой работы:
- Smush для WordPress
- Ускорение загрузки сайта для 1С Битрикс
- WebP Image Module для Opencart
- Изображения WEBP для Shop-Script
Вывод
Что за формат WebP? Это тип файла изображений, который имеет потенциал для ускорения вашего сайта, даже больший, чем при использовании сжатых PNGs или JPEG. WebP сжимается как с потерями, так и без потерь дает нам меньшие размеры файлов при сопоставимом качестве.
Хотя его популярность растет, WebP еще не поддерживается во всех браузерах. Тем не менее, это не помеха чтобы использовать этот формат изображения на вашем сайте, особенно если вы загружаете много изображений.
