gistfile1.css

.whatever {
  /* Falling back from webp to png */
  background-image: image("whatever.webp" format('webp'), "whatever.jpg");

  /* Falling back from webp to png with image-set dpi negotiation */
  background-image: image(
    image-set("whatever.webp" 1x, "whatever-2x.webp" 2x) format('webp'),
    image-set("whatever.png" 1x, "whatever-2x.png" 2x)
  );
}

/* Here's an alternative I don't like as much, using the fragment for format info */
.whatever {
  background-image: image("whatever.webp#format=webp", "whatever.jpg");

  /* The format repetition in the image-set doesn't fit so well */
  background-image: image(
    image-set("whatever.webp#format=webp" 1x, "whatever-2x.webp#format=web" 2x),
    image-set("whatever.png" 1x, "whatever-2x.png" 2x)
  );
}