i am unable to validate my image elements and unable to find the reason. The sizes element works as expected, Chrome loads the correct image.

The W3C-Validator says the following:

Bad value (max-width:768px)100vw, (min-width: 768px)45vw for attribute sizes on element img: Bad CSS number token: Expected a minus sign or a digit but saw ( instead at (max-width:768px)100vw,

This is my current markup.

<figure class="img" data-imageid="1">
    <img alt="alt" height="4329" sizes="(max-width:768px)100vw, (min-width: 768px)45vw" src="/7-mgl2164-1.avif" srcset="/7-mgl2164-1.avif 6494w,/7-mgl2164-1-3840px-2560px.avif 3840w,/7-mgl2164-1-1920px-1280px.avif 1920w,/7-mgl2164-1-960px-640px.avif 960w,/7-mgl2164-1-720px-480px.avif 720w,/7-mgl2164-1-600px-400px.avif 600w,/7-mgl2164-1-480px-320px.avif 480w,/7-mgl2164-1-240px-160px.avif 240w,/7-mgl2164-1-120px-80px.avif 120w" width="6494">
    <figcaption>
        <span>This is an image</span>
        <small>@Copyright</small>
    </figcaption>
</figure>

Ideas?

CodePudding user response：

I think you need to add a space between the media query and the size: change (max-width:768px)100vw to (max-width:768px) 100vw.

From MDN:

sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. In this case, before each comma we write:

1. A media condition ((max-width:600px)) — you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".
2. A space
3. The width of the slot the image will fill when the media condition is true (480px)

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes