The following lines of code are the background images on a small website with a full screen header image. I wanted to apply the styles directly in the html with the intention, that loading of the images is not blocked by css-parsing.
I tried two different approaches:
<div class="..." style="background-image: url('assets/img/textatelier/textatelier_elisabeth_zenz_header_3733.jpg'); background-image: -webkit-image-set('assets/img/textatelier/textatelier_elisabeth_zenz_header_1867.jpg' 1x, 'assets/img/textatelier/textatelier_elisabeth_zenz_header_3733.jpg' 2x);background-image: image-set('assets/img/textatelier/textatelier_elisabeth_zenz_header_1867.jpg' 1x, 'assets/img/textatelier/textatelier_elisabeth_zenz_header_3733.jpg' 2x);" data-zanim-xs='{"delay":0,"animation":"zoom-out"}' data-zanim-trigger="scroll">
The second approach the same, except also encapsulating the image paths with url().
Both do not validate on validator.w3.org (remark: this is the link to the validation of the website, which is live for you to see). I would deeply appreciate any hints!
See the MDN documentation for image-set.
The only specification that describes it is CSS Images Module Level 4 which is currently a working draft.
It isn't standard yet, so it is invalid, so the validator reports it as invalid.