Menu
I'm using Bootstrap with Responsive Images. I want to optimize load times by offering multiple image sizes to browsers. According to this article, a plain approach with srcset like this is good for letting the browser pick the optimal image size:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
My problem is that combining this with the Bootstrap img-responsive class, a large size picture gets loaded even when only a small one is needed.
Code example here: Bootply . Use Chrome for testing, it has built-in support for srcset support! (Some other browsers would need picturefill.js to recognize it.)
If you copy the source of the image (or look in Chrome Developer Tools in the Network tab), you can see that the 750 width version gets loaded, and resized to a small image, even though there are smaller versions that would be optimal to use. (The same thing happens in IE and Firefox if the picturefill JS is loaded to support img srcset.)
What am I doing wrong?
668
If you find yourself confused about why srcset is not working as expected. And why the browser is using the wrong image, it's probably because of “devicePixelRatio”. Once you factor that into your estimations, things will start to look right.
You can use sizes to make srcset work even better. Without it, the browser uses the full width of the viewport when choosing an image from a srcset .
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
srcset allows you to define a list of different image resources along with size information so that browser can pick the most appropriate image based on the actual device's resolution. The actual width of the image or display density: Either using display density descriptor, for example, 1.5x , 2x etc.
You need to use the sizes attribute to tell the browser which width the image will have in your design, otherwise it defaults to 100vw (full viewport).
<img sizes="(max-width: 480px) calc(100vw - 10px), 480px" src="small.jpg" srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />
In case you can set the width in CSS, you can also use lazySizes to automatically calculate the sizes for you.
With lazySizes:
<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
