In this lab, you will add responsive images to the Egypt vacation webpage as shown below.

Webpage shows Egypt page from a mobile device with three images showing various places around Egypt.

Step $1$: Show images for different DPRs $(2$ points$)$

Modify the first in egypt.html to use the srcset attribute. Show egypt$\_600.$jpg on a $1$ DPR screen, egypt$\_1200.$jpg on a $2$ DPR screen, and egypt$\_1800.$jpg on a $3$ DPR screen. Note that all images in this lab are in the images folder, so each image filename must be prefaced with "images$/".$ Ex: images$/$egypt$\_600.$jpg$.$

The Chrome DevTools' Network tab can be used to verify that the appropriate image is requested depending on the DPR$.$ Ex: The screenshot below shows egypt$\_1200.$jpg is requested when the DPR is $2\mathrm{.}0.$

Chrome DevTools screenshot.

Step $2$: Change image sizes for different viewport widths $(3$ points$)$

Modify the second in egypt.html to use the srcset and sizes attributes.

The srcset attribute should indicate the image names and associated sizes:

luxor$\_600.$jpg is $600$ pixels wide

luxor$\_800.$jpg is $800$ pixels wide

luxor$\_1200.$jpg is $1200$ pixels wide

The sizes attribute should describe the image size requirements for various viewport widths:

When the viewport width is at least $700$px wide, the image width should be $600$px$.$

When the viewport width is at least $500$px wide, the image width should be $400$px$.$

The default image width should be $200$px$.$

Don't forget the preface "images$/"$ before image filenames. Resizing the browser width should cause the three different images to display at the $500$ and $700$ breakpoints.

Step $3$: Add art direction for different viewport widths $(3$ points$)$

Add tags around the third in egypt.html$.$ Then add the appropriate tag inside so hotel$\_$wide.jpg displays instead of hotel$\_$narrow.jpg when the viewport width is at least $500$px wide.

Resizing the browser should display hotel$\_$narrow.jpg when the viewport width is $<500$px wide and hotel$\_$wide.jpg otherwise.

Step $4$: Show SVG image for list background $(2$ points$)$

Modify styles.css so check.svg is displayed centered in the background of the unordered list. Set the following CSS properties:

background$-$image should display images$/$check$.$svg

background$-$repeat should be no$-$repeat

background$-$position should be center

background$-$size should be $60$vw

Resizing the browser width should cause the check.svg image to grow and shrink.