<picture> Element Quiz - HTML Images

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.

The <picture> element is replacement for the <img> element in HTML. True or false?

Not at all. <picture> is only meant to provide more information to an <img> element on what image to render based on the current environment (i.e. the supported image types, the viewport's size, etc.). For more info, refer to HTML Images — The <picture> Element: What is the <picture> element?.

True False

The source URL of the image represented by a <picture> element goes in its source attribute. True or false? If false, give the correct explanation.

The <picture> element doesn't hold the source URLs of any image whatsoever; this is the job of its constituent <source> elements, and even <img>. Hence, the correct choice is (D). For more info, refer to HTML Images — The <picture> Element.

True False; the source URL goes in the <picture> element's src attribute. False; the source URL goes in the <picture> element's link attribute. False; the <picture> element itself doesn't hold any source image's URLs.

A <picture> can have only as many as 10 <source> elements inside it. True or false?

False; we can have as many <source>s as we want to. For more info, refer to HTML Images — The <picture> Element: The <source> element.

True False

What is the purpose of the <source> element inside a <picture>?

<source>, when inside a <picture>, serves to specify a source set of images (one or multiple images, varying in their resolution). This goes with choice (C). For more info, refer to HTML Images — The <picture> Element: The <source> element.

To specify the base URL of the underlying <img>'s source image To specify a single image source To specify a source set of one image or multiple images, varying in their resolution None of the above

Is the <picture> element required to have at least one <source> element inside it?

No, a <picture> isn't required to have at least one <source> inside it. It's perfectly valid to have a <picture> without a <source>. (However, it's required for a <picture> to have one <img> in it.) For more info, refer to HTML Images — The <picture> Element.

Yes No

The <picture> element can be used to ...

<picture> allows us to do all the things mentioned below except for choice (B). For more info, refer to HTML Images — The <picture> Element.

perform art direction prevent an image from being downloaded deliver images in latest formats if the browser supports them deliver the same kind of image in multiple resolutions

Bob wrote the following HTML code to serve the most appropriate image, in terms of format, for an illustration of cats:

<picture>
   <source type="image/jpeg" src="cats.jpg">
   <source type="image/avif" src="cats.avif">
   <source type="image/webp" src="cats.webp">
</picture>

The problem is that no matter what environment he tests this code in, the JPEG version of the given image gets loaded; the better formats, AVIF and WebP, never ever get loaded even if the browser supports them.

What's the issue in his code?

The ordering of the <source>s is problematic, specifically the one of the first <source>. The first <source> should come last because most browsers support JPG and we surely don't want to skip the rest of the <source>s from being seen when the JPG <source> comes first. Hence, the correct choice is (B). For more info, refer to HTML Images — The <picture> Element: The <source> element.

There's no <img> element and so the browser chooses the first <source> and ends further processing. The <source type="image/jpeg" ...> element comes first; more often than not, every browser would supports JPG and, therefore, load this <source> as soon as it encounters it, skipping the rest of the <source>s. There's no problem in his code; his JPG is probably small enough in terms of file size and, likewise, the browser loads it in place of other images to conserve bandwidth.

How can we use a <picture> to serve three different images (in terms of proportions) for different viewport sizes, and moreover, for each image, have two variants: normal-res, for devices with a DPR of 1, and high-res for a DPR of 2?

The <source> element inside <picture> will look after the three different images for different viewport sizes. Then, for each image, its two variants can be looked after by the srcset attribute of the corresponding <source>, containing the density descriptor 1x for the normal-res image and 2x for the high-res one. All in all, this goes with choice (B). For more info, refer to HTML Images — The <picture> Element.

For each of the three different images (in terms of proportions), use <source>. For the two variants of each image, use the width descriptor 1w for the normal-res and 2w for the high-res image in the srcset attribute of <source>. For each of the three different images (in terms of proportions), use <source>. For the two variants of each image, use the density descriptor 1x for the normal-res and 2x for the high-res image in the srcset attribute of <source>. For each of the three different images (in terms of proportions), use <source>. For the two variants of each image, use a separate <img> element with the srcset attribute having the density descriptor 1w for the normal-res and 2w for the high-res image For each of the three different images (in terms of proportions), use <source>. For the two variants of each image, use a separate <img> element with the srcset attribute having the density descriptor 1x for the normal-res and 2x for the high-res image.

Which of the following attributes of <source> specifies the type of the underlying source image?

The type attribute of the <source> element specifies the type (more specifically, the MIME type) of the underlying image. Hence, the correct choice is (B). For more info, refer to HTML Images — The <picture> Element: The <source> element.

mime type format

The <picture> element can't do what a standalone <img> with a srcset attribute can. True or false?

False; essentially, a <picture> element can do everything — in fact, way beyond — what a standalone <img> with a srcset attribute can do. For more info, refer to HTML Images — The <picture> Element.

True False

HTML Images - The `<picture>` Element Quiz

Are you ready?

More courses

Advanced JavaScript

Node.js