Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mo‘ Pixels, Mo‘ Problems Fall 2013

Dave Rupert
November 15, 2013

Mo‘ Pixels, Mo‘ Problems Fall 2013

The Fall 2013 edition of "Mo Pixels Mo Problems" and how to deal with Responsive Images given at Artifact Conf East (http://artifactconf.com) in Providence, RI. The topic has changed a lot since the last time and there are even more options out there... so crack a beer and let's go on a journey.

Dave Rupert

November 15, 2013
Tweet

More Decks by Dave Rupert

Other Decks in Technology

Transcript

  1. Le menu • Discovery of Findings: Key Issues and Data

    Points • Identify Primary Blockers for the Agile Web • Leverage the Paravel Image Biz-Strat • Cloud-based Cutting Edge E-Solutions • Sweet Hacks, Bro
  2. HTML, CSS, JavaScript, Images, Fonts, Flash?, etc. of page load

    times are because of the front end. 80%
  3. kilobytes == average page weight in April 2013 1,617 kilobytes

    == size of moto.oakley.com 87,962 cost to view moto.oakley.com on Verizon’s smallest plan $22 Don’t worry, Oakley got the site down to 13.7 MBs (84% improvement!)
  4. of RWD sites send the same payload to mobile and

    desktop. 72% Only 6% were “much smaller” http://www.guypo.com/?p=3374
  5. №3 Retina Screens LOL. YOUR JOB JUST GOT SOOOOoOO MUCH

    MORE DIFFICULT! LOLOLOLOL — Steve Jobs, from the grave.
  6. The Paravellian® Approach Use CSS and Web Fonts whenever possible

    Use SVG and Icon Fonts whenever applicable Use a Responsive Images Solution
  7. .pizza { background-image: url("pizza.png"); } ! @media only screen and

    (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .pizza { background-image: url("[email protected]"); background-size: 400px 300px; } }
  8. .pizza { background-image: inline-image("pizza.svg"); background-size: 400px 300px; 
 .no-svg &

    {
 background-image: inline-image("pizza.png");
 }
 
 } Sass/Compass SVG Data URI with PNG Fallback
  9. ! /' // . // |\//7 /' " \ .

    . .~ ~ | ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | / / | \ / |VV ||--\__________/-||-/| || || || || { } { } { }{ } Grunticon grumpicon.com
  10. a b c d e f g h i j

    a b c d e f g h i j
  11. LATE BREAKING NEWS IN AUGUST, WEBKIT SHIPPED @SRCSET WITHOUT THAT

    WEIRD ‘600w’ SYNTAX. WILL LIKELY BE DROPPED.
  12. Strengths Just an attribute Strong “2x” syntax Weaknesses Comma delimited

    values Faux-media query microsyntax Non-intuitive px-based “w” and “h” units Browser determination Polyfill causes the double download Breaks preloader
  13. <picture alt="Pizza"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)"

    srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> </picture> <picture> syntax
  14. Strengths Audio/Video element syntax Media-query based Supports non-pixel values Supports

    art direction Uses @srcset’s “2x” powers Fallbacks for unsupported types Weaknesses Verbose Breaks preloader “Hard to implement”* * Citation needed
  15. <picture alt="Pizza"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)"

    srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> </picture> <picture> syntax
  16. <img alt="Pizza" src-1="(min-width: 45em) large-1.jpg 1x, large-2.jpg 2x" src-2="(min-width: 18em)

    med-1.jpg 1x, med-2.jpg 2x" src-3="small-1.jpg 1x, small-2.jpg 2x" src="large.jpg" /> srcN syntax
  17. <img alt="Pizza" src-1="100% (30em) 50% (50em) calc(33% - 100px); pic100.png

    100, pic200.png 200, pic400.png 400, pic800.png 800, pic1600.png 1600, pic3200.png 3200" /> Viewport URL
  18. Strengths Media-query based Supports non-pixel values Supports art direction @srcset’s

    “2x” powers Viewport-URLs “Easy to implement”?? Weaknesses Ordinal Attributes? Fallbacks for unsupported types?
  19. GET /img.jpg HTTP/1.1 ! Accepts: image/jpg CH-DPR: 2.0 CH-RW: 160

    How a client hinted browser requests an image
  20. <img alt="Pizza" src-1="(min-width: 45em) large-1.jpg 1x, large-2.jpg 2x" src-2="(min-width: 18em)

    med-1.jpg 1x, med-2.jpg 2x" src-3="small-1.jpg 1x, small-2.jpg 2x" src="small-1.jpg" />
  21. Strengths One image tag Legacy sites Weaknesses Blackbox What if

    these services shut down? What if you switch platforms?
  22. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car

    Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(pizza/small.png);} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(pizza/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(pizza/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(pizza/huge.png);} } </style> </svg>