Responsible Responsive Design: srcset with sizes

For this exercise, please download these files.

In this exercise, we’re going to add the SIZES attribute.

Make a new HTML page and add the following code to it. Make sure the path to the images is correct. If the folder name in the download is different, make adjustments.

<img src="small.jpg"  alt="shiny room"

srcset = "images/small.jpg 600w,
	images/medium.jpg 900w,
	images/large.jpg 1200w,
	images/xlarge.jpg 1800w"

sizes =	 "(max-width: 600px) 100vw,
	(max-width: 900px) 100vw,
	(max-width: 1200px) 100vw,
	(min-width: 1200px) 100vw"
>

We’ll discuss these values in class.