webp in css https://jsfiddle.net/Vosem/xk3vn54p/

css.scss

div {
  margin: 1em auto;
  width: 50vw;
  height: 50vh;
  background-color: gray;
  background-image: url("img.webp");
  background-position: 50% 50%;
  background-size: cover;

  @supports (background-image: -webkit-image-set(url("img.webp") 1x)) {
    background-image: -webkit-image-set(
      url("img.webp") 1x,
      url("[email protected]") 2x);
  }

  .ie & {
    background-image: url("img.jpg");
  }
}

div {
  // для сафари, потому что она не понимает webp, работает беcпрефиксное правило
  // отдельно, потому что внутри блока не работает дисейбл автопрефиксера
  /* autoprefixer: ignore next */
  @supports (background-image: image-set(url("img.jpg") 1x)) {
    background-image: image-set(
      url("img.jpg") 1x,
      url("[email protected]") 2x);
  }
}