Senior LevelCSS & Modern Layouts
How do you implement responsive image art direction with CSS and HTML?
❓ Interview Prompt: Explain art direction with <picture>, image-set(), and CSS strategies for serving optimal images.
Art direction serves different image crops/compositions at different viewport sizes (not just scaled versions):
HTML Art Direction:
<picture> with <source media="..."> serves completely different images per breakpoint.
CSS image-set():
Declare resolution-specific background images: background-image: image-set("img.webp" 1x, "img@2x.webp" 2x).
CSS Strategy:
1
Use
<picture> for content images requiring different crops.2
Use
srcset with sizes for same-crop responsive scaling.3
Use CSS
background-image with image-set() or media queries for decorative backgrounds.Code Implementation Example
html
<!-- Art direction: different crops per viewport -->
<picture>
<source media="(min-width: 1024px)" srcset="hero-wide.webp">
<source media="(min-width: 640px)" srcset="hero-medium.webp">
<img src="hero-mobile.webp" alt="Hero" width="800" height="400">
</picture>💡Art direction serving different image crops per viewport.
🎯 Interview Key Takeaway
Use <picture> with <source media> for art direction (different crops) and srcset with sizes for resolution switching.
#Art Direction#Responsive Images#Performance#Senior
Back to all CSS & Modern Layouts Questions→