Responsive Image With Srcset Using Bootstrap Breakpoints

Sep 24, 2020


<img src="// 1200w"  srcset="// 1200w, // 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="// 1200w, // 800w": // is of size/width 1200, and // 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="//"  srcset="// 160w, // 130w, // 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="//" class="img-fluid"    srcset="// 1140w, // 960w, // 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="//" alt="Alt text" class="img-fluid"        srcset="// 285w, // 240w, // 120w, // 105w"         sizes="(min-width: 1200px) 285px, (min-width: 992px) 240px, (min-width: 768px) 120px, 105px" />    </div>    <div class="col-9">      <img src="//" alt="Alt text" class="img-fluid"        srcset="// 825w, // 720w, // 540w, // 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.


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.