HTML Images - The srcset Attribute Quiz

Are you ready?

10 questions to solve

Instructions

This quiz goes to full-screen once you press the Start button.
At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.

When the srcset attribute is set on an <img>, it's invalid to have the src attribute. True or false?

False; in fact, it's a good idea to have src even when an <img> has srcset, for the sake of supporting browsers that don't understand srcset. For more info, refer to HTML Images — The srcset Attribute.

True False

Does the order of image sources in srcset matter?

No, the order doesn't matter; the browser goes through all the given sources in srcset. For more info, refer to HTML Images — The srcset Attribute: What is srcset?

Yes No

Which of the following correctly describes the x descriptor in the srcset attribute?

x stands for the density descriptor. This goes with choice (C). For more info, refer to HTML Images — The srcset Attribute: Pixel density and the x descriptor.

It's the pixel descriptor It's the width descriptor It's the density descriptor It's the aspect ratio descriptor

Suppose we want to set up an <img> element to serve either of the following two images depending on the DPR of the underlying device:

cats-1x.jpg for a DPR of 1
cats-2x.jpg for a DPR of 2

Which of the following code snippets correctly accomplishes this?

The correct way is to have the image candidate strings cats-1x.jpg 1x and cats-2x.jpg 2x delimited by a comma (,). This goes with choice (C). For more info, refer to HTML Images — The srcset Attribute: Pixel density and the x descriptor.

<img srcset="cats-1x.jpg, cats-2x.jpg" alt="Cats photo">

<img srcset="cats-1x.jpg 1x, cats-2x.jpg" alt="Cats photo">

<img srcset="cats-1x.jpg 1x, cats-2x.jpg 2x" alt="Cats photo">

<img srcset="cats-1x.jpg 1x; cats-2x.jpg" alt="Cats photo">

<img srcset="cats-1x.jpg 1x; cats-2x.jpg 2x" alt="Cats photo">

How do we denote a width descriptor in the srcset attribute?

The width descriptor (w), paired with the actual width, has the following general form: <int>w, where <int> represents an integer. This goes with choice (A). For more info, refer to HTML Images — The srcset Attribute: Different widths and the w descriptor.

As <int>w, where <int> represents an integer As <num>w, where <num> represents a number (possibly containing a fractional part) As <int>px, where <int> represents a integer As <num>px, where <num> represents a number (possibly containing a fractional part)

When using srcset, we must always specify more than one image source. True or false?

False; it's perfectly OK to have just one source mentioned in srcset. For more info, refer to HTML Images — The srcset Attribute: What is srcset?

True False

If we use a width descriptor in srcset for the first image source, we must use a width descriptor for all the rest of the sources. True or false?

True; as a matter of fact, it's valid to have only one kind of descriptor used in the srcset attribute — either x or w, NOT both.

True False

Which descriptor gives us more control when specifying multiple images using srcset? Width descriptor or density descriptor?

Clearly, the width descriptor. It allows us to specify the intrinsic width of the image and also the width of the slot that the image would ultimately fill up; the browser uses both these pieces of information in computing the pixel density that the image corresponds to. For more info, refer to HTML Images — The srcset Attribute: Different widths and the w descriptor.

Width descriptor Density descriptor

Which attribute besides srcset is a must-to-have on an <img> element when using width descriptors?

The sizes attribute is required when we have an <img> with a srcset attribute containing width descriptors. This is because the width descriptors specify the intrinsic widths of all the given image sources, while sizes specifies the widths of the corresponding slots. Hence, the correct choice is (B).

For more info, refer to HTML Images — The srcset Attribute: Different widths and the w descriptor.

width sizes media There's no such attribute

Bob wrote the following HTML to serve cats.png when the width of the viewport is larger than 600px and serve dogs.png (a completely different image) otherwise.

<img sizes="(max-width: 600px) 600px, 100vw" srcset="cats.png 600w, dogs.png 600w">

Two important things to note:

The actual width of both the images is the same.
The DPR of the underlying device shouldn't affect the chosen image.

What's the problem with his code? Select all that apply, if any.

What Bob is trying to achieve here is something close to art direction which isn't the job of srcset. In other words, srcset isn't meant to switch between completely different images. Hence, choice (D) is correct.

Apart from this, on the technical side, the width descriptor can't appear more than once in the srcset attribute. This means that choice (C) is also correct.

For more info, refer to HTML Images — The srcset Attribute: Different widths and the w descriptor.

The vw unit can't be used in sizes The 100vw value isn't preceded with a media query The same width descriptor, 600w, can't appear in srcset twice The purpose of srcset isn't to switch between completely different images (but rather to switch between images only differing in their resolution) There's no problem

HTML Images - The `srcset` Attribute Quiz

Are you ready?

More courses

React

CSS