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.

Practice

1. What is the main purpose of using srcset and sizes attributes in an <img> tag?

easy

A. To add captions to images

B. To make images clickable links

C. To change the image color dynamically

D. To provide different image files for different screen sizes and resolutions

Solution

1. Step 1: Understand the role of srcset and sizes

   The srcset attribute lists multiple image files with different sizes or resolutions. The sizes attribute tells the browser how large the image will appear on the screen.

2. Step 2: How the browser uses these attributes

   The browser uses this information to pick the best image to load based on the device's screen size and resolution, improving loading speed and image quality.

3. Final Answer:

   To provide different image files for different screen sizes and resolutions -> Option D

4. Quick Check:

   Responsive images = srcset + sizes [OK]

Hint: Remember: srcset and sizes help pick best image [OK]

Common Mistakes:

• Thinking srcset changes image color
• Confusing sizes with image captions
• Using srcset without sizes attribute

2. Which of the following is the correct syntax to provide two image sources for different screen widths using srcset and sizes?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check the srcset attribute format

   The correct format uses image file names followed by width descriptors with 'w' (e.g., 500w, 1000w). <img srcset="small.jpg 500w, large.jpg 1000w" sizes="(max-width: 600px) 500px, 1000px" src="large.jpg" alt="Example"> uses this correctly.

2. Step 2: Verify the sizes attribute logic

   The sizes attribute uses media conditions like (max-width: 600px) to specify image display size. <img srcset="small.jpg 500w, large.jpg 1000w" sizes="(max-width: 600px) 500px, 1000px" src="large.jpg" alt="Example"> correctly uses this to tell the browser when to use which image size.

3. Final Answer:

   <img srcset="small.jpg 500w, large.jpg 1000w" sizes="(max-width: 600px) 500px, 1000px" src="large.jpg" alt="Example"> -> Option A

4. Quick Check:

   Width descriptors use 'w' and sizes use media queries [OK]

Hint: Use 'w' for width in srcset and media queries in sizes [OK]

Common Mistakes:

• Using 'h' instead of 'w' for width descriptors
• Mixing min-width and max-width incorrectly
• Omitting width descriptors in srcset

3. Given the following HTML code, which image file will the browser most likely load on a device with a screen width of 400px?

<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 400px, 800px" src="large.jpg" alt="Sample Image">

medium

A. large.jpg

B. medium.jpg

C. small.jpg

D. large.jpg but scaled down

Solution

1. Step 1: Analyze the sizes attribute for 400px screen width

   The sizes attribute says if the screen is at most 600px wide, use 400px image size. Since 400px is less than 600px, the browser expects the image to display at 400px width.

2. Step 2: Match the srcset image closest to 400px width

   From srcset, the image with 400w descriptor is small.jpg, which matches the needed size best. The browser picks this to save bandwidth and load faster.

3. Final Answer:

   small.jpg -> Option C

4. Quick Check:

   Screen width 400px uses small.jpg [OK]

Hint: Match sizes width to closest srcset width [OK]

Common Mistakes:

• Choosing large.jpg because it's default src
• Ignoring sizes attribute
• Assuming medium.jpg for all screens

4. Identify the error in this responsive image code:

<img srcset="image-400.jpg 400w, image-800.jpg 800w" sizes="(max-width: 600px) 800px, 400px" src="image-800.jpg" alt="Error Example">

medium

A. The sizes attribute has incorrect order of conditions and values

B. The srcset descriptors should use 'h' instead of 'w'

C. The src attribute should be omitted when using srcset

D. The alt attribute is missing

Solution

1. Step 1: Review the sizes attribute syntax

   The sizes attribute lists conditions and sizes in order. It should say: if max-width is 600px, use 400px, else use 800px. Here, the sizes attribute reverses these values, causing the browser to pick wrong image sizes.

2. Step 2: Confirm other attributes are correct

   The srcset uses correct 'w' descriptors, src attribute is allowed as fallback, and alt attribute is present. So no errors there.

3. Final Answer:

   The sizes attribute has incorrect order of conditions and values -> Option A

4. Quick Check:

   Sizes conditions must match correct image widths [OK]

Hint: Sizes order: condition then matching size [OK]

Common Mistakes:

• Swapping sizes values causing wrong image choice
• Using 'h' instead of 'w' in srcset
• Removing src fallback attribute

5. You want to serve different image resolutions for retina and non-retina screens using srcset. Which of the following is the best way to write this for an image named photo.jpg?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand resolution descriptors in srcset

   To serve images for retina (high pixel density) screens, use resolution descriptors like '1x' and '2x' to indicate normal and double resolution images.

2. Step 2: Check the options for correct syntax

   <img src="photo.jpg" srcset="photo.jpg 1x, [e-mail] 2x" alt="Photo"> uses '1x' and '2x' correctly with a fallback src attribute. <img src="photo.jpg" srcset="photo.jpg 400w, [e-mail] 800w" sizes="100vw" alt="Photo"> uses width descriptors ('w'), which are better suited for different viewport sizes rather than DPR. <img srcset="photo.jpg 1x, [e-mail] 2x" alt="Photo"> misses src fallback. <img src="photo.jpg" srcset="photo.jpg 1h, [e-mail] 2h" alt="Photo"> uses invalid 'h' descriptors.

3. Final Answer:

   <img src="photo.jpg" srcset="photo.jpg 1x, [e-mail] 2x" alt="Photo"> -> Option B

4. Quick Check:

   Use '1x' and '2x' for retina images [OK]

Hint: Use '1x' and '2x' for retina images in srcset [OK]

Common Mistakes:

• Using width descriptors instead of resolution for retina
• Omitting fallback src attribute
• Using invalid 'h' descriptors