Questions
1 of 12
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
Difficulty: 5/10
srcset attribute, picture element, image performance
Responsive images in HTML allow browsers to load the most appropriate image depending on the device screen size, resolution, or other conditions. Two main tools for this are the srcset attribute (used on <img>) and the <picture> element.
Key Concepts
- 1
srcseton<img>: Lets you define multiple versions of the same image at different resolutions or sizes. The browser automatically chooses the best one based on screen size and pixel density. - 2
sizesattribute: Works withsrcsetto tell the browser how much space the image will take up in different layouts. - 3
<picture>element: Gives more control by letting you specify multiple image sources with<source>elements. Useful for art direction (e.g., showing a cropped image on mobile vs. full image on desktop). - 4
Fallback
<img>: Inside<picture>, the<img>tag provides the default image if none of the<source>conditions match.
Example Usage
In short: Use srcset + sizes when you only need different image resolutions, and use <picture> when you need different images entirely depending on screen size or context.
Scenario Questions
0-2 years experience
- 1We need to add an image to a product page that looks good on both mobile and desktop. How would you use srcset and sizes to serve the appropriate image resolution?
- 2If you forget to include the width descriptor in a srcset entry, what will the browser do?
- 3Write the HTML markup for a logo that should use a WebP version when supported, falling back to PNG otherwise, using the picture element.
2-5 years experience
- 1Our marketing team added a new high‑resolution banner, but page load time increased. Walk me through how you would debug whether srcset is being used correctly.
- 2We have a component that receives an image URL and an array of breakpoints. How would you generate the srcset attribute in JavaScript, and what trade‑offs would you consider?
- 3Explain why a picture element with multiple source tags might not display the expected image on Safari, and how you would fix it.
5-8 years experience
- 1Design a reusable Image component for a React app that automatically selects the optimal format (WebP, AVIF) and resolution using srcset and picture. What edge cases do you need to handle at scale?
- 2Our CDN can serve images at different widths on the fly, but we also have static assets. How would you decide when to use srcset with explicit URLs versus letting the CDN handle resizing?
- 3Discuss the performance implications of using many source elements in a picture tag for a page with 200 images. How would you mitigate any impact?
8+ years experience
- 1We are migrating a legacy monolith that hard‑codes <img src='...'> tags to a modern responsive image strategy across dozens of teams. What architectural approach would you take to roll this out without breaking existing pages?
- 2How would you set up a cross‑team governance model for image assets, including naming conventions, automated srcset generation, and CI checks, to ensure consistency at scale?
- 3Consider a global e‑commerce site that serves billions of image requests daily. How would you evaluate the trade‑offs between client‑side srcset vs. server‑side adaptive image delivery, and what metrics would guide your decision?