Responsive images in da house

Andrea de Carolis racconta il disagio di produrre delle immagini responsive (e il pensiero che c’è dietro) e di come questo disagio si sposa benissimo con il quello raccontato dal mondo rap. (http://www.fevr.it/responsive-images-da-house/)

Transcript

2. @decarola
3. Immagini responsive
4. Modo
6. Immagini responsive
7. • Best New Web Technology • Best Collaborative Project
8. RWD
9. • CSS Media queries • Griglie fluide • Immagini flessibili RWD
10. Ada are all’ambiente
11. • Densità di pixel
12. • Densità di pixel • Molteplici layout
15. • Densità di pixel • Molteplici layout • Stesso rapporto, diversa risoluzione
18. • Densità di pixel • Molteplici layout • Stesso rapporto, diversa risoluzione. • Art direction (crop)
22. • Densità di pixel • Molteplici layout • Stesso rapporto, diversa risoluzione. • Art direction (crop) • Formati esotici
23. APNG WEBP
24. • Densità di pixel • Molteplici layout • Stesso rapporto, diversa risoluzione. • Art direction (crop) • Formati esotici • Preload
25. Style faster than your CSS
26. 63% h p://h parchive.org/interesting.php#bytesperpage
27. Più veloce ~20%
28. Preload
29. Preload
30. Can I kick it?
33. SVG
34. Slow and low
35. Clown Car
36. Estelle Weyl
37. <img src="resp-images.svg" alt="blabla">
38. <img src="resp-images.svg" alt="blabla">
39. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329"> <title>The Clown Car Technique</title> <defs> <style> image {display: none;} #small {display: block} @media screen and (min-width: 401px) and (max-width: 700px) { #medium {display: block} #small {display: none} } @media screen and (min-width: 701px) and (max-width: 1000px) { #big {display: block} #small {display: none} } @media screen and (min-width: 1001px) { #huge {display: block} #small {display: none;} } </style> </defs> <g> <image id="small" height="329" width="300" xlink:href="images/small.png" /> <image id="medium" height="329" width="300" xlink:href="images/medium.png" /> <image id="big" height="329" width="300" xlink:href="images/big.png" /> <image id="huge" height="329" width="300" xlink:href="images/huge.png" /> </g> </svg>
40. <g> <image id="small" height="329" width="300" xlink:href="images/small.png" /> <image id="medium" height="329" width="300" xlink:href="images/medium.png" /> <image id="big" height="329" width="300" xlink:href="images/big.png" /> <image id="huge" height="329" width="300" xlink:href="images/huge.png" /> </g>
41. <defs> <style> image {display: none;} #small {display: block} @media screen and (min-width: 401px) and (max-width: 700px) { #medium {display: block} #small {display: none} } @media screen and (min-width: 701px) and (max-width: 1000px) { #big {display: block} #small {display: none} } @media screen and (min-width: 1001px) { #huge {display: block} #small {display: none;} } </style> </defs>
42. <defs> <style> image {display: none;} #small {display: block} @media screen and (min-width: 401px) and (max-width: 700px) { #medium {display: block} #small {display: none} } @media screen and (min-width: 701px) and (max-width: 1000px) { #big {display: block} #small {display: none} } @media screen and (min-width: 1001px) { #huge {display: block} #small {display: none;} } </style> </defs>
43. <defs> <style> image {display: none;} #small {display: block} @media screen and (min-width: 401px) and (max-width: 700px) { #medium {display: block} #small {display: none} } @media screen and (min-width: 701px) and (max-width: 1000px) { #big {display: block} #small {display: none} } @media screen and (min-width: 1001px) { #huge {display: block} #small {display: none;} } </style> </defs>
44. <defs> <style> image {display: none;} #small {display: block} @media screen and (min-width: 401px) and (max-width: 700px) { #medium {display: block} #small {display: none} } @media screen and (min-width: 701px) and (max-width: 1000px) { #big {display: block} #small {display: none} } @media screen and (min-width: 1001px) { #huge {display: block} #small {display: none;} } </style> </defs>
45. <defs> <style> image {display: none;} #small {display: block} @media screen and (min-width: 401px) and (max-width: 700px) { #medium {display: block} #small {display: none} } @media screen and (min-width: 701px) and (max-width: 1000px) { #big {display: block} #small {display: none} } @media screen and (min-width: 1001px) { #huge {display: block} #small {display: none;} } </style> </defs>
46. Preload, motherf*#ker
47. <svg xmlns="http://www.w3.org/2000/svg"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } svg { background-image: url(images/small.png); } @media screen and (min-width: 768px) { svg { background-image: url(images/medium.png); } } </style> </svg>
48. CSP content security policy
49. <object data="resp-img.svg" type="image/svg+xml"></object>
50. <object data="resp-img.svg" type="image/svg"> <img src="fallback.png" alt="IE love"> </object>
51. <object data="resp-img.svg" type="image/svg+xml"> <!--[if lte IE 8]> <img src="fallback.png" alt="IE love"> <![endif]--> </object>
52. <object data="data:image/svg+xml,<svg viewport=[…]” type="image/svg+xml"> <!--[if lte IE 8]> <img src="fallback.png" alt="IE love"> <![endif]--> </object>
53. <object data="data:image/svg+xml,%3Csvg%20viewBox=0%200%203[…]" type="image/svg+xml"> <!--[if lte IE 8]> <img src="fallback.png" alt="IE love"> <![endif]--> </object>
55. It’s tricky
56. srcset
57. • Proporzioni uguali • Dimensioni diverse • Retina srcset
62. <img src="narcos.jpg" alt="Noyz Narcos"/>
63. <img src="narcos.jpg" srcset="narcos.jpg, narcos@2x.jpg 2x" alt="Noyz Narcos"/>
64. <img src="narcos.jpg" srcset="narcos.jpg, narcos@2x.jpg 2x" alt="Noyz Narcos"/>
65. Suggerimento
66. Suggerimento
67. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" alt="Noyz Narcos"/>
68. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" alt="Noyz Narcos"/>
75. Schermo più grande ≠ Immagine più grande
76. sizes
77. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" sizes="(min-width: 900px) 32vw, (min-width: 600px) 50vw, 100vw" alt="Noys Narcos"/>
78. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" sizes="(min-width: 900px) 32vw, (min-width: 600px) 50vw, 100vw" alt="Noys Narcos"/>
79. src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" sizes="(min-width: 900px) 32vw, (min-width: 600px) 50vw, 100vw" alt="Noys Narcos"/>
80. Prima condizione valida
81. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" sizes="(min-width: 900px) 32vw, (min-width: 600px) 50vw, 100vw" alt="Noys Narcos"/>
82. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" sizes="(min-width: 900px) 32vw, (min-width: 600px) 50vw, 100vw" alt="Noys Narcos"/>
83. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" sizes="(min-width: 900px) 32vw, (min-width: 600px) 50vw, 100vw" alt="Noys Narcos"/>
84. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" sizes="(min-width: 900px) 32vw, (min-width: 600px) 50vw, 100vw" alt="Noys Narcos"/>
85. Coolio!
87. Contenuto - Presentazione
88. HTML - CSS
89. Preload
90. Compromesso
91. <picture>
92. Art directed
93. Art directed
94. Suggerimento Dire iva
95. <picture> <source media="(min-width: 900px)" srcset="d12-large.jpg"> <source media="(min-width: 750px)" srcset="d12-med.jpg"> <img src="d12-small.jpg" alt="D12"> </picture>
96. <picture> <source media="(min-width: 900px)" srcset="d12-large.jpg"> <source media="(min-width: 750px)" srcset="d12-med.jpg"> <img src="d12-small.jpg" alt="D12"> </picture>
97. <picture> <source media="(min-width: 900px)" srcset="d12-large.jpg"> <source media="(min-width: 750px)" srcset="d12-med.jpg"> <img src="d12-small.jpg" alt="D12"> </picture>
98. <picture> <source media="(min-width: 900px)" srcset="d12-large.jpg"> <source media="(min-width: 750px)" srcset="d12-med.jpg"> <img src="d12-small.jpg" alt="D12"> </picture>
99. <source media="(min-width: 900px)" srcset="d12-large.jpg">
100. Shopify
102. <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset=“https://cdn.shopify.com/[...]/muttonhead-feature@desktop-[...].png 1x, https://cdn.shopify.com/[...]/muttonhead-feature@desktop-2x-[...].png 2x" media="(min-width: 990px)"> <source srcset="https://cdn.shopify.com/[...]/muttonhead-feature@tablet-[...].png 1x, https://cdn.shopify.com/[...]/muttonhead-feature@tablet-2x-[...].png 2x" media="(min-width: 750px)"> <!--[if IE 9]></video><![endif]--> <img srcset="https://cdn.shopify.com/[...]/muttonhead-feature@mobile-[...].png 1x, https://cdn.shopify.com/[...]/muttonhead-feature@mobile-2x-[...].png 2x" alt="Shopify online store" class="">
103. Bonus track
104. type
105. • WEBP • APNG • JPEG-2000 • JPEG-XR
106. • WEBP • APNG • JPEG-2000 • JPEG-XR
107. <source type="image/webp" srcset="d12.webp">
108. <picture> <source type="image/webp" media="(min-width: 900px)" srcset="d12-large.webp"> <source media="(min-width: 900px)" srcset="d12-large.jpg"> <source media="(min-width: 750px)" srcset="d12-med.jpg"> <img src="d12-small.jpg" alt="D12"> </picture>
109. <picture> <source type="image/webp" media="(min-width: 900px)" srcset="d12-large.webp"> <source media="(min-width: 900px)" srcset="d12-large.jpg"> <source media="(min-width: 750px)" srcset="d12-med.jpg"> <img src="d12-small.jpg" alt="D12"> </picture>
110. <picture> <source type="image/webp" media="(min-width: 900px)" srcset="d12-large.webp"> <source media="(min-width: 900px)" srcset="d12-large.jpg"> <source media="(min-width: 750px)" srcset="d12-med.jpg"> <img src="d12-small.jpg" alt="D12"> </picture>
111. Sintesi
112. SVG
113. <object data="data:image/svg+xml,%3Csvg%20viewBox=0%200%203[…]" type="image/svg+xml"> <!--[if lte IE 8]> <img src="fallback.png" alt="IE love"> <![endif]--> </object> SVG
114. <object data="data:image/svg+xml,%3Csvg%20viewBox=0%200%203[…]" type="image/svg+xml"> <!--[if lte IE 8]> <img src="fallback.png" alt="IE love"> <![endif]--> </object> SVG
115. srcset
116. srcset <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" sizes="(min-width: 900px) 32vw, (min-width: 600px) 50vw, 100vw" alt="Noys Narcos"/>
117. <picture>
118. <picture> <picture> <source media="(min-width: 900px)" srcset="d12-large.jpg"> <source media="(min-width: 750px)" srcset="d12-med.jpg"> <img src="d12-small.jpg" alt="D12"> </picture>
120. h p://dpi.lv
121. Come preparo le immagini?
122. Size ma ers
141. Client Hints
142. Server side
143. Content negotiation
144. • DPR • Viewport-Width • Width • Downlink • Save-Data
145. • DPR • Viewport-Width • Width • Downlink • Save-Data
146. • DPR • Viewport-Width • Width • Downlink • Save-Data
147. • DPR • Viewport-Width • Width • Downlink • Save-Data
148. • DPR • Viewport-Width • Width • Downlink • Save-Data
149. • DPR • Viewport-Width • Width • Downlink • Save-Data
150. Client Server
153. Lyri-css
161. Grazie
162. Grazie • Tigre e Emmaboshi per il rap • Le immagini le ho prese malamente su Google,
 chiedo scusa se ho violato qualche copyright • Presto sarà tu o online, promesso