Все привет, начали оптимизоровать все картинки в формат 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 в проекте настроен), Не работал с мексинами, и не могу понять, как и что он делает
Простой
