Наш телефон:

+7 (977) 797-50-30

Наш WhatsApp:

+7 (977) 797-50-30

Опубликовано: 03.02.2021
Веб-технолгии

Использование WebP формата на сайте

Использование WebP формата на сайте
Использование WebP формата на сайте

Для начала расскажем преимущества использования изображений в WebP.

1. Высокое сжатие изображений с сохранением качества

2. Более быстрая загрузка страниц при использовании WebP

3. Поддержка alpha канала

В итоге WebP сохраняет и объединяет преимущества .jpg и .png формата и является более легкой их версией.


В 2021 году доля мобильного трафика, с сохранением темпа роста, может составить 88-92%. Цифра на первый взгляд кажется нереальной, но она вполне достижимая, с учетом развития мобильного рынка. Соответственно чем быстрее будет происходить загрузка страницы для взаимодействия, тем меньше будет показатель отказов и на более высокие позиции можно рассчитывать в поисковой выдаче.

Проблемы использования WebP в 2021

К сожалению не все браузеры поддерживают использования изображений в формате WebP, к примеру, Mac Os, iOs и ipadOs Safari все еще не поддерживает данный формат, поэтому при верстке необходимы некоторые trick’s. О них вы узнаете в нашей статье.

Использование WebP в CSS

Первый и один из самых легких способов использовать новый формат в CSS – это использовать js библеотеку modernizr.js


Как это использовать:


Переходим по ссылке


Выбираем пункт Webp и нажимаем кнопку “Build”, затем переносим скачанный файл в папку с js файлами, подключаем скрипт на странице.

При загрузке страницы в разных браузерах вы увидите классы no-webp и webp, что соответствует поддержке этого формата браузера.



В CSS необходимо написать следующее правило


/* backgrounds */
.webp{
  #section-1{
    background: url('../images/main/banner.webp') no-repeat center/cover;
  }
}
.no-webp{
  #section-1{
    background: url('../images/main/banner.jpg') no-repeat center/cover;
  }
}


Второй и менее очевидный, использовать правило @supports


background: url('../images/main/banner.jpg) no-repeat center/cover;
@supports (background: url('../images/main/banner.webp')) {
    background: url('../images/main/banner.webp') no-repeat center/cover;
}


Третий способ, использование библиотек определения браузера посетителя


Для php можно использовать browser_detect.php


[data-browser="Safari"], [data-browser="iPhone"], [data-browser="iPad"] {
 // Ваши стили
}


Js - user.browser.family

К примеру


if (user.browser.family === 'Safari') {
  body.classList.add("no-webp"); 
}

Использование WebP в верстке html

Тут все гораздо проще и поддержка есть у всех браузеров, кроме IE до 11 версии включительно.


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

Тег <picture> дает возможность определить несколько типов изображений для отображения, если поддержка webp имеется, будет загружена версия webp.


Так же данный тег дает возможность для разных размеров экрана отображать разные изображения.


<picture>
  <source media="(max-width: 768)" srcset="img-for-mobile.jpg">
  <source media="(min-width: 769px)" srcset="img-for-desktop.jpg">
  <img src="img-for-desktop.jpg " alt="Alt изображения">
</picture>

Насколько быстрее может стать загрузка страницы с использованием формата WebP?

Приведем пример загрузки в браузере Google Chrome и Mac Os Safari

*Все браузеры последних версий на начало февраля 2021 года


Google Chrome


Скорость загрузки в данном примере составляет 852ms



Mac Os Safari


Здесь скорость загрузки превышает одну секунду.
Автор:
Денис Суббота
Технический директор, работает в web сфере более 6 лет. Full-stack Developer с 15 года. Реклама и SEO с 16 года.
Получить бесплатную консультацию
Получите бесплатный аудит вашего сайта,
что позволит выявить его слабые и сильные стороны
Пришлите нам свои данные, ссылку на сайт и краткое описание вашего бизнеса,
и мы сделаем для вас полный аудит. Вы получите аудид на свою почту.
Это совершенно бесплатно!
, , заявка на аудит сайта успешно отправлена.
В ближайшее время мы отправим результат на почту !
Спасибо, что обратились в нашу веб студию!
Получите бесплатную
консультацию!
Напишите нам, если вы считаете, что пора действовать, и мы сделаем ваш бизнес лучше
, , Ваша заявка успешно отправлена,
наши менеджеры свяжуться с Вами в ближайшее время!