Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty

AllThingsSmitty/responsive-images.htm

Last active April 11, 2016 18:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AllThingsSmitty/26a22100e602c284152b35097d037594 to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/26a22100e602c284152b35097d037594 to your computer and use it in GitHub Desktop.
Download ZIP
Automatically art-directed responsive images
Raw
responsive-images.htm
<!-- source article: http://cloudinary.com/blog/automatically_art_directed_responsive_images -->
<picture>
<!-- wide crop -->
<source
media="(min-width: 600px)"
srcset="http://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_600/on_the_phone.jpg 600w,
http://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_1200/on_the_phone.jpg 1200w"
sizes="100vw">
<!-- standard crop -->
<img
srcset="http://res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_400/on_the_phone.jpg 400w,
http://res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_800/on_the_phone.jpg 800w"
src="http://res.cloudinary.com/eeeps/image/upload/f_auto,q_70,w_400/on_the_phone.jpg"
alt="President Obama on the phone in the Oval Office"
sizes="100vw">
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment