Bird
Raised Fist0
CSSmarkup~5 mins

Responsive images in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Responsive images help your website show pictures that look good on all screen sizes. They save data and load faster by using the right image size for each device.

When you want your website images to look sharp on phones, tablets, and desktops.
When you want to save users' data by not loading very large images on small screens.
When you want your website to load faster by using smaller images on small devices.
When you want to improve user experience by showing images that fit the screen well.
When you want to support different screen resolutions, like retina displays.
Syntax
CSS
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px" alt="Description">

srcset lists image files with their widths.

sizes tells the browser which image size to pick based on screen width.

Examples
This example shows a cat image that changes size depending on screen width.
CSS
<img src="cat-small.jpg" srcset="cat-small.jpg 400w, cat-medium.jpg 800w, cat-large.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px" alt="Cute cat">
This example uses two images for normal and retina screens, always filling the full viewport width.
CSS
<img src="flower.jpg" srcset="flower-1x.jpg 600w, flower-2x.jpg 1200w" sizes="100vw" alt="Beautiful flower">
This example uses the <picture> element to choose images based on screen width.
CSS
<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Scenery">
</picture>
Sample Program

This page shows one image that changes size and file based on the browser width. The border and rounded corners make it look neat. The text explains what to do.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Images Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      max-width: 600px;
      margin: auto;
    }
    img {
      width: 100%;
      height: auto;
      border: 2px solid #333;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Responsive Images Demo</h1>
  <p>Resize the browser window to see the image change size and load the best version.</p>
  <img src="https://via.placeholder.com/400x300.png?text=Small+Image" 
       srcset="https://via.placeholder.com/400x300.png?text=Small+Image 400w, 
               https://via.placeholder.com/800x600.png?text=Medium+Image 800w, 
               https://via.placeholder.com/1200x900.png?text=Large+Image 1200w"
       sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
       alt="Placeholder image showing responsive sizes">
</body>
</html>
OutputSuccess
Important Notes

Always include alt text for accessibility so screen readers can describe the image.

Use width: 100% and height: auto in CSS to make images scale nicely.

Test your responsive images by resizing the browser or using browser developer tools device simulator.

Summary

Responsive images help your site load faster and look good on all devices.

Use srcset and sizes attributes on <img> to provide multiple image options.

The browser picks the best image based on screen size and resolution automatically.

Practice

(1/5)
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, photo@2x.jpg 2x" alt="Photo"> uses '1x' and '2x' correctly with a fallback src attribute. <img src="photo.jpg" srcset="photo.jpg 400w, photo@2x.jpg 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, photo@2x.jpg 2x" alt="Photo"> misses src fallback. <img src="photo.jpg" srcset="photo.jpg 1h, photo@2x.jpg 2h" alt="Photo"> uses invalid 'h' descriptors.

  3. Final Answer:

    <img src="photo.jpg" srcset="photo.jpg 1x, photo@2x.jpg 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