Google Chrome Version 40 Srcset Attribute Problems

Google Chrome version 40 srcset attribute problems

It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.

In case you want to use different images or same image with different crops, use the picture element.

Responsive images can be technically differentiated between 2 types.

• srcset with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
  
  • density descriptor (x) (for static image sizes, Retina vs. normal resolution)
  • width descriptor (w) and the corresponding sizes attribute (for flexible, responsive / adaptive images (automatically also includes Retina optimization)
• and the picture element with its source[media] children (gives the author control about what srcset should be chosen by the browser depending on specific media queries)

So img[srcset] is for resolution switching and picture is for different images reacting to your design

srcset in Chrome always showing first image in list

Chrome 37 only supports x descriptors, and it thinks all candidates are "1x" so it just picks the first one. Chrome 38 and onward support w. You should update your browser. If you want to support old Chromes, use picturefill, or just put your src candidate also first in srcset and have it act as fallback in old Chromes.

img not responding to srcset specified dimensions

The srcset attribute is interpreted by the browser at first load, then the loaded image is stored in cache and the browser might not load any other image until you clear the cache and reload the page.

If you want that the srcset is reinterpreted on each resize event of the page, you need to update it adding a random variable at the end of each url, then the browser will reload the correct one for that screen size.

I've added a delay to this process to reduce the number of times that it is executed. You'll notice that this practice forces the browser to download the correct image at each resize and this is bad for bandwidth. I do not recommend the use of this technique, let the browser decides which image it uses on each situation. I think that viewport resize is not a common situation in an everyday environment. Maybe is better for your purposes the use of picture element (using some approach to making it compatible with old browsers) as @KrisD said.

var img = document.getElementById("myImage");
var srcset = img.getAttribute("srcset");
var delay;

window.onresize = function() {

    clearTimeout(delay);

    delay = setTimeout(refreshImage, 500);

}

function refreshImage() {

    var reg = /([^\s]+)\s(.+)/g;
    var random = Math.floor(Math.random() * 999999);

    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2"));

}

jsfiddle

---

Related Topics