Responsive tag retrieving wrong src

Question

I've been trying to have a certain image tag behave responsively, by retrieving the most appropriate src depending on context.

The tag looks like this:

<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 have even tried this code snippet (found at : http://blog.cloudfour.com/responsive-images-101-part-2-img-required/) to check which src is in effect each 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, the src seems to never change (it seems to always be image.jpg), regardless of the browser and its width.

I suspect that, by repeating the same default src as the last item in the srcsetattribute, it may be affecting the outcome. Or else, maybe the determinant factor is the default size (last item in sizes).

Your help would be much appreciated.

I've found Chrome-Dev-Tools to misreport which image is being displayed when hovering over an element, but right clicking and going to "Open Image in New Tab" works. Alternatively, try marking your responsive images with a watermark during dev, just to ensure its working. — Graham P Heath, Sep 18 '15 at 21:06
does this codepen help? http://codepen.io/jtleathers/pen/IGytf — blurfus, Sep 18 '15 at 21:21
@GrahamPHeath, it seems to be a misreport, yes, because I tested in an actual phone, and the image that came was the smallest one. However, if I tried to what you said in desktop (even in a small viewport), the saved image would be the biggest, regardless. — Leonardo Baptista Lopes, Sep 18 '15 at 21:28
@ochi, that pen seems to deal with pixel density only, but thanks! — Leonardo Baptista Lopes, Sep 18 '15 at 21:29
@GrahamPHeath, also, the watermark suggestion is very useful, thanks — Leonardo Baptista Lopes, Sep 18 '15 at 21:31
have you considered using the picture element? http://jsfiddle.net/RachGal/m3fo5p5n/ — Rachel Gallen, Sep 18 '15 at 22:01
@RachelGallen I followed the suggestions in this set of articles (http://blog.cloudfour.com/responsive-images-101-definitions/) , and since my case doesn't fill the "art direction" case scenario, I stuck with srcset :) — Leonardo Baptista Lopes, Sep 18 '15 at 22:09

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

If you start out with a wide window such that the biggest image is the most appropriate one, then Chrome/Opera will not download a smaller image when making the window smaller. See https://stackoverflow.com/a/28368483/729033

edited May 23 '17 at 12:23

Community

1
1

answered Sep 21 '15 at 07:25

zcorpan

1,243
6
11

I understand that, thank you. However, I tried to check by loading the page on a smaller screen and it didn't work in Chrome or FF. – Leonardo Baptista Lopes Sep 21 '15 at 17:20
I must say, however, that it worked on mobile Chrome and Firefox :) – Leonardo Baptista Lopes Sep 21 '15 at 17:20

score 0 · Accepted Answer · answered Sep 21 '15 at 17:23

0

It seems like the syntax is working correctly (it tested successfully on actual mobile browsers).

I just don't know exactly why the script to check the src didn't work properly.

Thank you all for your help.

answered Sep 21 '15 at 17:23

Leonardo Baptista Lopes

580
5
13

Responsive tag retrieving wrong src

2 Answers2