@navodchik131

Как оптимизировать фоновые картинки в webp?

Все привет, начали оптимизоровать все картинки в формат webp. (используем скрипт Modernize)
Столкнулись с проблемой в FF, он грузит обе картинки (background), jpg и webp.

Поясню, Проблема именно с оптимизацией background.

На просторах интернета нашел следующий код
@mixin bg-url($url, $url2x: false, $webp1x: false, $webp2x: false) {
  background-image: url($url);
  @if $webp1x {
    .webp & {
      background-image: url($webp1x);
    }
  }
  @if $url2x {
    @media
    screen and (-webkit-min-device-pixel-ratio: 2),
    screen and (min-resolution: 192dpi),
    screen and (min-resolution: 2dppx) {
      background-image: url($url2x);
      @if $webp2x {
        .webp & {
          background-image: url($webp2x);
        }
      }
    }
  }
}


Сможет кто то объяснить, как им пользоваться? и решил ли он мою проблему. (scss в проекте настроен), Не работал с мексинами, и не могу понять, как и что он делает
  • Вопрос задан
  • 547 просмотров
Решения вопроса 1
RedEagle69
@RedEagle69
Html-верстальщик, Front-end разработчик
Лично я использую PostCSS плагин Андрея Ситника webp-in-css. Он достаточно легковесный и простой.

По поводу миксина - это калька перенесенная в Sass на уже существующее CSS свойство image-set() для фонов. Но так как поддержка у него процентов 70, то использовать в продакшене его не рекомендуется, то же самое делает и обычное задание фонов через @media (min-resolution: xxxdpi). Для всего этого тоже существует postcss плагин image-set(невероятно!). Собственно существует всё это лишь для того чтобы постоянно не писать самому колбасу кода из медиа выражений.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@alexbeglov1989
К сожалению пока реальность такова, что WebP на боевых коммерческих проектах применять еще рановато. Для заказчика дико, что 20-30% посетителей его сайта не смогут увидеть картинки (фото товаров и т.п.). Поэтому самый простой и эффективный путь - оптимизировать/сжимать картинки текущих форматов (png, jpeg). Поделюсь своим опытом сжатия картинок... Сначала приходилось вручную перижимать все картинки через Фотошоп. Самый бесплатный кстати вариант (если не считать стоимость лицензии на Photoshop). Но очень много времени этот процесс занимает, если картинок на сайте больше 5-10. Каждую картинку приходится вручную обрабатывать, а потом еще на сайт заливать снова. Утомительный такой процесс... Теперь использую такой сервис - https://optipic.io/ Экономит много времени) Работает сам по себе - автоматически - только 1 раз его надо к сайту подключить. Гугл доволен)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы