The Big Picture: Responsive Images in Action #devcon13

Although responsive designs are already state-of-the-art in web development the whole trend still is in its infancy. When it comes to images, a lot of responsive websites just load the same big image on every viewport. Because of this, people judge responsive design as being detrimental to performance. New markup elements like are under discussion right now but what are the alternatives, what is the best to use right now, and how do they work? I will lead you through the different techniques and polyfills and show you their pros and cons. After this talk you should be able to choose the best fitting responsive image solution for your project.

Transcript

1. THE BIG
   PICTURE .
   responsive
   images
   in action
   PRESENTED BY MATTHIAS LAU
   

   View Slide

2. {
   name: "Matthias Lau",
   link: "http://laumatthias.de",
   twitter: "@matthiaslau",
   hometown: {
   name: "Hamburg, Germany"
   },
   bio: "E-Commerce Freak and Web-Allrounder, love coding,
   awesome internet concepts, Chrome, Web Frameworks, Evernote,
   the Apple Multi-Touch Trackpad, Bouldering, Wikipedia and
   Espresso.",
   work: {
   employer: {
   name: "Jimdo"
   },
   },
   }
   

   View Slide

3. View Slide

4. View Slide

5. A LOT!
   OPTIMIZED
   THEY
   

   View Slide

6. !
   FOR SMALL VIEWPORTS
   LARGE IMAGES
   STILL...
   

   View Slide

7. !
   WANT!
   WE
   WHAT
   

   View Slide

8. IMAGES
   OPTIMIZED
   

   View Slide

9. IMAGES
   OPTIMIZED
   

   View Slide

10. IMAGES
    OPTIMIZED
    

    View Slide

11. !
    DIRECTION
    ART
    

    View Slide

12. View Slide

13. View Slide

14. !
    IMAGES
    FAST
    

    View Slide

15. !
    JAVASCRIPT
    IT SHOULD
    ALSO WORK WITHOUT
    

    View Slide

16. CACHING / CDN
    

    View Slide

17. 
    !
    CODE
    SIMPLE
    

    View Slide

18. TECHNIQUES
    RESPONSIVE IMAGE
    http://matthiaslau.github.io/responsive-images/
    

    View Slide

19. SVG´s
    USE
    

    View Slide

20. BACKGROUNDS
    CSS
    

    View Slide

21. BACKGROUNDS
    CSS
    #iguazu  {  
         background-­‐image:  url(small.jpg);  
    }  
    @media  screen  and  (min-­‐width:  601px)  {  
         #iguazu  {  
               background-­‐image:  url(medium.jpg);  
         }  
    }
    

    View Slide

22. SIMPLE CODE
    FAST
    NOJS
    CACHING / CDN
    ART DIRECTION
    

    View Slide

23. IT IS A CSS IMAGE
    

    View Slide

24. 
    ACCESSIBILITY
    

    View Slide

25. CARS
    CLOWN
    

    View Slide

26. 
    

    View Slide

27.  
         Iguazu  Waterfalls  
           <br/>            @media  screen  and  (max-­‐width:300px){  <br/>                  svg{  <br/>                        background-­‐image:url(http://localhost:8010/<br/>responsive_images/img/small.jpg);  <br/>                  }  <br/>            }  <br/>            @media  screen  and  (min-­‐width:301px){  <br/>                  […]  <br/>            }  <br/>        
    
    

    View Slide

28. security  drawbacks  -­‐-­‐>  
    request  -­‐-­‐>  
    type="image/svg+xml">  
             
             
             
             
    
    

    View Slide

29. SIMPLE CODE
    FAST
    NOJS
    CACHING / CDN
    ART DIRECTION
    

    View Slide

30. ADAPTIVE IMAGES
    RESS /
    http://adaptive-images.com/
    

    View Slide

31. JS
    Cookie
    viewport width
    

    View Slide

32. .htaccess
    image request Scaling
    Logic
    best fitting image
    Cookie
    

    View Slide

33. SIMPLE CODE
    FAST
    NOJS
    CACHING / CDN
    ART DIRECTION
    

    View Slide

34. RESIZING
    SERVICES
    

    View Slide

35. http://src.sencha.io/320/200/http://[...]/huge-­‐hd.jpg
    RESIZING
    SERVICES
    http://www.sencha.com/learn/how-to-use-src-sencha-io/
    

    View Slide

36.  
    !
           src='http://src.sencha.io/wiw/http://[...]/huge-­‐
    hd.jpg'  
           alt='Iguazu  Waterfalls'  
           />
    RESIZING
    SERVICES
    

    View Slide

37. SIMPLE CODE
    FAST
    NOJS
    CACHING / CDN
    ART DIRECTION
    

    View Slide

38. ELEMENT
    PICTURE
    SRCSET
    +
    

    View Slide

39.  
             
             
             
             
             
           Iguazu  
    
    

    View Slide

40.                  src="small.jpg"  
                     srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">
    

    View Slide

41.  
           srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">  
             
             
             
             
           Iguazu  
    
    

    View Slide

42. <3
    

    View Slide

43. SIMPLE CODE
    FAST
    NOJS
    CACHING / CDN
    ART DIRECTION
    

    View Slide

44. NO BROWSER
    SUPPORT YET
    

    View Slide

45. View Slide

46. View Slide

47. PICTUREFILL
    https://github.com/Wilto/picturefill-proposal
    https://github.com/scottjehl/picturefill
    

    View Slide

48. View Slide

49. SIMPLE CODE
    FAST
    NOJS
    CACHING / CDN
    ART DIRECTION
    

    View Slide

50. MORE
    THERE IS EVEN
    HiSRC
    Foresight.js
    Riloadr rwdImages
    Retina.js
    Responsive Enhance
    Doubletake
    Content Aware Resizing
    https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0
    Mobify..js
    

    View Slide

51. WHAT?
    a summary
    NOW
    

    View Slide

52. WHERE POSSIBLE CSS IMAGES
    OTHER PICTUREFILL
    + SVG´s
    

    View Slide

53. SOMETHING
    USE
    please
    

    View Slide

54. PROCESS
    THE
    with grunt
    

    View Slide

55. grunt
    original
    

    View Slide

56. https://github.com/andismith/grunt-responsive-images
    options:  {  
         sizes:  [  
               {  
                     name:  "s",  
                     width:  320,  
                     quality:  0.6  
               },  
               {  
                     name:  "s",  
                     suffix:  "x2",  
                     width:  640,  
                     quality:  0.6  
               },  
           […]                                              
         ]  
    },
    files:  [{  
         expand:  true,  
         cwd:  'img/',  
         src:  ['*.{jpg,gif,png}'],  
         dest:  'img/generated/'  
    }]
    

    View Slide

57. „Don't click this if on a 3G
    network, it probably take
    forever, just check it out when
    you get home.“
    

    View Slide

58. CONTEXT-BASED
    IMAGES
    forecast:
    

    View Slide

59. QUESTIONS?
    http://twitter.com/matthiaslau
    http://laumatthias.de/
    https://www.xing.com/profile/Matthias_Lau
    

    View Slide