Responsive Image With Srcset Using Bootstrap Breakpoints

Basic

<img src="//placehold.it/1200x500 1200w"  srcset="//placehold.it/1200x500 1200w, //placehold.it/800x500 800w"   sizes="(min-width: 1200px) 1200px, 800px" />

Firstly, you need to declare sizes, as in what is the breakpoint/condition and what image size to use

• sizes="(min-width: 1200px) 1200px": when screen width is >= 1200px, load image with size/width of 1200px
• sizes="(min-width: 1200px) 900px": when screen width is >= 1200px, load image with size/width of 900px
• sizes="(min-width: 1200px) 1200px, 800px": when screen width is >= 1200px, load image with size/width of 1200px; else, load image with size/width of 800px

Then, you need to declare srcset, as in what images are available and what are their size/width.

• srcset="//placehold.it/1200x500 1200w, //placehold.it/800x500 800w": //placehold.it/1200x500 is of size/width 1200, and //placehold.it/800x500 800w is of size/width 800

Though I map sizes exactly to srcset in size/width, but it is not necessary as the browser will determine the best possible match.

In the example below

• I have 4 breakpoints/sizes, and the image size/width increased (300px) if the breakpoint is xs or sm
• For srcset, I have 3 options only, as I deemed size different between 160px and 130px is too little and could share the same image size
• For src, I always put in the biggest image required

<img src="//placehold.it/300x300"  srcset="//placehold.it/160x160 160w, //placehold.it/90x90 130w, //placehold.it/300x300 300w"   sizes="(min-width: 1200px) 160px, (min-width: 992px) 130px, (min-width: 768px) 90px, 300px"  />

src is fallback if srcset is not supported.

NOTE: For support of same size, different resolutions and art direction (wanting to change the image displayed to suit different image display sizes), refer to MDN - Responsive Images.

Bootstrap Example

Full Width

First, goto Bootstrap - Grid Options to extract available breakpoint sizes (max-width) and container width.

The following image will fit the full width of container.

<div class="container">  <img src="//placehold.it/960x500" class="img-fluid"    srcset="//placehold.it/1140x500 1140w, //placehold.it/960x500 960w, //placehold.it/540x500 540w"     sizes="(min-width: 1200px) 1140px, (min-width: 992px) 960px, (min-width: 768px) 720px, 540px" /><div class="container">

NOTE: If you use container-fluid, you might want to prepare sizes and srcset beyond 1200.

• I extracted 4 breakpoints. Thouse Bootstrap 4 has 5 breakspoints (xl, lg, md, sm, xs), but sm and xs could use the same image size as their maximum size is near 576px.
• Notice the breakspoint (min-width: 1200px) is different from the size 1140px. This is due to container padding and margin in Bootstrap. Having said that, you can use 1200px instead of 1140px as well.

Image Match Grid Width

<div class="container">  <div class="row">    <div class="col-3">      <img src="//placehold.it/285x285" alt="Alt text" class="img-fluid"        srcset="//placehold.it/285x285 285w, //placehold.it/240x240 240w, //placehold.it/120x120 120w, //placehold.it/105x105 105w"         sizes="(min-width: 1200px) 285px, (min-width: 992px) 240px, (min-width: 768px) 120px, 105px" />    </div>    <div class="col-9">      <img src="//placehold.it/825x300" alt="Alt text" class="img-fluid"        srcset="//placehold.it/825x300 825w, //placehold.it/720x300 720w, //placehold.it/540x300 540w, //placehold.it/405x300 405w"         sizes="(min-width: 1200px) 825px, (min-width: 992px) 720px, (min-width: 768px) 540px, 405px" />    </div>  </div><div class="container">

I extract the width/size by examining the element (<div class="col-3"> and <div class="col-9">) width in browser. Different browsers element width might differ slightly by few pixels, so you might want to test with different browers and add a few more pixels to the width as precaution (to avoid having a gap of 1 or 2 pixels).

Testing with Chrome

Chrome will select the best srcset based on criteria such as window size and image cache.

If you start testing with the largest window size (1200px), it will still load the 1200px image after you make the window size smaller. The only way to stop this behavour is clear image cache (Open Developer Tools -> Network, find the image and right click select Clear browser cache).

If you test from smallest window size (< 768px) and slowy increase the window size, it will slower load the bigger image size as per srcset.

References:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images