Responsive images in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the srcset attribute

Which of the following img tags correctly uses the srcset attribute to provide different image sizes for responsive loading?

CSS

<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" alt="Sample image">

A <img src="small.jpg" srcset="medium.jpg 600, large.jpg 1200" alt="Sample image">

B <img src="small.jpg" srcset="medium.jpg, large.jpg" alt="Sample image">

C <img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" alt="Sample image">

D <img src="small.jpg" srcset="600w:medium.jpg, 1200w:large.jpg" alt="Sample image">

💡 Hint

Look for the correct syntax where each image URL is followed by its width descriptor with 'w'.

The srcset attribute requires each image URL to be followed by a width descriptor (e.g., 600w) separated by commas. Option C uses the correct syntax. Option C misses width descriptors, C uses incorrect colon syntax, and A omits the 'w' unit.

📝 Syntax

intermediate

Correct usage of sizes attribute

What is the correct way to use the sizes attribute to specify that the image should be 100vw (full viewport width) on screens smaller than 600px and 50vw on larger screens?

CSS

<img src="image.jpg" srcset="image-small.jpg 600w, image-large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive image">

A <img src="image.jpg" srcset="image-small.jpg 600w, image-large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive image">

B <img src="image.jpg" srcset="image-small.jpg 600w, image-large.jpg 1200w" sizes="100vw (max-width: 600px), 50vw" alt="Responsive image">

C <img src="image.jpg" srcset="image-small.jpg 600w, image-large.jpg 1200w" sizes="(max-width: 600px): 100vw, 50vw" alt="Responsive image">

D <img src="image.jpg" srcset="image-small.jpg 600w, image-large.jpg 1200w" sizes="(max-width: 600px) => 100vw, 50vw" alt="Responsive image">

💡 Hint

The sizes attribute uses media conditions followed by the size value, separated by commas.

The sizes attribute syntax is: (media-condition) size, default-size. Option A correctly follows this format. Options A, B, and D use incorrect syntax with misplaced parentheses, colons, or arrows.

❓ rendering

advanced

Visual result of picture element with media queries

Given the following HTML, what image will display on a screen width of 500px?

CSS

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

A The image 'medium.jpg' will display.

B The image 'large.jpg' will display.

C The image 'small.jpg' will display.

D No image will display because of conflicting media queries.

💡 Hint

Check which media queries match the screen width of 500px.

The screen width is 500px. The first source requires at least 800px, so it does not match. The second source requires at least 400px, which matches 500px, so 'medium.jpg' is used. The img fallback is only used if no sources match.

❓ selector

advanced

CSS selector for responsive images inside a container

Which CSS selector correctly targets all img elements inside a section with class gallery to make them responsive with max-width 100% and height auto?

A .gallery > img { max-width: 100%; height: auto; }

B img.gallery section { max-width: 100%; height: auto; }

C section .gallery img { max-width: 100%; height: auto; }

D section.gallery img { max-width: 100%; height: auto; }

💡 Hint

The selector should target img inside section with class gallery.

Option D selects img elements inside a section with class gallery. Option D selects only direct child img of elements with class gallery, which may not be inside a section. Option D selects img inside any element with class gallery inside any section, which is different. Option D is invalid syntax.

❓ accessibility

expert

Accessibility best practice for responsive images

Which option best describes the correct way to provide accessible alternative text for responsive images using the picture element?

CSS

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="A scenic mountain landscape at sunrise">
</picture>

A Omit alt text on the <code>img</code> tag and add aria-label to the <code>picture</code> element.

B Provide meaningful alt text only on the <code>img</code> tag; sources do not need alt attributes.

C Add alt attributes to all <code>source</code> tags with the same text as the <code>img</code> alt.

D Use empty alt text on the <code>img</code> tag and provide a caption outside the <code>picture</code> element.

💡 Hint

Remember which element is actually rendered and read by screen readers.

The img element is the one rendered and accessible to screen readers. The source elements do not support alt attributes. Therefore, meaningful alt text should be provided only on the img tag. Options B, C, and D do not follow best accessibility practices.