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

Cura l'immagine. Nel RWD le dimensioni contano.

decarola
September 27, 2015

Cura l'immagine. Nel RWD le dimensioni contano.

Retina o non retina? Attributo srcset, elemento picture o clown car?. Progettare siti internet che funzionino indistintamente su dispositivi piccoli e grandi è già abbastanza complicato.

Sbagliare le dimensioni delle immagini potrebbe compromettere l’esperienza utente irrimediabilmente. Questo workshop fornisce una visione panoramica su svariate possibili soluzioni e si pone come obiettivo di chiarire una volta per tutte il cosa-usare-dove per quanto riguarda le immagini nel responsive web design.

Workshop fatto durante il Supernova festival il 27 settembre a Torino.

decarola

September 27, 2015
Tweet

More Decks by decarola

Other Decks in Technology

Transcript

  1. Cura l’immagine.
    Nel RWD le dimensioni contano
    Andrea De Carolis
    Modo
    !"#$%&'()*+(&,'(

    View Slide

  2. 1. Intro

    View Slide

  3. Andrea De Carolis
    @decarola

    View Slide

  4. Modo
    @madebymodo

    View Slide

  5. View Slide

  6. Immagini responsive

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Un metodo per fornire al browser
    più sorgenti di immagine tra cui scegliere
    a seconda della densità del desktop,
    dimensione dell’immagine nella pagina,
    o in generale di qualsiasi altro fa ore.

    View Slide

  11. 1. Intro
    2. Viva la resolution
    3. Art direction
    4. Exit through the gi shop

    View Slide

  12. Responsive Web Design

    View Slide

  13. Griglia fluida
    CSS media queries
    Immagini flessibili

    View Slide

  14. Immagini responsive

    View Slide

  15. 63%
    fonte: h p://h parchive.org/

    View Slide

  16. h p://alistapart.com/author/joshcleland

    View Slide

  17. Pletora di dispositivi

    View Slide

  18. Retina

    View Slide

  19. h p://dpi.lv

    View Slide

  20. Ad ognuno la sua

    View Slide

  21. View Slide

  22. View Slide

  23. Schermo più grande

    Immagine più grande

    View Slide

  24. Dimensione
    immagine in pagina

    View Slide

  25. Estensioni
    esotiche

    View Slide

  26. APNG

    View Slide

  27. WEBP

    View Slide

  28. Prefetching

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide


  32. View Slide

  33. Tipologie di utilizzo

    View Slide

  34. 1. Risoluzione

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. proporzioni uguali
    dimensioni diverse

    View Slide

  40. 2. Art directed

    View Slide

  41. h ps://www.flickr.com/photos/barackobamadotcom/5795228030/

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. Vector

    View Slide

  46. Riassunto

    View Slide

  47. 1. Grandezza schermo ≠ grandezza immagine
    2. Prefetching
    3. Img responsive che cambiano solo risoluzione
    4. Img responsive che cambiano risoluzione &
    contenuto

    View Slide

  48. 2. Viva la
    resolution

    View Slide

  49. srcset

    View Slide

  50. Suggerimento

    View Slide


  51. View Slide

  52. src=“roger.jpg”    
    srcset=“roger-­‐320.jpg  320w,    
           roger-­‐640.jpg  640w,  
           roger-­‐840.jpg  840w,  
           roger-­‐1100.jpg  1100w”  
    alt=“Roger  Federer”/>

    View Slide

  53. src=“roger.jpg”  
    srcset=“roger.jpg,    
                   [email protected]  2x”  
    alt=“Roger  Federer”/>

    View Slide

  54. src=“roger.jpg”    
    srcset=“roger-­‐320.jpg  320w,    
           roger-­‐640.jpg  640w,  
           roger-­‐840.jpg  840w,  
           roger-­‐1100.jpg  1100w”  
    alt=“Roger  Federer”/>

    View Slide

  55. View Slide

  56. View Slide

  57. Prefetching

    View Slide

  58. sizes

    View Slide

  59. srcset=“roger-­‐320.jpg  320w,    
                   roger-­‐640.jpg  640w,    
                   roger-­‐840.jpg  840w,    
           roger-­‐1100.jpg  1100w”  
    sizes=“(min-­‐width:  900px)  32vw,  
                 (min-­‐width:  600px)  50vw,    
                 100vw”  
    alt=“Roger  Federer”  />

    View Slide

  60. Prima condizione valida.

    View Slide

  61. srcset=“https://[blabla]/img/media/[blabla]/3417_w620.jpg  620w,  
                   https://[blabla]/img/media/[blabla]/3417_w700.jpg  700w,    
                   https://[blabla]/img/media/[blabla]/3417_w645.jpg  645w,  
                   https://[blabla]/img/media/[blabla]/3417_w465.jpg  465w"    
    sizes="(min-­‐width:  980px)  620px,    
                 (min-­‐width:  740px)  700px,    
                 (min-­‐width:  660px)  620px,    
                 (min-­‐width:  480px)  645px,    
                 465px"    
    alt="Roger  Federer  on  his  way  to  a  7-­‐6,  6-­‐3  victory  over  Novak  
    Djokovic  in  the  final  of  the  Cincinnati  Masters.">

    View Slide

  62. srcset=“https://[blabla]/img/media/[blabla]/3417_w620.jpg  620w,  
                   https://[blabla]/img/media/[blabla]/3417_w700.jpg  700w,    
                   https://[blabla]/img/media/[blabla]/3417_w645.jpg  645w,  
                   https://[blabla]/img/media/[blabla]/3417_w465.jpg  465w"    
    sizes="(min-­‐width:  980px)  620px,    
                 (min-­‐width:  740px)  700px,    
                 (min-­‐width:  660px)  620px,    
                 (min-­‐width:  480px)  645px,    
                 465px"    
    alt="Roger  Federer  on  his  way  to  a  7-­‐6,  6-­‐3  victory  over  Novak  
    Djokovic  in  the  final  of  the  Cincinnati  Masters.">

    View Slide

  63. srcset=“https://[blabla]/img/media/[blabla]/3417_w620.jpg  620w,  
                   https://[blabla]/img/media/[blabla]/3417_w700.jpg  700w,    
                   https://[blabla]/img/media/[blabla]/3417_w645.jpg  645w,  
                   https://[blabla]/img/media/[blabla]/3417_w465.jpg  465w"    
    sizes="(min-­‐width:  980px)  620px,    
                 (min-­‐width:  740px)  700px,    
                 (min-­‐width:  660px)  620px,    
                 (min-­‐width:  480px)  645px,    
                 465px"    
    alt="Roger  Federer  on  his  way  to  a  7-­‐6,  6-­‐3  victory  over  Novak  
    Djokovic  in  the  final  of  the  Cincinnati  Masters.">

    View Slide

  64. srcset=“https://[blabla]/img/media/[blabla]/3417_w620.jpg  620w,  
                   https://[blabla]/img/media/[blabla]/3417_w700.jpg  700w,    
                   https://[blabla]/img/media/[blabla]/3417_w645.jpg  645w,  
                   https://[blabla]/img/media/[blabla]/3417_w465.jpg  465w"    
    sizes="(min-­‐width:  980px)  620px,    
                 (min-­‐width:  740px)  700px,    
                 (min-­‐width:  660px)  620px,    
                 (min-­‐width:  480px)  645px,    
                 465px"    
    alt="Roger  Federer  on  his  way  to  a  7-­‐6,  6-­‐3  victory  over  Novak  
    Djokovic  in  the  final  of  the  Cincinnati  Masters.">

    View Slide

  65. Cool? Cool.

    View Slide

  66. Obiezione

    View Slide

  67. Dovremmo separare
    contenuto e presentazione

    View Slide

  68. Prefetching

    View Slide

  69. Compromesso

    View Slide

  70. Sintesi

    View Slide

  71. srcset=“roger-­‐320.jpg  320w,  roger-­‐640.jpg  640w,    
             roger-­‐840.jpg  840w,  roger-­‐1100.jpg  1100w”  
    sizes=“(min-­‐width:  900px)  32vw,  
                 (min-­‐width:  600px)  50vw,    
                 100vw”/>

    View Slide

  72. tag di default
    srcset=“roger-­‐320.jpg  320w,  roger-­‐640.jpg  640w,    
             roger-­‐840.jpg  840w,  roger-­‐1100.jpg  1100w”  
    sizes=“(min-­‐width:  900px)  32vw,  
                 (min-­‐width:  600px)  50vw,    
                 100vw”/>

    View Slide

  73. tag di default
    srcset con immagini e dimensioni dichiarate
    srcset=“roger-­‐320.jpg  320w,  roger-­‐640.jpg  640w,    
             roger-­‐840.jpg  840w,  roger-­‐1100.jpg  1100w”  
    sizes=“(min-­‐width:  900px)  32vw,    
                 (min-­‐width:  600px)  50vw,    
                 100vw”/>

    View Slide

  74. tag di default
    srcset con immagini e dimensioni dichiarate
    sizes per dichiarare lo spazio nel layout
    srcset=“roger-­‐320.jpg  320w,  roger-­‐640.jpg  640w,    
             roger-­‐840.jpg  840w,  roger-­‐1100.jpg  1100w”  
    sizes=“(min-­‐width:  900px)  32vw,  
                 (min-­‐width:  600px)  50vw,    
                 100vw”/>

    View Slide

  75. Esercizio 1.

    View Slide

  76. wired.com
    browser largo 400px
    immagine di plutone
    larga 330px

    View Slide

  77. browser 800px
    immagine 260px

    View Slide

  78. browser 1200px
    immagine larga 380px

    View Slide

  79.          srcset=“”    
             sizes=“”/>

    View Slide

  80. usano solo un

    View Slide

  81. @wired

    View Slide

  82. 3. Art directed

    View Slide

  83. 3. Art directed

    View Slide

  84. Suggerimento
    Dire iva

    View Slide


  85. View Slide

  86.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  87.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  88.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  89.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96.  
             srcset=“[email protected],  homepage@desktop-­‐2x.png  2x"          
         media="(min-­‐width:  990px)”>  
             srcset="[email protected],  homepage@tablet-­‐2x.png  2x”  
         media="(min-­‐width:  750px)">  
                     srcset=“[email protected],    
                                 homepage@mobile-­‐2x.png  2x"    
                 alt="Shopify  Merchant,  Corrine  Anestopoulos">  

    View Slide

  97. Bonus

    View Slide

  98. type

    View Slide

  99. JPEG-2000
    WEBP
    JPEG-XR
    APNG

    View Slide

  100.  

    View Slide

  101.  
                           media="(min-­‐width:  900px)"    
                       srcset="roger-­‐backhand.webp">    
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg">  
         

    View Slide

  102. Sintesi

    View Slide

  103.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  104.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    1. tag

    View Slide

  105.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    1. tag
    2. tag

    View Slide

  106. 1. tag
    2. tag
    3. serie di con media e srcset
     
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  107. 1. tag
    2. tag
    3. serie di con media e srcset
     
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  108. Esercizio 2

    View Slide

  109. wired.com
    browser largo 400px
    immagine di Ello
    larga 330px

    View Slide

  110. browser 800px
    immagine Ello
    larga 150px

    View Slide

  111. browser 1200px
    immagine Ello 160px

    View Slide

  112. Usano

    View Slide

  113. Niente tweet :-)

    View Slide

  114. 4.

    View Slide

  115. IE?

    View Slide

  116. View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. Come preparo le immagini?

    View Slide

  121. Le dimensioni contano

    View Slide

  122. View Slide

  123. View Slide

  124. h p://responsivizr.com/

    View Slide

  125. srcset=“roger-­‐320.jpg  320w,    
                   roger-­‐640.jpg  640w,    
         roger-­‐840.jpg  840w,    
         roger-­‐1100.jpg  1100w”  
    sizes=“(min-­‐width:  900px)  32vw,  
                 (min-­‐width:  600px)  50vw,    
                 100vw,”  
    alt=“Roger  Federer”  />
    srcset

    View Slide


  126.  
       
       
       

    View Slide

  127. Esercizio 3

    View Slide

  128. Su mobile (default)
    foto quadrata.

    View Slide

  129. Tablet e desktop
    foto re angolare
    (diverse dimens.)

    View Slide

  130. View Slide

  131.  
       
               srcset=“[…]”  
    />  

    Risultato sarà qualcosa come:

    View Slide

  132. Per la soluzione

    View Slide

  133. Page source :-)

    View Slide

  134. Grazie.

    View Slide