Responsive Images, Media, and Modern Asset Delivery
Images that adapt
Why responsiveness matters
Images are often the largest assets on a page, so serving the right size and format can significantly improve performance. Responsive images balance visual quality with bandwidth and device constraints.
Core techniques
Use the and attributes to provide multiple image candidates, and use the element when you need art direction or format switching. For decorative images, ensure CSS can scale them without distortion.
Performance tip
Compress images appropriately and choose modern formats when supported to reduce page weight.
Embedding media
Video and external embeds
When embedding video or third-party media, consider aspect ratio, loading behavior, and accessibility. Use captions when needed, and make sure media doesn’t break the layout on small screens.
Which attribute pair is used to help browsers choose the best image candidate for different viewport conditions?
provides candidates and helps the browser select among them.
Correct answer: srcset and sizes
When would you use the picture element instead of a standard img element?
The element lets you define multiple sources with media conditions or format fallbacks.
Correct answer: When you need art direction or different image formats for different conditions.
Accessibility considerations
Every meaningful image should have alternative text that conveys its purpose. If an image is purely decorative, use empty alt text so assistive technologies can ignore it appropriately.
What should you provide for a meaningful image so screen readers can understand it?
Alt text conveys the image’s purpose or content to users who cannot see it.
Correct answer: Alternative text