title: Why won't any of my srcset attributes work? Inconsistent results across browsers too
body: <p>I am trying to use srcset to perform the simple task of swapping a 1000x400px image for a 640x256px image when my page's small screen size is triggered at 640 pixels wide (I am using Foundation 5).  In the attempts where I have specified an alt image, the browser appears to default to that and ignore everything else.  Incidentally, the alt size I have used is 999x399px simply so that I can see if that is being displayed rather than my main 1000x400px image. </p>
  
  <p>As far as I can tell, I am doing precisely what is instructed in the various tutorials and articles on the subject, but I cannot get it to work.  Furthermore, I am getting different behaviours depending on whether I preview the results in Firefox or Chrome.  My version of Firefox is '34.0.5' and my version of Chrome is '39.0.2171.95 m'. </p>
  
  <p>Below are examples of my HTML, with the results described.  I can't see what I'm doing wrong.  Absolutely nothing seems to work.  </p>
  
  <hr>
  
  <p>This one displays the 1000x400px image in Firefox across all browser window sizes, and doesn't show anything except a missing image icon in Chrome:</p>
  
  <pre><code>&lt;div&gt;&lt;img src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w, alt=""&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This one displays the 999x399px alt image in Firefox across all browser sizes, and displays the 640x256px small image across all browser sizes in Chrome.  Additionally, the 640x256 image in Chrome is restricted to that size and doesn't scale up in larger browser windows, unlike in other examples below:</p>
  
  <pre><code>&lt;div&gt;
      &lt;picture&gt;
      &lt;source srcset="http://placehold.it/640x256/444444/ffffff, http://placehold.it/1000x400/444444/ffffff"&gt;
      &lt;source media="(min-width: 641px)" srcset="http://placehold.it/1000x400/444444/ffffff"&gt;
      &lt;img src="http://placehold.it/999x399/444444/ffffff" alt=""&gt;
      &lt;/picture&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This one displays the 999x399px alt image across all browser window sizes in both Firefox and Chrome:</p>
  
  <pre><code>&lt;div&gt;
      &lt;source srcset="http://placehold.it/640x256/444444/ffffff, http://placehold.it/1000x400/444444/ffffff"&gt;
      &lt;source media="(min-width: 641px)" srcset="http://placehold.it/1000x400/444444/ffffff"&gt;
      &lt;img src="http://placehold.it/999x399/444444/ffffff" alt=""&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This following two examples display the 1000x400px image across all browser window sizes in Firefox, but display the 640x256px image across all browser window sizes in Chrome.  Furthermore, this time the 640x256px image is scaled upwards to fit all browser window sizes, unlike in the second example above:</p>
  
  <pre><code>&lt;div&gt;&lt;picture&gt;&lt;img alt="" src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w"&gt;&lt;/picture&gt;&lt;/div&gt;
  
  &lt;div&gt;&lt;img alt="" src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In addition to the above examples I have tried every combination of divs, picture tags, no divs and no picture tags, and nothing works.  I have been on this damned thing all day!  Can anyone see what I'm doing wrong here?  The inconsistent results across browser types is adding to the confusion.  </p>
  
  <p>Thanks very much in advance if you can help.    </p>
  
  <hr>
  
  <p>EDIT:  I have found an example that works in Chrome, but not in Firefox.  The page I am referring to is this one:  <a href="http://www.web3.lu/picture-element-and-srcset-attribute/" rel="nofollow">http://www.web3.lu/picture-element-and-srcset-attribute/</a></p>
  
  <p>The example from that page is this:</p>
  
  <pre><code>&lt;img src="brain.jpg" sizes="75vw" 
   srcset="brain-small.jpg 320w, 
   brain-medium.jpg 640w, 
   brain-large.jpg 1024w,
   brain-xlarge.jpg 2000w" 
   alt="Brain Structure"&gt;
  </code></pre>
  
  <p>Which I adapted to this:</p>
  
  <pre><code>&lt;img src="http://placehold.it/999x399/444444/ffffff"
   sizes="100vw"
   srcset="http://placehold.it/640x256/444444/ffffff 640w, 
   http://placehold.it/1000x400/444444/ffffff 1000w"
   alt=""&gt;
  </code></pre>
  
  <p>I can see that this example is slightly different in that it includes the 'sizes' attribute, and that it includes maximum widths of the images, but I have no idea why nothing else worked, despite apparently being examples of how to employ the srcset attribute.  Also I still have no idea why this won't work in Firefox!  In Firefox it is only displaying the 640x256px small image in its standard (non-upscaling) size.</p>
  
  <hr>
  
  <p>FURTHER EDIT:  I have since worked out that I can adapt the above working example to be acceptable-but-inoperable in Firefox, in addition to being fully-functional in Chrome.  </p>
  
  <p>The problem with my above final code was that in Firefox (where the srcset image swap didn't work), I was stuck with the 640x256px image displaying at its fixed size, so it messed up the display by being too small and one-sided on medium screens upwards.  It was obviously defaulting to the small image option, not the src image or the large image.  </p>
  
  <p>How I fixed this was easy (and probably obvious to more experienced users): I simply changed the order of the srcset image so that the 1000x400px image was first.  Like this:</p>
  
  <pre><code>&lt;img src="http://placehold.it/999x399/444444/ffffff"
  sizes="100vw"
  srcset="http://placehold.it/1000x400/444444/ffffff 1000w,
  http://placehold.it/640x256/444444/ffffff 640w"
  alt=""&gt;
  </code></pre>
  
  <p>And now my 1000x400px image displays throughout.  Although presumably this isn't adhering to 'mobile first' principles, I couldn't find a way to up-scale the 640x256px image to fit the medium and large screens.  Furthermore, up-scaling that small image and therefore affecting its quality on large screens is to me a greater penalty than being forced to deliver the 1000x400px image to small screens.  </p>
  
  <p>I am still looking for a way to make the above final example also work in Firefox, but anyway I hope some of the above is of help to other beginners, if only to provide examples of what doesn't work.  </p>
  
  <hr>
  
  <p>FINAL EDIT WITH A SOLUTION TO THE PROBLEM:</p>
  
  <p>Thanks to Alexander Farkas who posted below, I have now found a solution.  On this link here: </p>
  
  <p><a href="https://github.com/aFarkas/respimage" rel="nofollow">https://github.com/aFarkas/respimage</a></p>
  
  <p>I scrolled to the section called 'srcset with the width w descriptor and the sizes attribute', then I tried the Codepen example. </p>
  
  <p>This worked very well in Firefox.  It performed the image swaps, although I did have to refresh the browser at each window size (except with the smallest image) otherwise it wouldn't show the swapped image's new size each time.</p>
  
  <p>Thank you!   </p>