Cura l'immagine. Nel RWD le dimensioni contano.

Eaf6bcd3b320c1167f2522470d0e3e26?s=47 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.

Eaf6bcd3b320c1167f2522470d0e3e26?s=128

decarola

September 27, 2015
Tweet

Transcript

  1. Cura l’immagine. Nel RWD le dimensioni contano Andrea De Carolis

    Modo !"#$%&'()*+(&,'(
  2. 1. Intro

  3. Andrea De Carolis @decarola

  4. Modo @madebymodo

  5. None
  6. Immagini responsive

  7. None
  8. None
  9. None
  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.
  11. 1. Intro 2. Viva la resolution 3. Art direction 4.

    Exit through the gi shop
  12. Responsive Web Design

  13. Griglia fluida CSS media queries Immagini flessibili

  14. Immagini responsive

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

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

  17. Pletora di dispositivi

  18. Retina

  19. h p://dpi.lv

  20. Ad ognuno la sua

  21. None
  22. None
  23. Schermo più grande ≠ Immagine più grande

  24. Dimensione immagine in pagina

  25. Estensioni esotiche

  26. APNG

  27. WEBP

  28. Prefetching

  29. None
  30. None
  31. None
  32. <img>

  33. Tipologie di utilizzo

  34. 1. Risoluzione

  35. None
  36. None
  37. None
  38. None
  39. proporzioni uguali dimensioni diverse

  40. 2. Art directed

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

  42. None
  43. None
  44. None
  45. Vector

  46. Riassunto

  47. 1. Grandezza schermo ≠ grandezza immagine 2. Prefetching 3. Img

    responsive che cambiano solo risoluzione 4. Img responsive che cambiano risoluzione & contenuto
  48. 2. Viva la resolution

  49. srcset

  50. Suggerimento

  51. <img  src=“roger.jpg”  alt=“Roger  Federer”/>

  52. <img     src=“roger.jpg”     srcset=“roger-­‐320.jpg  320w,    

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

               roger@2x.jpg  2x”   alt=“Roger  Federer”/>
  54. <img     src=“roger.jpg”     srcset=“roger-­‐320.jpg  320w,    

           roger-­‐640.jpg  640w,          roger-­‐840.jpg  840w,          roger-­‐1100.jpg  1100w”   alt=“Roger  Federer”/>
  55. None
  56. None
  57. Prefetching

  58. sizes

  59. <img  src=“roger.jpg”     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”  />
  60. Prima condizione valida.

  61. <img  src=“https://[blabla]/img/media/[blabla]/3417.jpg”     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.">
  62. <img  src=“https://[blabla]/img/media/[blabla]/3417.jpg”     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.">
  63. <img  src=“https://[blabla]/img/media/[blabla]/3417.jpg”     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.">
  64. <img  src=“https://[blabla]/img/media/[blabla]/3417.jpg”     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.">
  65. Cool? Cool.

  66. Obiezione

  67. Dovremmo separare contenuto e presentazione

  68. Prefetching

  69. Compromesso

  70. Sintesi

  71. <img  src=“roger.jpg”  alt=“Roger  Federer”     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”/>
  72. <img> tag di default <img  src=“roger.jpg”  alt=“Roger  Federer”    

    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”/>
  73. <img> tag di default srcset con immagini e dimensioni dichiarate

    <img  src=“roger.jpg”  alt=“Roger  Federer”     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”/>
  74. <img> tag di default srcset con immagini e dimensioni dichiarate

    sizes per dichiarare lo spazio nel layout <img  src=“roger.jpg”  alt=“Roger  Federer”     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”/>
  75. Esercizio 1.

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

  77. browser 800px immagine 260px

  78. browser 1200px immagine larga 380px

  79. <img  src=“pluto.jpg”  alt=“Pluto”              srcset=“”

                 sizes=“”/>
  80. usano solo un <img>

  81. @wired

  82. 3. Art directed

  83. 3. Art directed

  84. Suggerimento Dire iva

  85. <picture>

  86. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  87. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  88. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  89. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. <picture>      <source          srcset=“homepage@desktop.png,  homepage@desktop-­‐2x.png

     2x"                media="(min-­‐width:  990px)”>      <source          srcset="homepage@tablet.png,  homepage@tablet-­‐2x.png  2x”        media="(min-­‐width:  750px)">      <img  src=“homepage@mobile.png"                  srcset=“homepage@mobile.png,                                  homepage@mobile-­‐2x.png  2x"                  alt="Shopify  Merchant,  Corrine  Anestopoulos">   </picture>
  97. Bonus

  98. type

  99. JPEG-2000 WEBP JPEG-XR APNG

  100. <source  type="image/webp"  srcset="logo.webp">  

  101. <picture>      <source  type="image/webp"          

                 media="(min-­‐width:  900px)"                        srcset="roger-­‐backhand.webp">        <source  media="(min-­‐width:  900px)"                        srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg">      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  102. Sintesi

  103. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  104. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture> 1. tag <picture>
  105. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture> 1. tag <picture> 2. tag <img>
  106. 1. tag <picture> 2. tag <img> 3. serie di <source>

    con media e srcset <picture>      <source  media="(min-­‐width:  900px)”                      srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  107. 1. tag <picture> 2. tag <img> 3. serie di <source>

    con media e srcset <picture>      <source  media="(min-­‐width:  900px)”                      srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  108. Esercizio 2

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

  110. browser 800px immagine Ello larga 150px

  111. browser 1200px immagine Ello 160px

  112. Usano <picture>

  113. Niente tweet :-)

  114. 4.

  115. IE?

  116. None
  117. None
  118. None
  119. None
  120. Come preparo le immagini?

  121. Le dimensioni contano

  122. None
  123. None
  124. h p://responsivizr.com/

  125. <img  src=“roger.jpg”     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
  126. <picture> <picture>    <source  media="(min-­‐width:  900px)”  srcset="backhand.jpg">    <source  media="(min-­‐width:

     750px)”  srcset=“serve.jpg">    <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  127. Esercizio 3

  128. Su mobile (default) foto quadrata.

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

  130. None
  131. <picture>    <source  media="[…]”  srcset=“[…]">    <img  src="cruciani-­‐small.jpg"  alt=“Cruciani  in

     onda”            srcset=“[…]”   />   </picture> Risultato sarà qualcosa come:
  132. Per la soluzione

  133. Page source :-)

  134. Grazie.