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.

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
6. Immagini responsive
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
23. Schermo più grande ≠ Immagine più grande
24. Dimensione immagine in pagina
25. Estensioni esotiche
26. APNG
27. WEBP
28. Prefetching
32. <img>
33. Tipologie di utilizzo
34. 1. Risoluzione
39. proporzioni uguali dimensioni diverse
40. 2. Art directed
41. h ps://www.flickr.com/photos/barackobamadotcom/5795228030/
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”/>
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>
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?
120. Come preparo le immagini?
121. Le dimensioni contano
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.)
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.