I am preloading responsive images and it seems to work just fine, validating the correct image is loaded at different widths in Chrome-Dev-Network. Yet when running HTML validation from https://validator.w3.org/, I get
Error: Bad value for attribute imagesrcset on element link: Expected single descriptor but found extraneous descriptor /sites/default/files/resp_img/ayahuasca-painting-wide.webp at …ting-wide.webp
The code in my page header is
<link rel="preload" as="image" fetchpriority="high"
imagesrcset= "/sites/default/files/resp_img/ayahuasca-painting-mobile.webp 500w,
/sites/default/files/resp_img/ayahuasca-painting-mobile-landscape.webp 770w,
/sites/default/files/resp_img/ayahuasca-painting-tablet.webp 995w,
/sites/default/files/resp_img/ayahuasca-painting-desktop.webp 1194w
/sites/default/files/resp_img/ayahuasca-painting-wide.webp 1389w"
imagesizes="100vw" >
The images are used as background image with css based on break points.
@media screen and (min-width: 576px) {
.splash{
background-image: url("/sites/default/files/resp_img/ayahuasca-painting-mobile-landscape.webp");
}
}
I have spent a fair amount of time looking for a way to remove this validation error. What do I need to change to resolve the validation error and still have it load the correct image based on screen width?