Responsive images - css day 2016

Panoramica sulle immagini repsonsive, questa volta completa, fatta al CSS-day 2016 a Faenza. Con pezzo rap alla fine.

Transcript

1. Immagini responsive
2. Modo
3. • Best New Web Technology • Best Collaborative Project
4. RWD
5. • CSS Media queries • Griglie fluide • Immagini flessibili RWD
6. Ada are all’ambiente
7. • Densità di pixel
8. • Densità di pixel • Molteplici layout
11. • Densità di pixel • Molteplici layout • Stesso rapporto, diversa risoluzione
14. • Densità di pixel • Molteplici layout • Stesso rapporto, diversa risoluzione. • Art direction (crop)
18. • Densità di pixel • Molteplici layout • Stesso rapporto, diversa risoluzione. • Art direction (crop) • Formati esotici
19. APNG WEBP
20. • Densità di pixel • Molteplici layout • Stesso rapporto, diversa risoluzione. • Art direction (crop) • Formati esotici • Preload
21. Style faster than your CSS
22. 63% h p://h parchive.org/interesting.php#bytesperpage
23. Più veloce ~20%
25. Can I kick it?
28. SVG
29. Slow and low
30. Clown Car
31. Estelle Weyl
32. <img src="resp-images.svg" alt="blabla">
33. <img src="resp-images.svg" alt="blabla">
34. <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>
35. <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>
36. <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>
37. <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>
38. <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>
39. <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>
40. <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>
41. Preload, motherf*#ker
42. <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>
43. CSP Content Security Policy
44. <object data="resp-img.svg" type="image/svg+xml"></object>
45. <object data="resp-img.svg" type="image/svg"> <img src="fallback.png" alt="IE love"> </object>
46. <object data="resp-img.svg" type="image/svg+xml"> <!--[if lte IE 8]> <img src="fallback.png" alt="IE love"> <![endif]--> </object>
47. <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>
48. <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>
50. It’s tricky
51. srcset
52. • Proporzioni uguali • Dimensioni diverse • Retina srcset
57. <img src="narcos.jpg" alt="Noyz Narcos"/>
58. <img src="narcos.jpg" srcset="narcos.jpg, narcos@2x.jpg 2x" alt="Noyz Narcos"/>
59. <img src="narcos.jpg" srcset="narcos.jpg, narcos@2x.jpg 2x" alt="Noyz Narcos"/>
60. Suggerimento
61. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" alt="Noyz Narcos"/>
62. <img src="narcos.jpg" srcset="narcos-320.jpg 320w, narcos-640.jpg 640w, narcos-840.jpg 840w, narcos-1100.jpg 1100w" alt="Noyz Narcos"/>
69. Schermo più grande ≠ Immagine più grande
70. sizes Descrivono il comportamento dell’immagine del layout
71. <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"/>
72. <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"/>
73. 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"/>
74. Prima condizione valida
75. <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"/>
76. <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"/>
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. Coolio!
81. Contenuto - Presentazione
82. HTML - CSS
83. Preload
84. Compromesso
85. <picture>
86. Art directed
87. Art directed
88. Suggerimento Dire iva
89. <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>
90. <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>
91. <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>
92. <source media="(min-width: 900px)" srcset="d12-large.jpg">
93. <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>
94. Shopify
96. <!--[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="">
97. Bonus track
98. type
99. • WEBP • APNG • JPEG-2000 • JPEG-XR
100. • WEBP • APNG • JPEG-2000 • JPEG-XR
101. <source type="image/webp" srcset="d12.webp">
102. <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>
103. <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>
104. <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>
105. Sintesi
106. SVG
107. <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
108. srcset
109. 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"/>
110. <picture>
111. <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>
113. h p://dpi.lv
114. Come preparo le immagini?
115. Size ma ers
134. Rap
135. Lyri-css
143. 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