Responsive <img> tag receiving invalid src

Question

I try to respond to a specific image tag, getting the most appropriate srcdepending on the context.

The tag is as follows:

<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"
>

I even tried this piece of code (found at http://blog.cloudfour.com/responsive-images-101-part-2-img-required/ ) to check which one srcworks every time.

(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);

However src, it never seems to change (it will always be image.jpg), regardless of the browser and its width.

, , src srcset, . , , ( sizes).

.

Answer 1

, ( ).

, script src .

.

Answer 2

, , Chrome/Opera . . fooobar.com/questions/251204/...