CODEWITHSUNDEEP
imageresponsive-designsrcset
sygad1
sygad1

Reputation: 1482

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.

Upvotes: 115

Views: 118783

Answers (10)

satywan kumar
satywan kumar

Reputation: 215

Open your development tool, then go to network tab and disable catch. That's all, nothing else.

Upvotes: -7

Nata
Nata

Reputation: 1194

In my case, the problem was a space in the webp image name. I renamed the file to remove the space character, and it worked!

<picture>
    <source srcset="img/landing-small.webp" type="image/webp">
    <source srcset="img/landing - small.jpg" type="image/jpeg">
    <img src="img/landing - small.jpg" alt=""/>
</picture>

Upvotes: 4

TondaCZE
TondaCZE

Reputation: 2700

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).

Upvotes: 139

la_petite_kozel
la_petite_kozel

Reputation: 890

Have you tried to change DPR to 1.0? You can find it in the top bar of Chrome DevTools in responsive mode (try 380px width). After changing DPR, right-click on the reload page icon, then select "Empty cache and hard reload" best to do that in incognito mode. The browser should preload a 400w image.

Upvotes: 4

icaksama
icaksama

Reputation: 782

It's work based on device pixel ratio (DPR). For example, say we have a device that has a viewport width of 412 px and a DPR of 2.6. So the browser chooses an image close to 803 px (412 _ .75 _ 2.6).

If You want to choose the image based on the viewport only, try using media attribute like this:

<amp-img
  alt="grey cat"
  media="(max-width: 469px)"
  width="226"
  height="340"
  src="/static/inline-examples/images/cat-small.jpg">
</amp-img>
<amp-img
  alt="grey cat"
  media="(min-width: 470px) and (max-width: 669px)"
  width="450"
  height="340"
  src="/static/inline-examples/images/cat-medium.jpg">
</amp-img>
<amp-img
  alt="grey cat"
  media="(min-width: 670px)"
  width="650"
  height="340"
  src="/static/inline-examples/images/cat-large.jpg">
</amp-img>

Upvotes: 2

Abhilasha Arvind Gadekar
Abhilasha Arvind Gadekar

Reputation: 161

We faced the same issue while working with srcsets for the first time in our project. After investing some time, one of our team members was finally able to crack the issue. The reason why your code doesn't work is because of the mismatch of the sizes in srcset and sizes attribute. You have to provide double the width in the srcset for the browser to be able to match it with the width in sizes. For example,

 <img
        srcSet="image1920w.png 1920w,image720w.png 720w"
        sizes="(min-width: 960px) 960px,
        360px"
        src="www.image1920w.com"
         alt="Sample"
     />

Here's a sample working code for you to try out.

Make sure you open it in incognito (since once the browser loads higher resolution image, it will not go back lower resolution image) and run the code first in browser size less than 1920px to see the smaller resolution image(sunset) and once you start increasing the browser size, you will be able to see the larger image (flower).

Upvotes: 16

BadHorsie
BadHorsie

Reputation: 14564

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.

  1. Open DevTools (F12)
  2. Go to Settings
  3. Scroll down to Network
  4. Check Disable cache (while DevTools is open)

Upvotes: 5

mike.pj
mike.pj

Reputation: 1106

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>

Upvotes: 86

Kaashan
Kaashan

Reputation: 382

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

Upvotes: 6

MeV
MeV

Reputation: 3968

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.

enter image description here

enter image description here

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

Upvotes: 32

Related Questions