Responsive Images using srcset

Using srcset and sizes with Media Queries

Utilizing srcset and sizes alongside Media Queries presents an alternative method for managing responsive images in fluid layouts. This technique empowers you to designate sizes according to media query specifications within a sizes attribute. It's particularly advantageous for accommodating flexible image rendering, allowing images to adjust dynamically based on browser dimensions. Consequently, the browser will either fetch the most suitable image or, in some cases, retrieve the optimal image from its cache if available.

1 column layout

                    
                    <img src="placeholders/medium.jpg" srcset="placeholders/small.jpg 600w, placeholders/medium.jpg 800w, placeholders/large.jpg 1200w, placeholders/extralarge.jpg 1600w" sizes="(min-width: 1200px) 1200px, calc(100vw - 40px)" alt="the alt description" class="imageSpring" width="800" height="534">

2 columns layout

 
                    
                    <img src="placeholders/medium.jpg" srcset="placeholders/small.jpg 600w, placeholders/medium.jpg 800w, placeholders/large.jpg 1200w, placeholders/extralarge.jpg 1600w" sizes="(min-width: 1600px) 285px, (min-width: 1200px) calc((1200px - 40px) / 2), (min-width: 768px) calc(((768px - 40px) - 20px) / 2), calc(((100vw - 40px) - 20px) / 2)" alt="the alt description" class="imageSpring" width="800" height="534">

3 columns layout

 
                    
                    <img src="placeholders/medium.jpg" srcset="placeholders/small.jpg 600w, placeholders/medium.jpg 800w, placeholders/large.jpg 1200w, placeholders/extralarge.jpg 1600w" sizes="(min-width: 1600px) 386px, (min-width: 1200px) calc((1200px - 40px) / 3), (min-width: 768px) calc(((768px - 40px) - 40px) / 3), calc(100vw - 40px)" alt="the alt description" class="imageSpring" width="800" height="534">

4 columns layout

 
                    
                    <img src="placeholders/medium.jpg" srcset="placeholders/small.jpg 600w, placeholders/medium.jpg 800w, placeholders/large.jpg 1200w, placeholders/extralarge.jpg 1600w" sizes="(min-width: 1600px) 285px, (min-width: 1200px) calc((1200px - 60px) / 4), (min-width: 768px) calc(((768px - 40px) - 60px) / 4), calc(((100vw - 40px) - 20px) / 2)" alt="the alt description" class="imageSpring" width="800" height="534">