Responsive Images Community Group logo

Demos Variable width

A very exciting yacht race.

A very exciting yacht race.

This uses a mobile first approach with 5 breakpoint. It only loads images as each breakpoint matches.

HTML

<img src="yacht_race@fallback.jpg" srcset=" img/yacht_race@mobile.jpg 320w, img/yacht_race@wide-mobile.jpg 480w, img/yacht_race@tablet.jpg 768w, img/yacht_race@desktop.jpg 1024w, img/yacht_race@hires.jpg 1280w" sizes=" (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw" alt="A very exciting yacht race.">

Credits

Author: Yoav Weiss / @yoavweiss