srcset and sizes Quiz

I want to recap what you just learned about the image attributes srcset and sizes. This is a chance for you to take a closer look at the syntax of each attribute before trying them out on a real page in the next two quizzes.

In this quiz, you’ll experiment with srcset, and in the next you’ll add sizes to give the browser even more information.

There are two flavors of srcset, one using x to differentiate between device pixel ratios (DPR), and the other using w to describe the image’s width.

<img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x" alt="a cool image">

Set srcset equal to a comma separated string of filename multiplier pairs, where each multiplier must be an integer followed by an x.

For example, 1x represents 1x displays and 2x represents displays with twice the pixel density, like Apple’s Retina displays.

The browser will download the image that best corresponds to its DPR .

Also, note that there’s a src attribute as a fallback.

<img src="image_200.jpg" srcset="image_200.jpg 200w, image_100.jpg 100w" alt="a cool image">

Set srcset equal to a comma separated string of filename widthDescriptor pairs, where each widthDescriptor is measured in pixels and must be an integer followed by a w. Here, the widthDescriptor gives the natural width of each image file, which enables the browser to choose the most appropriate image to request, depending on viewport size and DPR. (Without the widthDescriptor, the browser cannot know the width of an image without downloading it!)

Also, note that there’s a src attribute as a fallback.

Ready to give it a shot? Click “Continue to Quiz” to try it out!

—

Here are my finished image tags:

<img  class="dpi"
      src="images/Den_Haag_2x.jpg"
      srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x"
      alt="Den Haag Skyline">

Notice how I’ve got a src as a backup. The order of the sources in srcset doesn’t matter. Also, if you omit the multiplier, it will default to 1x, meaning that

srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x"

is the same as

srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg"

<img  class="w"
      src="images/Australia_1280w.jpg"
      srcset="images/Australia_1280w.jpg 1280w, images/Australia_640w.jpg 640w"
      alt="Australia from Space">

Once again, there’s a src backup and you can switch the order of the images in srcset.