Responsive Images

Responsive Images

Responsive images are the set of techniques used to load the right image based on device resolution, orientation, screen size, network connection, and page layout. The browser should not stretch the image to fit the page layout, and loading it shouldn’t result in time & bandwidth wastage. It improves user experience as images load fast and look crisp to the human eye.

https://imagekit.io/responsive-images/#chapter-1---what-is-responsive-images


<!-- The width of the orignal image is 2200px -->
<img src="image.jpg" />
  • "srcset" and "sizes" attributes make it possible to offer multiple sizes of the same image
  • browser does the calculation and chooses the best size to display to the user

<img>

Width Descriptor


<img src="image.jpg" 
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

  • allows the browser to pick the best candidate from srcset based o​n the actual width needed to render that image on that particular display at runtime

  • display pixel density is also taken into account by the browser while calculating the required width

Sizes


<img src="image.jpg" 
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, 
            (max-width: 600px) 50vw, 
            (max-width: 900px) 33vw, 
            900px"
/>

  • contains a comma-separated list describing the size of the image in relation to the viewport

  • with srcset provides the browser enough information to start downloading the right image as soon as it sees an <img> tag in HTML without waiting for styles sheets to complete downloading and parsing

     

Demo time....

Made with Slides.com