title: W3C Validation of SRCSET
body: <p>W3C Validator is throwing an error on the following code:</p>
  
  <pre><code>&lt;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"&gt;
  </code></pre>
  
  <p>The error is:</p>
  
  <blockquote>
    <p>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 (e.g., the string for image
    /images/en-us/news/20140214-01-mobile.jpg), all image candidate
    strings must specify a width.)</p>
  </blockquote>
  
  <p>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. </p>
  
  <hr>
  
  <p><strong>UPDATE:</strong> </p>
  
  <p>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.</p>
  
  <p>I now have this: </p>
  
  <pre><code>&lt;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"&gt; 
  </code></pre>
  
  <p>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.   </p>
  
  <p>I am guessing I have just one thing out of place... any help would be appreciated.</p>