title: Responsive <img> tag retrieving wrong src
body: <p>I've been trying to have a certain image tag behave responsively, by retrieving the most appropriate <code>src</code> depending on context.</p>
  
  <p>The tag looks like this:</p>
  
  <pre><code>&lt;img
      id="picimg"
  
      src="image.jpg"
  
      srcset="image-300x281.jpg 300w,
              image-1024x961.jpg 1024w,
              image.jpg 1664w"
  
      sizes="(max-width: 499px) 92vw,
              (min-width: 500px) 86vw,
              (min-width: 960px) 96vw, 96vw"
  &gt;
  </code></pre>
  
  <p>I have even tried this code snippet (found at : <a href="http://blog.cloudfour.com/responsive-images-101-part-2-img-required/" rel="nofollow">http://blog.cloudfour.com/responsive-images-101-part-2-img-required/</a>) to check which <code>src</code> is in effect each time.</p>
  
  <pre><code>(function() {
    var currentSrc, oldSrc, imgEl;
    var showPicSrc = function() {
      oldSrc     = currentSrc;
      imgEl      = document.getElementById('picimg');
      currentSrc = imgEl.currentSrc || imgEl.src;
  
      if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
        document.getElementById('logger').innerHTML = currentSrc;
      }
    };
  
    // You may wish to debounce resize if you have performance concerns
    window.addEventListener('resize', showPicSrc);
    window.addEventListener('load', showPicSrc);
  })(window);
  </code></pre>
  
  <p>However, the <code>src</code> seems to never change (it seems to always be <code>image.jpg</code>), regardless of the browser and its width.</p>
  
  <p>I suspect that, by repeating the same default <code>src</code> as the last item in the <code>srcset</code>attribute, it may be affecting the outcome. Or else, maybe the determinant factor is the default size (last item in <code>sizes</code>).</p>
  
  <p>Your help would be much appreciated.</p>