W3C Validation of SRCSET

Question

W3C Validator is throwing an error on the following code:

Answer 1

Please refer http://www.webkit.org/demos/srcset/ or https://ericportis.com/posts/2014/srcset-sizes/. Based on the w3c validator, if you specify width descriptor for one of the image candidate string, then you should use width descriptor for all of them.

Alternate option could be to use CSS media queries.

Answer 2

This answers only for your update: The reason for this is, that the browser chooses one candidate from your srcset, the src attribute is used as a fallback. This means to get the larger candidate you need to also add it to your srcset:

<img srcset="/images/en-us/news/20140214-01-mobile.jpg 320w, /images/en-us/news/20140214-01.jpg 1420w" sizes="(min-width:640px) 1420px, 320px" />

I don't really know your image layout, but I doubt, that sizes is correct here. If this image is displayed fullwidth until 1420px your sizes attribute should look like this.

sizes="(min-width: 1420px) 1420px, 100vw"

or

sizes="(max-width: 1420px) 100vw, 1420px"

Additionally you should use more images. Note if you use the width descriptor the browser automatically handles the density for you (for retina devices). Use at least 640w, 980w/1024w, 1420w, 2048w.