Добрый день мои любимые читатели. Сегодня я хотел бы рассказать вам о своём опыте использовании WebP. Статья будет техническая и представляет интерес разработчикам сайтов. Я расскажу о своём опыте использования и подробно опишу, как вам начать пользоваться этой приблудой.
Самые шаристые разработчики уже давно используют оптимизацию изображений на своём сайте, чтобы ускорить загрузку страницы и повысить конверсии. Не смотря на существенные преимущества WebP я начал его использовать совсем недавно, итак, по порядку (Возможно я самый слоупок и все уже давно используют его) .
Что такое WebP?
WebP (произносится как англ. weppy) — формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc. в 2010 году. Основан на алгоритме сжатия неподвижных изображений (ключевых кадров) из видеокодека VP8. Использует контейнер RIFF.
Ссылка на википедию
Проще говоря - очень полезный формат для изображений, позволяющий серьезно уменьшить объем изображений, а с ним и уменьшить время загрузки страниц сайта с сервера на стороне клиента, без потери качества изображения.
Основной проблемой данного формата изображений стало то, что старые версии браузеров его не поддерживают и это серьезно останавливало меня в его использовании несколько лет назад, когда я только о нём услышал. Конечно, со временем ситуация улучшилась и сейчас можно сказать, что почти все современные браузеры последних версий умеют с ними работать.
Однако, когда я попытался просмотреть действия пользователей в Метрике Яндекса через Вебвизор - выяснилось, что они не научились корректно отображать такие сайты. Напоминаю, формату уже 9 лет. В поддержке яндекса сказали, что разберутся.
Поддерживаемые браузеры
Актуальную информацию о поддержке формата браузерами можно всегда узнать по ссылке.
Так же, если верить информации с этого сайта, в данный момент во всем мире этот формат изображений сработает на 78% всех браузеров мира. Что приближает нас к 100% покрытию, когда-нибудь, может быть, надеемся.
Как использовать на своём сайте
Далее более практичная часть, я расскажу, как использовать WebP в своих проектах. Пропустите её, если вам не интересно и перейдите сразу к заключительной части - где я приведу цифры, подтверждающие пользу формата.
Конвертируем свои изображения в WebP
Первое, что нужно сделать - подготовить два варианта изображений. Один из которых будет WebP (для современных браузеров) и обычные JPG + PNG (для старых браузеров). Со вторыми проблем никаких нет, но что же можно использовать, чтобы получить те же изображения в формате WebP?
Используем утилиту для командной строки
Cwebp - позволяет конвертировать изображения в формат WebP одной командой. Указываете качество, имя входного файла и результирующего:
# cwebp -q [quality] [input_file] -o [output_file]
cwebp -q 75 example.png -o example.webp
Онлайн через браузер
Самый популярный и удобный инструмент - squoosh.app, много настроек, но проблема в том, что позволяет работать только с одним изображением за раз.
Ещё один вариант на image.online-convert.com именно им я и пользовался, когда делал это для одного из сайтов.
Другие способы
Для Node.js можно использовать imagemin-webp, инструкцию найдете в интернете, позволяет конвертировать изображения автоматически, что очень удобно.
Используем в HTML
С учетом, если вы хотите, чтобы сайт работал даже в браузерах, которые не поддерживают WebP вам придется немного изменить ваш код. Для этих целей в HTML есть специальный тэг - <picture>.
В нём вы указываете два источника и <img> тэг для браузеров, которые не поддерживают <picture>. Работает отлично, ловите пример:
<picture>
<source srcset="img/example.webp" type="image/webp">
<source srcset="img/ example.jpg" type="image/jpeg">
<img src="img/ example.jpg" alt="Alt Text!">
</picture>
То есть вам нужно все ваши изображения, которые напрямую включаются в HTML файлы переделать под этот пример.
Используем в CSS
Очень часто изображения задаются именно через CSS правила, но с ними всё не так просто, как с HTML.
Главная проблема - нет возможности указать альтернативные ссылки до изображений, чтобы поддерживались всеми браузерами.
Решение - использовать специальные JS-библиотеку, которая будет добавлять к html класс, сигнализирующий о поддержке WebP браузеру. В принципе, можно написать самостоятельно код, который будет это делать, а можно использоваться популярную и довольно удобную библиотеку - популярная библиотека.
Просто перейдите по ссылке, выберите компонент WebP и загрузите итоговый файл (при необходимости можете добавлять другие компоненты библиотеки Modernizr).
Останется только подключить файл и в html теге будет добавляться класс webp или no-webp. Пример для CSS:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
.webp .elementWithBackgroundImage {
background-image: url("image.webp");
}
Как это помогло увеличить скорость загрузки мне
Зачем же все эти извращения и муки, какой толк, спросите вы? Именно об этом и пойдет речь в этой части статьи.
Рассмотрим разницу на одном изображении
Размер исходного изображения (JPG) - 70 467 байт
Размер исходного изображения (оптимизированного, например при помощи compressjpeg.com) - 53 681 байт, ~22% от исходного
Размер конвертированного изображения без снижения качества (WebP) - 35 252 байт, ~50% от исходного
Как итог, WebP уменьшает значительно размер изображений, в некоторых случаях эта цифра превышает 50% и может достигать 80% в зависимости от изображения и его формата.
Разница на реальном проекте
Для примера рассмотрим один из моих проектов, для которого я и делал эту оптимизацию - http://shieldteam.ru/.
В папке images лежат все изображения в формате JPG, PNG, которые используются на сайте. Внутри неё, в папке webp лежат адаптированные изображения. Легко можно посчитать, сколько места занимают изображения (из подсчетов удален файл loading.mp4, так как он не относится к изображениям). На момент прочтения вами этой статьи сайт уже может измениться.
Все JPG и PNG (оптимизированные уже) - 1 022 467 байт
WebP - 595 172 байт
Как видно - разница составляет почти 50%. Столько я экономлю загружаемого трафика для пользователя, посмотрим что нам скажет Audits в инструментах разработчика Chrome. Тесты запускал со следующими параметрами:
А вот какие получил результаты для сайта с использованием JPG/PNG:
Ситуация с WebP:
Как видно, разница для быстрой отрисовки сайта отличается на 0,2 с. Кто-то может сказать, что это мелочь, но на самом деле уменьшение времени загрузки даже на такой показатель очень сложно добиться, если вы уже максимально оптимизировали всё что возможно в вашем проекте.
Нужно учитывать также частный случай сайта и то, что кроме оптимизации изображений я почти ничего не делал в этом направлении.
А на этом я с вами прощаюсь, делитесь своим мнением и опытом использования WebP, возможно, вы знаете более лучший способ оптимизации изображений. Не забывайте ставить лайки и подписываться на канал, это мотивирует меня делать больше качественных статей.