How to optimize background images in webp?

Question

Sass

Hello everyone, we started to optimize all the pictures in the webp format. (using the Modernize script)
Faced a problem in FF, it loads both images (background), jpg and webp.
Let me explain, The problem is with the background optimization.
I found the following code on the Internet

@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);
        }
      }
    }
  }
}

Can someone explain how to use it? and did it solve my problem. (scss is configured in the project), I didn't work with mexins, and I can't figure out how and what it does

Answer 1

Personally, I use Andrey Sitnik's webp-in-css PostCSS plugin . It is quite lightweight and simple.
Regarding the mixin, this is a tracing ported to Sass to the already existing image-set() CSS property for backgrounds. But since its support is 70 percent, it is not recommended to use it in production, the same is done by the usual setting of backgrounds through . For all this, there is also a postcss plugin image-set (incredible!). Actually, all this exists only in order not to constantly write the code sausage itself from media expressions. @media (min-resolution: xxxdpi)

Answer 2

Unfortunately, the reality is that it is still too early to use WebP on combat commercial projects. It is crazy for a customer that 20-30% of visitors to his site will not be able to see pictures (photos of goods, etc.). Therefore, the easiest and most efficient way is to optimize/compress pictures of the current formats (png, jpeg). I'll share my experience of compressing pictures... At first, I had to manually recompress all the pictures through Photoshop. By the way, the most free option (except for the cost of a license for Photoshop). But this process takes a lot of time if there are more than 5-10 pictures on the site. Each picture has to be manually processed, and then uploaded to the site again. Such a tedious process ... Now I use such a service - https://optipic.io/Saves a lot of time) Works by itself - automatically - only 1 time it needs to be connected to the site. Google is happy