Menu
I've been trying to implement the new srcset approach to responsive images, using the following HTML
<img class="swapImages" srcset="assets/images/content/large.jpg 1200w, assets/images/content/medium.jpg 800w, assets/images/content/small.jpg 400w" sizes="100vw" src="assets/images/content/small.jpg" alt="responsive image"> Im using chrome 40 and all I get is the largest image, resizing my browser, clearing the cache does nothing.
I read somewhere I had to polyfill, so I used the picturefill plugin, although chrome should support it.....still doesn't work.
I put together a demo page for it: http://www.darrencousins.com/lab/resp-img-srcset/
What am I doing wrong/not getting?
Any help is massively appreciated.
841
If you find yourself confused about why srcset is not working as expected. And why the browser is using the wrong image, it's probably because of “devicePixelRatio”. Once you factor that into your estimations, things will start to look right.
The srcset attribute on an <img> tag specifies multiple image resources (URLs) for the img element. Together with the sizes attribute they create responsive images that adjust according to browser conditions.
The srcset attribute allows you to specify a list of image file URLs, along with size descriptions. Yo ualso need to still use the src attribute to identify a “default” image source, to be used in browsers that don't support srcset .
The HTMLImageElement property srcset is a string which identifies one or more image candidate strings, separated using commas ( , ) each specifying image resources to use under given circumstances.
You have it correct.
The thing is, that once your browser has the higher resolution picture (loaded, in cache), there is no point for it to download lower quality one, even when you make your window smaller (the point of this is to save traffic).
So if you want to test this, just make your window smaller and THEN load the page (after clearing the cache / or use incognito mode). You will get the mobile or tablet version. Then by making the window bigger, you'll at some point see your browser switching to higher resolution picture.
Update 2022; Simply use Ctrl + Shift + R shortcut (for Mac: Cmd + Shift + R) after resize, instead of clearing cache, so that the browser will reload, and ignore cache for current tab till done (In other words, full-reload without losing entire cache).
67
When used in an img tag, the srcset attribute leaves the decisions up to the browser in terms of which image to load as mentioned by TondaCZE. If you want to force browsers to load images at specified viewports, you want to use the picture element.
<picture> <source srcset="large.jpg" media="(min-width: 1200px)" /> <source srcset="medium.jpg" media="(min-width: 800px)" /> <img src="small.jpg" /> </picture> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
