Pro Yearly is on sale from $80 to $50! »

Responsive images in da house

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
July 04, 2016

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/)

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

July 04, 2016
Tweet

Transcript

  1. None
  2. @decarola

  3. Immagini responsive

  4. Modo

  5. None
  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

  13. None
  14. None
  15. • Densità di pixel • Molteplici layout • Stesso rapporto,

    diversa risoluzione
  16. None
  17. None
  18. • Densità di pixel • Molteplici layout • Stesso rapporto,

    diversa risoluzione. • Art direction (crop)
  19. None
  20. None
  21. None
  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?

  31. None
  32. None
  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>
  54. None
  55. It’s tricky

  56. srcset

  57. • Proporzioni uguali • Dimensioni diverse • Retina srcset

  58. None
  59. None
  60. None
  61. None
  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"/>
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  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!

  86. None
  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

  101. None
  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>
  119. None
  120. h p://dpi.lv

  121. Come preparo le immagini?

  122. Size ma ers

  123. None
  124. None
  125. None
  126. None
  127. None
  128. None
  129. None
  130. None
  131. None
  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. None
  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

  151. None
  152. None
  153. Lyri-css

  154. None
  155. None
  156. None
  157. None
  158. None
  159. None
  160. None
  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