Sizes attribute for Bootstrap responsive breakpoints

Question

I'm working on optimization on my page and it was all going smoothly since I came up with an idea to implement srcset and sizes attributes to my <img>. I create php function that constructs img object and fills srcset attribute with new scaled images (extra-1200w,large-992w,medium-786w,small-576w,extra_small-320w) and universal (as much as it can be done) sizes attribute (example below). The problem starts occurs when I start using miscellaneous bootstrap grid system for different vw(view width), for example col-lg-4 col-md-6. I tried many different versions of sizes but it didn't seem to work except one:

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"

this works, but for one grid - in this example .333 which is col-4. (12em is sidenav width).

But for more than one grid I tried this:

sizes="(max-width: 575.98px) 100vw,
        ((min-width: 576px) and (max-width: 767.98px)) 100vw,
        ((min-width: 768px) and (max-width: 991.98px)) calc(.5 * 100vw),
        ((min-width: 992px) and (max-width: 1199.98px)) calc(.333 * 100vw),
        ((min-width: 1200px) and (max-width: 1440.98px)) calc(.333 * 100vw),
        (min-width: 1441px) calc(.333 * (100vw - 12em)),
        100vw"

and for some reason, it always displays image with "extra" size.

An example below. it's the middle one. Every image is signed by its own size.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class="fixed-sn mdb-skin-custom customize-support" data-spy="scroll" data-target="#scrollspy" data-offset="15" data-gr-c-s-loaded="true">
  <main>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
            <!-- Section: Page content -->
            <section>
                <!--Section: Basic resources-->
                <section class="text-center">
                    <!--Grid row-->
<div class="row">

                        <!--Grid column-->
                        <div class="col-lg-4 col-md-12 mb-4">

                            <!--Card-->
                            <div class="card">
            
                            <!--Card image-->
                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/bf-tutorial.jpg" class="img-fluid" alt="">
                                <a id="home-resources-automation-img" href="#">
                                    <div class="mask waves-effect waves-light"></div>
                                </a>
                            </div>
            
                            <!--Card content-->
                            <div class="card-body">
                                <!--Title-->
                                <h4 class="card-title">Lorem ipsum</h4>
                                <!--Text-->
                                <p>
                                    <strong>Lorem ipsum</strong> dolor sit amet.
                                </p>
                                <a id="home-resources-automation-button" href="#" target="_blank" class="btn btn-dtc btn-md waves-effect waves-light">Learn more</a>
                            </div>
                            <!--/.Card content-->
            
                        </div>
                            <!--/.Card-->

                        </div>
                        <!--Grid column-->

                        <!--Grid column-->
                        <div class="col-lg-4 col-md-6 mb-4">

                            <!--Card-->
                            <div class="card">

                                <!--Card image-->
                                <div class="view overlay hm-white-slight">
                                    <!-- <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap.jpg" class="img-fluid" alt="MDB Bootstrap tutorial"> -->
                                    <img src="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap.jpg" srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-extra.jpg 1200w, https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-large.jpg 992w, https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-medium.jpg 768w, https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-small.jpg 576w, https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-extra-small.jpg 320w" sizes="(max-width: 575.98px) 100vw,
                               ((min-width: 576px) and (max-width: 767.98px)) 100vw,
                               ((min-width: 768px) and (max-width: 991.98px)) calc(.5 * 100vw),
                               ((min-width: 992px) and (max-width: 1199.98px)) calc(.333 * 100vw),
                               ((min-width: 1200px) and (max-width: 1440.98px)) calc(.333 * 100vw),
                               ((min-width: 1441px) and (min-width: 36em)) calc(.333 * (100vw - 12em)),
                               100vw" alt="MDB Bootstrap tutorial" class="img-fluid">                                    <a id="home-resources-tutorial-img" href="#">
                                        <div class="mask waves-effect waves-light"></div>
                                    </a>
                                </div>
                                <!--/.Card image-->

                                <!--Card content-->
                                <div class="card-body">
                                    <!--Title-->
                                    <h4 class="card-title">Lorem ipsum</h4>
                                    <!--Text-->
                                    <p class="card-text">Lorem ipsum dolor sit amet.
                                    </p>
                                    <a id="home-resources-tutorial-button" href="#" target="_blank" class="btn btn-dtc btn-md waves-effect waves-light">Start</a>
                                </div>
                                <!--/.Card content-->

                            </div>
                            <!--/.Card-->

                        </div>
                        <!--Grid column-->

                        <!--Grid column-->
                        <div class="col-lg-4 col-md-6 mb-4">


                        <!--Card-->
                        <div class="card">
            
                            <!--Card image-->
                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/bf-tutorial.jpg" class="img-fluid" alt="">
                                <a id="home-resources-automation-img" href="#">
                                    <div class="mask waves-effect waves-light"></div>
                                </a>
                            </div>
            
                            <!--Card content-->
                            <div class="card-body">
                                <!--Title-->
                                <h4 class="card-title">Lorem ipsum</h4>
                                <!--Text-->
                                <p>
                                    <strong>Lorem ipsum</strong> dolor sit amet.
                                </p>
                                <a id="home-resources-automation-button" href="#" target="_blank" class="btn btn-dtc btn-md waves-effect waves-light">Learn more</a>
                            </div>
                            <!--/.Card content-->
            
                        </div>
                        <!--/.Card-->

                        </div>
                        <!--Grid column-->

                    </div>
                    <!--Grid row-->
                </section>
            </section>
            <!-- Section: Page content -->
        </div>
      </div>
    </div>
  </main>
  <!--Main layout-->
</body>

my goal is to increase size proportionally to image width.

Any idea why this won't work? Thanks in advance.

example that works for one breakpoint

EDIT.

pay attention to the fact that the smaller side does not mean that the photo should be smaller

Carol Skelly · Accepted Answer · 2018-03-19T13:18:24.510

3

As explained in this answer using (and here) img "sizes" leaves it up to the browser to decide which image to use. It's simply a way to "suggest" images, but the browser may or may not because of caching and other factors.

To consistently load images based on Bootstrap 4 breakpoints you'll want to use a <picture>...

<picture>
    <source srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-extra.jpg" media="(min-width: 1200px)" />
    <source srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-large.jpg" media="(min-width: 992px)" />
    <source srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-medium.jpg " media="(min-width: 768px)" />
    <source srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-small.jpg" media="(min-width: 576px)" />
    <img src="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-extra-small.jpg" class="img-fluid" />
</picture>

Demo: https://www.codeply.com/go/WbIpdEEFO6

edited Mar 19 '18 at 13:18

answered Mar 19 '18 at 12:58

Carol Skelly

351,302
90
710
624

1

picture tag is not using for optimization, but for `art direction` for example https://udacity.github.io/responsive-images/examples/3-08/pictureArtDirection/. and still, it takes page width, not `img` width which caused that image on 768px is smaller than at 767px, but the loaded image is bigger, which is not a big issue because with your answer and couple minutes of thinking I can get the result visually similar to what I want but not optimized unfortunately. Upvote for you anyway :) i will accept your answer is you make my sizes work :) – Witold Tkaczyk Mar 19 '18 at 13:34
1

You mention browser caching and I must be missed that part of your answer. Browser always gives me biggest image from cached memory, that's why I always get the extra size and my query was good all this time. Thanks!! – Witold Tkaczyk Mar 19 '18 at 14:29

Sizes attribute for Bootstrap responsive breakpoints

1 Answers1