W3C验证SRCSET

Question

W3C Validator is throwing an error on the following code:

<img alt="My Unique Alternative Text" class="news-image-left" height="480" src="/images/en-us/news/20140214-01.jpg" srcset="/images/en-us/news/20140214-01.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image">

The error is:

Bad value /images/en-us/news/20140214-01.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w for attribute srcset on element img: No width specified for image /images/en-us/news/20140214-01.jpg. (Because one or more image candidate strings specify a width (eg, the string for image /images/en-us/news/20140214-01-mobile.jpg), all image candidate strings must specify a width.)

So, how do I specify both an image for pixel density (1x) -- down the road I may want to do one for high-density displays (2x) and for displays less than 640 pixels wide? That is, in a way that will make the W3C validator happy.

---

UPDATE:

Well, I tinkered around some more with it and now the validator is no longer complaining but it doesn't appear to be working right so I don't think I have won the battle yet.

I now have this:

<img alt="My Unique Alternative Text" class="news-image-left" height="480" src="/images/en-us/news/20140214-01.jpg" srcset="/images/en-us/news/20140214-01-mobile.jpg 320w" sizes="(min-width:640px) 1420px, 320px" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image"> 

BUT, now on Chrome I am getting just the "-mobile" image, regardless of how wide my screen is. I want it to display the full 1420px wide image on any display that is wider than 640px.

I am guessing I have just one thing out of place... any help would be appreciated.

Answer 1

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.

Answer 2

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.