responsive images srcset not working

问题

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.

回答1:

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.

回答2:

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>

回答3:

I have just noticed that your demo page (http://www.darrencousins.com/lab/resp-img-srcset/) was never displaying the mobile version (even when resizing the browser or using the DevTools - Device mode) on Google Chrome (version 48).

Changing the device pixel ratio to 1 seems to load the correct image.

I don't know why, I am wondering if the w descriptors take the device pixels ratio into consideration

回答4:

I guess you are testing on chrome browser, and the only reason its not working there is because its a chrome feature. See below stack overflow thread (it holds good for latest version of chrome v54 as well):

Google Chrome version 40 srcset attribute problems

Checked your page on IE8 and Firefoxv49 and things work like a charm!

The other thing I observed is that though chrome doesn't download other images, it resizes the one downloaded pretty well. So, in a way we are still in a much better condition had it only been this on page:

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">

回答5:

For anyone using Chrome DevTools sidebar, you can tell Chrome to disable the cache when DevTools is open. Changing your viewport and refreshing will then serve the correct responsive image if it's giving you the largest (cached) image all the time.

Open DevTools (F12)
Go to Settings
Scroll down to Network
Check Disable cache (while DevTools is open)

回答6:

open your development tool then go to network tab and disable catch. that's all nothing else.

来源：https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working

标签

image

responsive-design

srcset