Checking W3C SRCSET
W3C Validator throws an error with 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">
Mistake:
Bad value / images / en -us / news / 20140214-01.jpg 1x, / images / en -us / news / 20140214-01-mobile.jpg 640w for srcset on element img attribute: no width for image / images / en -us / news / 20140214-01.jpg. (Since one or more images of the line-candidate indicate the width (for example, the line for the image / images / en -us / news / 20140214-01-mobile.jpg), all candidates for the image of the line must indicate the width.)
So how do I specify both an image for pixel density (1x) - down the road I can do for a high density screen (2x), and for displays less than 640 pixels in size? That is, in such a way that the W3C validator is happy.
UPDATE:
Well I fiddled with it a little more and now the validator no longer complains, but it doesn't seem to be working correctly, so I don't think I won the battle yet.
Now I 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 in Chrome I only get a "-mobile" image, no matter how wide my screen is. I want it to display a full image that is 1420 pixels wide on any display that is more than 640 pixels wide.
I guess I only have one inappropriate ... any help would be appreciated.
source to share
This is only responsible for your update: The reason for this is that the browser picks one candidate from yours srcset
and the attribute is src
used as a fallback. This means that to get a larger candidate, you need to add him 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 know your image layout, but I doubt if sizes
it is correct here. If this image shows full width up to 1420 pixels, your sizing attribute should look like this.
sizes="(min-width: 1420px) 1420px, 100vw"
or
sizes="(max-width: 1420px) 100vw, 1420px"
Also, you should use more images. Note that if you use a width descriptor, the browser will automatically handle the density for you (for retina devices). Use at least 640W, 980W / 1024W, 1420W, 2048W.
source to share
Please refer to http://www.webkit.org/demos/srcset/ or https://ericportis.com/posts/2014/srcset-sizes/ , Based on the w3c validator if you provide a width descriptor for one of the candidate strings images, you must use a width descriptor for all of them.
An alternative would be to use CSS queries.
source to share