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

Responsive images - css day 2016

Eaf6bcd3b320c1167f2522470d0e3e26?s=47 decarola
March 25, 2016

Responsive images - css day 2016

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

Eaf6bcd3b320c1167f2522470d0e3e26?s=128

decarola

March 25, 2016
Tweet

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

  9. None
  10. None
  11. • Densità di pixel • Molteplici layout • Stesso rapporto,

    diversa risoluzione
  12. None
  13. None
  14. • Densità di pixel • Molteplici layout • Stesso rapporto,

    diversa risoluzione. • Art direction (crop)
  15. None
  16. None
  17. None
  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%

  24. None
  25. Can I kick it?

  26. None
  27. None
  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>
  49. None
  50. It’s tricky

  51. srcset

  52. • Proporzioni uguali • Dimensioni diverse • Retina srcset

  53. None
  54. None
  55. None
  56. None
  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"/>
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  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!

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

  95. None
  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>
  112. None
  113. h p://dpi.lv

  114. Come preparo le immagini?

  115. Size ma ers

  116. None
  117. None
  118. None
  119. None
  120. None
  121. None
  122. None
  123. None
  124. None
  125. None
  126. None
  127. None
  128. None
  129. None
  130. None
  131. None
  132. None
  133. None
  134. Rap

  135. Lyri-css

  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  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