Why do my Picture SRCSets + Sizes not work with my BS4 breakpoints?

Question

I'm getting slowly mad trying to get this to work.

I have read a couple of articles on the use of picture srcset and I understand the part of using the picture tag for either art direction, or in my case another format (webp).

What I don't understand is why the relationship between srcset and sizes is not working like it should (IMO).

I'm trying to mimic the breakpoints of Bootstrap 4 (min-width 576px, 768px, 992px, 1200px) together with a row of columns - and added a couple of extra breakpoints at lower browser widths.

So what I came up with is this for the sizes tag:

(min-width: 300px) 230px, // if browser is minimum 300px, the slot that the image needs to fill is 230px
(min-width: 325px) 265px, // if browser is minimum 300px, the slot that the image needs to fill is 265px
(min-width: 450px) 375px, // ...
(min-width: 576px) 540px, 
(min-width: 768px) 624px, 
(min-width: 992px) 384px, 
(min-width: 1200px) 189px, 
150px // if browser width is lower than 300px, the slot that the image needs to fill is 150px

To make this easier to check, I created a srcset with exactly the sizes of the slots:

https://via.placeholder.com/230x150/ 230w, 
https://via.placeholder.com/265x150/ 265w, 
https://via.placeholder.com/375x150/ 375w, 
https://via.placeholder.com/384x150/ 384w, 
https://via.placeholder.com/540x250/ 540w,
https://via.placeholder.com/624x250/ 624w,
https://via.placeholder.com/189x100/ 189w,
https://via.placeholder.com/150x100/ 150w,
https://via.placeholder.com/600x350/ 600w

Why is my combination not working?

Up until 300px browser width, the image used is 230px = correct
Up until 450px browser width, the image used is 375px = correct
Up until 576px browser width, the image that should be used is 540px, but 375px is still being used = not correct
next up 375px is used up until 992px, while it should be 384px
When browser width reaches 1200px, it should swap to the 189px, but it stays 375px

So, what I'm missing, or why doesn't this work?

An example has been created below:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-6 col-xl-3 p-md-5 p-sm-0">    
      <picture>
          <source type="image/png"
                  srcset="https://via.placeholder.com/230x150/ 230w, 
                  https://via.placeholder.com/265x150/ 265w, 
                  https://via.placeholder.com/375x150/ 375w, 
                  https://via.placeholder.com/384x150/ 384w, 
                  https://via.placeholder.com/540x150/ 540w,
                  https://via.placeholder.com/624x150/ 624w,
                  https://via.placeholder.com/189x150/ 189w,
                  https://via.placeholder.com/150x150/ 150w,
                  https://via.placeholder.com/600x150/ 600w" 
                  sizes="(min-width: 300px) 230px, 
                  (min-width: 325px) 265px, 
                  (min-width: 450px) 375px, 
                  (min-width: 576px) 540px, 
                  (min-width: 768px) 624px, 
                  (min-width: 992px) 384px, 
                  (min-width: 1200px) 189px, 
                  150px" />
          <img src="https://via.placeholder.com/321x150/" class="img-fluid w-100">
      </picture>
    </div>
    <div class="col-12 col-lg-6 col-xl-3 p-md-5 p-sm-0">    
    </div>
    <div class="col-12 col-lg-6 col-xl-3 p-md-5 p-sm-0">    
    </div>
    <div class="col-12 col-lg-6 col-xl-3 p-md-5 p-sm-0">    
    </div>
    
  </div>
</div>

</body>
</html>

disinfor disinfor · Accepted Answer · 2020-05-19T21:28:45

This is because SRCSET doesn't work like CSS media queries. It will find the first condition it meets, and use that. I would change up your queries to use max-width instead.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-6 col-xl-3 p-md-5 p-sm-0">    
      <picture>
          <source type="image/png"
                  srcset="https://via.placeholder.com/230x150/ 230w, 
                  https://via.placeholder.com/265x150/ 265w, 
                  https://via.placeholder.com/375x150/ 375w, 
                  https://via.placeholder.com/384x150/ 384w, 
                  https://via.placeholder.com/540x150/ 540w,
                  https://via.placeholder.com/624x150/ 624w,
                  https://via.placeholder.com/189x150/ 189w,
                  https://via.placeholder.com/150x150/ 150w,
                  https://via.placeholder.com/600x150/ 600w" 
                  sizes="(max-width: 324px) 230px, 
                  (max-width: 449px) 265px, 
                  (max-width: 575px) 375px, 
                  (max-width: 767px) 540px, 
                  (max-width: 991px) 624px, 
                  (max-width: 1199px) 384px, 
                  (min-width: 1200px) 189px, 
                  150px" />
          <img src="https://via.placeholder.com/321x150/" class="img-fluid w-100">
      </picture>
    </div>
    <div class="col-12 col-lg-6 col-xl-3 p-md-5 p-sm-0">    
    </div>
    <div class="col-12 col-lg-6 col-xl-3 p-md-5 p-sm-0">    
    </div>
    <div class="col-12 col-lg-6 col-xl-3 p-md-5 p-sm-0">    
    </div>
    
  </div>
</div>

</body>
</html>

Why do my Picture SRCSets + Sizes not work with my BS4 breakpoints?

1 Answers