$30 off During Our Annual Pro Sale. View Details »

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. “Mo’ Pixels,
    Mo’ Problems”
    Dealing with Responsive Images
    with Dave Rupert @davatron5000

    View Slide

  2. “!is is why

    Daddy drinks

    at night.”

    View Slide

  3. + + +
    (slang)
    (place) (personal brand) (sound)

    View Slide

  4. paravelinc.com

    View Slide

  5. shoptalkshow.com

    View Slide

  6. View Slide

  7. 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

    View Slide

  8. Le Problème
    Like all Americans, websites are getting
    more and more obese.
    #sickburn

    View Slide

  9. HTML, CSS, JavaScript, Images, Fonts, Flash?, etc.
    of page load times are
    because of the front end.
    80%

    View Slide

  10. kilobytes == average page
    weight in October 2013.
    1,617
    Up 333kb (25%) from January 2013.

    View Slide

  11. kilobytes == images
    (~56 of them)
    988
    Up 195kb (24.5%) from January 2013.

    View Slide

  12. of page weight is images.
    ~60%
    Source: HTTPArchive.org

    View Slide

  13. Les Facteurs
    What’s causing all this image bloat?

    View Slide

  14. №1
    Bad Web 

    Performance
    Websites keep getting fatter.

    View Slide

  15. 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!)

    View Slide

  16. millisecond delay
    500
    reduction in tra"c
    20%
    http://www.codinghorror.com/blog/2006/11/speed-still-matters.html

    View Slide

  17. №2
    Responsive
    Web Design
    One website to rule them all.

    View Slide

  18. “Blame the
    implementation
    not the technique”
    – Tim Kadlec

    View Slide

  19. of RWD sites send the same
    payload to mobile and desktop.
    72%
    Only 6% were “much smaller”
    http://www.guypo.com/?p=3374

    View Slide

  20. Unofficial findings from the
    Dave Rupert Arm Chair Research Institute
    “Expect RWD to
    bloat things ~10%”

    View Slide

  21. №3
    Retina Screens
    LOL. YOUR JOB JUST GOT SOOOOoOO MUCH
    MORE DIFFICULT! LOLOLOLOL
    — Steve Jobs, from the grave.

    View Slide

  22. View Slide

  23. LOL. I’m 3x!

    View Slide

  24. Considérations
    Breakpoints Densities Art direction

    View Slide

  25. Breakpoints

    View Slide

  26. Densities

    View Slide

  27. Art direction
    http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/

    View Slide

  28. The Paravellian®
    Approach
    Use CSS and Web Fonts whenever possible
    Use SVG and Icon Fonts whenever applicable
    Use a Responsive Images Solution

    View Slide

  29. CSS &
    Web Fonts

    View Slide

  30. View Slide

  31. .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;
    }
    }

    View Slide

  32. SVG &
    Icon Fonts

    View Slide

  33. SVG
    Scalable Vector Graphics
    Basically illustrator files

    View Slide

  34. Ghostscript Tiger SVG: 67kb

    View Slide




  35. View Slide


  36. View Slide

  37. onerror="this.src=pizza.png;
    this.onerror=null;"

    />

    View Slide

  38. .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

    View Slide

  39. .pizza {
    background-image: url(data:image/svg+xml;base64,
    R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    background-size: 400px 300px;
    }

    .no-svg .pizza {

    background-image: url("pizza.png");

    }

    Sass/Compass SVG Data URI with PNG Fallback

    View Slide

  40. !
    /'
    //
    . //
    |\//7
    /' " \
    . . .~ ~
    | ( \
    _ _ - -_ | '._ '
    _ __ _- \_ _/ \'-'
    // \\_/
    \\ | |
    || | /
    / | \ /
    |VV ||--\__________/-||-/|
    || || || ||
    { } { } { }{ }
    Grunticon
    grumpicon.com

    View Slide

  41. 9+ 3.0+ 3.2+
    Source: caniuse.com
    SVG support

    View Slide

  42. Icon Fonts
    Tiny monochrome vector packs.

    View Slide

  43. a b c d e f g h i j
    a b c d e f g h i j

    View Slide

  44. View Slide

  45. Source: caniuse.com
    Icon font support
    8+
    NO
    OPERA
    MINI :(

    View Slide

  46. La quête d'une
    solution d'image
    sensible

    View Slide

  47. Failed paths
    What we’ve tried, what kinda works and what doesn’t.

    View Slide

  48. “I’ll just use

    JavaScript!”
    — Everyone Ever

    View Slide

  49. src="pizza-mobile.jpg"
    data-desktop="pizza-desktop.jpg"
    />

    View Slide

  50. <br/>if($(window).width() > 960) {<br/>$('img').each(function(){<br/>$(this).attr(<br/>'src', $(this).data('desktop')<br/>);<br/>});<br/>}<br/>

    View Slide

  51. “Donezo.
    I am so smart.”
    — Javascript Wizards

    View Slide

  52. View Slide

  53. WONK WONK.
    Double Download

    View Slide

  54. View Slide

  55. 16kb + 46kb = 62kb (+33% Not ideal, but maybe okay)

    View Slide

  56. @56 Images: 896kb + 2.576MB = 3.472MB

    View Slide

  57. Other paths
    spacer.gif
    Background-images
    Elements
    Servers and cookies
    Network Detection

    View Slide

  58. Les candidats
    @srcset

    View Slide

  59. N
    CHALLENGER
    APPROACHING
    A new foe has appeared!

    View Slide

  60. Les candidats
    @srcset

    srcN

    View Slide

  61. @srcset
    Based on the CSS4 image-set() value
    Proposed by Apple® on May 10th, 2012

    View Slide

  62. src="banner.jpeg"
    srcset="banner-HD.jpeg 2x,
    banner-phone.jpeg 100w,
    banner-phone-HD.jpeg 100w 2x">
    @srcset syntax

    View Slide

  63. View Slide

  64. LATE BREAKING NEWS
    IN AUGUST, WEBKIT SHIPPED @SRCSET WITHOUT THAT
    WEIRD ‘600w’ SYNTAX. WILL LIKELY BE DROPPED.

    View Slide

  65. src="banner.jpeg"
    srcset="[email protected] 2x,
    [email protected] 3x">
    *CURRENT* @srcset syntax

    View Slide

  66. 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

    View Slide


  67. Proposed by the Responsive Images Community Group
    on May 11th, 2012

    View Slide






  68. syntax

    View Slide

  69. 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

    View Slide

  70. Picturefill
    https://github.com/scottjehl/picturefill
    Start using the picture element today!

    View Slide

  71. BREAKING NEWS
    HAS BEEN RELEGATED TO BEING A “NOTE” ON
    THE NEW SRC-N PROPOSAL.

    View Slide


  72. “It’s icky”
    - Browsers

    “It’s icky”
    - Browsers

    View Slide

  73. srcN
    Proposed by Tab Atkins (Google)
    on September 25th, 2013

    View Slide






  74. syntax

    View Slide

  75. 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

    View Slide

  76. Variable sized images

    View Slide

  77. 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

    View Slide

  78. 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?

    View Slide

  79. “Sure, fuck it,
    whatever…”
    — A wise developer one time

    View Slide

  80. ch
    CHALLENGER
    APPROACHING
    A new foe has appeared!

    View Slide

  81. Client Hints
    Proposed by Ilya Grigorik (Google)
    ––enable-client-hints

    View Slide

  82. GET /img.jpg HTTP/1.1
    !
    Accepts: image/jpg
    CH-DPR: 2.0
    CH-RW: 160
    How a client hinted browser requests an image

    View Slide

  83. Detects DPR >= 1.5

    View Slide

  84. GET /img.jpg HTTP/1.1
    !
    Accepts: image/webp, image/jpg
    CH-DPR: 2.0
    CH-RW: 160
    How a Blink requests an image

    View Slide

  85. Detects WebP support

    View Slide

  86. View Slide

  87. 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"
    />

    View Slide

  88. src-1="(min-width: 45em) large.jpg"
    src-2="(min-width: 18em) med.jpg"
    src-3="small.jpg"
    />

    View Slide

  89. rif
    CHALLENGER
    APPROACHING
    A new foe has appeared!

    View Slide

  90. Responsive
    Image Format
    Proposed by Yoav Weiss

    View Slide

  91. View Slide

  92. View Slide

  93. “Got any
    sweet hacks,
    Brovidence?”
    — Surfer dudes (from Rhode Island)

    View Slide

  94. Images as a Service
    src.sencha.io
    jetpack.me/photon
    resrc.it
    responsive.io
    adaptive-images.com

    View Slide

  95. src='http://src.sencha.io/http://sencha.com/files/u.jpg'
    alt='My smaller image'
    />

    View Slide

  96. Strengths
    One image tag
    Legacy sites
    Weaknesses
    Blackbox
    What if these services shut down?
    What if you switch platforms?

    View Slide

  97. 1.5x Hack
    For Medium Importance images

    View Slide

  98. View Slide

  99. Strengths
    One image
    Weaknesses
    Penalizes small screen users

    View Slide

  100. Compressive

    Images
    The following is some black effin’ magic.
    Put on your robes and wizard hat...

    View Slide

  101. View Slide

  102. View Slide

  103. Strengths
    One image
    Weaknesses
    Memory intensive, esp. on phones
    Save as... pixelated

    View Slide

  104. Clown Car
    Crafted by Estelle Weyl

    View Slide


  105. View Slide


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

    View Slide

  107. Strengths
    Simple
    Element Query
    Weaknesses
    Make SVG for every image set

    View Slide

  108. Lots o’ options
    Above all, use your brain and pick
    what’s best for your project.

    View Slide

  109. “!anks!”
    Dave Rupert
    @davatron5000
    github.com/davatron5000

    View Slide