Responsive Images Community Group logo

Demos Grid system

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="img/yacht_race@fallback.jpg" srcset=" yacht_race@mobile.jpg 320w, yacht_race@wide-mobile.jpg 480w, yacht_race@tablet.jpg 768w, yacht_race@desktop.jpg 1024w, yacht_race@hires.jpg 1280w" sizes="90vw" alt="A very exciting yacht race.">

Credits

Author: Andreas Klein / @ixisio