Are you ready?
7 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.
Which of the following code snippets denotes an
<img> element that is lazily loaded?The
loading attribute of the <img> element is used to specify whether the image should be loaded lazily or eagerly (the default). For lazy loading, we use loading="lazy". Hence, the correct choice is (C) only. For more info, refer to HTML Images — Eager and Lazy Loading: The loading attribute.What term does the following definition define?
"It means to load an image — or generally speaking, any resource — only when there is a need for it."
The given definition applies to lazy loading, which is to only load images when there is a need for them (that's essentially what 'lazy' means). This goes with choice (B). For more info, refer to HTML Images — Eager and Lazy Loading.
Browser eagerly load all
<img> elements by default. True or false?True; every
<img> element loads its source image eagerly, by default. For more info, refer to HTML Images — Eager and Lazy Loading.The following two
<img>s are functionally equivalent. True or false? If false, give the correct explanation.<img src="photo.jpg" loading="eager">
<img src="photo.jpg">Whether we mention
loading="eager" on an <img> element or leave the loading attribute out completely, it's the same thing. Hence, both the shown <img> elements are functionally equivalent. For more info, refer to HTML Images — Eager and Lazy Loading: The loading attribute.Alice is a newbie HTML developer. She thinks that she should lazily load every single image on a given webpage, regardless of where those images lie on the page. Is she right or wrong?
Alice is wrong. There's absolutely no need to lazily load every single image on a webpage; as an example, critical images that are crucial for the initial render of a webpage (for e.g. logos, icons) must be eagerly-loaded. For more info, refer to HTML Images — Eager and Lazy Loading: Don't use lazy loading all the time!
What is the problem in the following HTML code given that we want the image to be lazily loaded?
<img src="nature.jpg">Since we want the
<img> in the code above to be lazily loaded, it should have loading="lazy" set on it. However, the element doesn't have loading set at all. This is the problem. And the correct choice, therefore, is (C). For more info, refer to HTML Images — Eager and Lazy Loading: The loading attribute.What is the problem in the following HTML code given that we want the image to be eagerly loaded?
<img src="nature.jpg" loading="eager">There is absolutely no problem in the given code; we want the image to be eagerly loaded and that's exactly the default in case the
loading attribute is omitted from an <img>. For more info, refer to HTML Images — Eager and Lazy Loading: The loading attribute.
