Responsive Images with Srcset

Background

Responsive images reduce bandwidth and improve load times on mobile devices.

Problem

Serve different image sizes based on device capabilities using srcset and picture element.

Input

Image sources at different sizes

Output

Optimized image delivery

Sample tests

Input: image with srcset

Expected: right size loaded

Your solution

Learning objective

Learn responsive image techniques and optimization