Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Responsible Responsive Images

Responsible Responsive Images

Mat Marquis

May 20, 2013
Tweet

More Decks by Mat Marquis

Other Decks in Technology

Transcript

  1. A FLEXIBLE GRID • MEDIA QUERIES • FLEXIBLE IMAGES AND

    MEDIA • HUGE FREAKIN’ WEBSITES •
  2. This website is best viewed on WebKit. This website is

    best viewed on either a $500 phone/tablet or a $3,000 laptop with an ultra high-resolution display. Let’s see, you’re on… what, 3G? Ugh, okay, fine. That’ll probably be enough. Don’t go into any tunnels or anything, though. What data plan do you have? …Seriously? You’ll need to upgrade—I’m gonna use like a quarter of that on the homepage alone. C’mon, this isn’t 2011; get with the program.
  3. Holler if you guys need any more help with your

    headlines. twitter.com/beep/statuses/180746121998635008 THE RETINA RECKONING RETINOCALYPSE RETINAGEDDON RETINARÖK ETHAN MARCOTTE “
  4. <picture> <source src="fullsize.jpg" media="(min-width: 60em)" /> <source src="medium.jpg" media="(min-width: 40em)"

    /> <source src="small.jpg" /> <img src="fallback.jpg" alt="…" /> </picture>
  5. <img src="fallback.jpg" srcset="small.jpg 320w 1x, small-hd.jpg 320w 2x, medium.jpg 640w

    1x, medium-hd.jpg 640w 2x, large.jpg 1x, large- hd.jpg 2x" alt="…">
  6. <img alt="" src="fallback.jpg" srcset="small.jpg 320w 1x, small-hd.jpg 320w 2x, medium.jpg

    640w 1x, medium-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x">
  7. <picture> <source > <source > <source srcset="small-sd.jpg 1x, small-hd.jpg 2x">

    <img src="small-sd.jpg" alt=""> </picture> media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x"
  8. <picture> <source > <source > <source srcset="small-sd.jpg 1x, small-hd.jpg 2x">

    <img src="small-sd.jpg" alt=""> </picture> media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x"
  9. <picture> <source > <source > <source > <img src="small-sd.jpg" alt="">

    </picture> media="( min-width: 40em )" media="( min-width: 20em )" srcset="big-sd.jpg 1x, big-hd.jpg 2x" srcset="mid-sd.jpg 1x, mid-hd.jpg 2x" srcset="small-sd.jpg 1x, small-hd.jpg 2x"
  10. “ Prollyfill [prô•le•fil] (n.): A polyfill for a not-yet-standardized API.

    twitter.com/SlexAxton/status/257543702124306432 ALEX SEXTON
  11. <div data-picture> <div data-source data-media="( min-width: 30em )" data-src="big.jpg"></div> <div

    data-source src="small.jpg"></div> <noscript> <img src="fallback.jpg" alt="…"> </noscript> </div>
  12. SVG

  13. /' // . // |\//7 /' " \ . .

    . | ( \ | '._ ' / \'-'