Responsive Images srcset - Always picking the largest Image

user_779681 0
Viewed 3710

I am trying to get responsive images working and I have this layout so far...

.container {
  display:flex;
  max-width:1000px
}

.col1 {
  flex:1;
  background:teal;
  text-align:center;
}

.col2 {
  flex:1;
  background:wheat;
  text-align:center;
}

.img-responsive {
max-width:100%;
height:auto;
}
<div class="container">

  <div class="col1">
    This is column 1
    <img
 class="img-responsive" 
 src="https://dummyimage.com/1000x1000/000/fff"

 srcset="https://dummyimage.com/1000x1000/000/fff 1000w,
   https://dummyimage.com/750x750/000/fff 750w,
   https://dummyimage.com/400x400/000/fff 400w"

 sizes="(max-width: 1000px) 1000px,
     (max-width: 7500px) 750px,
     (max-width: 400px) 400px,
        1024px"
">
  </div>
  
  <div class="col2">
    This is column 2
  </div>

</div>

I am expecting the 1000px image to be displayed when the screen is 1000px and above, the 750px version at 750px and above and so on...

But it only ever gives me the large version, where am I going wrong?

srcset css html
2 Answers

There are a number of reasons this might happen:

  1. Your browser has probably cached the larger version of the image already, so it's more efficient to use it than to hit the network for a new copy.
  2. The device pixel ratio is > 1.0, causing the browser to request a higher than expected resolution version
  3. The presented width of the image is greater than the next smallest image in the srcset.

On closer examination, there are a few odd things going on with your example.

  1. You're using sizes as though it's a media query for the element; those min/max width media queries work the same as they do elsewhere, though, which is to say that they apply to the size of the viewport, not the element. The default is 100vw, which is the width of the viewport. You might need something instead like 50vw.
  2. sizes is evaluated in order; the first match will be used. In your case, that's (max-width: 1000px), which will be true for viewports <= 1000px. This means you're asking the browser to load the largest of your proposed images.
  3. The use of max-width instead of min-width is a little unusual, especially in conjunction with 1:1 ratio between the max-width and the requested image size. You would more commonly see something like (min-width: 768px) 600px, 100vw, which tells the browser to load an image for a presented size of 600px if the viewport is wider than 768px (our example mobile stacking breakpoint), and otherwise to load one for display at the full width of the viewport (that's the 100vw fallback).
  4. Finally, you have an extra double-quote (") right before the closing bracket of your img tag, though I don't know if it is affecting your example or not.
user_2031300

Try using a picture tag in place of your img tag. Place the sources form largest size to smallest size, with the a default img tag at the end.

Like this:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
user_54731030
Related