Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive images - css day 2016

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.

decarola

March 25, 2016
Tweet

More Decks by decarola

Other Decks in Technology

Transcript

  1. Immagini responsive

    View Slide

  2. Modo

    View Slide

  3. • Best New Web Technology
    • Best Collaborative Project

    View Slide

  4. RWD

    View Slide

  5. • CSS Media queries
    • Griglie fluide
    • Immagini flessibili
    RWD

    View Slide

  6. Ada are all’ambiente

    View Slide

  7. • Densità di pixel

    View Slide

  8. • Densità di pixel
    • Molteplici layout

    View Slide

  9. View Slide

  10. View Slide

  11. • Densità di pixel
    • Molteplici layout
    • Stesso rapporto, diversa risoluzione

    View Slide

  12. View Slide

  13. View Slide

  14. • Densità di pixel
    • Molteplici layout
    • Stesso rapporto, diversa risoluzione.
    • Art direction (crop)

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. • Densità di pixel
    • Molteplici layout
    • Stesso rapporto, diversa risoluzione.
    • Art direction (crop)
    • Formati esotici

    View Slide

  19. APNG
    WEBP

    View Slide

  20. • Densità di pixel
    • Molteplici layout
    • Stesso rapporto, diversa risoluzione.
    • Art direction (crop)
    • Formati esotici
    • Preload

    View Slide

  21. Style faster than
    your CSS

    View Slide

  22. 63%
    h p://h parchive.org/interesting.php#bytesperpage

    View Slide

  23. Più veloce ~20%

    View Slide

  24. View Slide

  25. Can I kick it?

    View Slide

  26. View Slide

  27. View Slide

  28. SVG

    View Slide

  29. Slow and low

    View Slide

  30. Clown Car

    View Slide

  31. Estelle Weyl

    View Slide


  32. View Slide


  33. View Slide


  34. The Clown Car Technique

    <br/>image {display: none;}<br/>#small {display: block}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>#medium {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>#big {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>#huge {display: block}<br/>#small {display: none;}<br/>}<br/>








    View Slide







  35. View Slide


  36. <br/>image {display: none;}<br/>#small {display: block}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>#medium {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>#big {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>#huge {display: block}<br/>#small {display: none;}<br/>}<br/>

    View Slide


  37. <br/>image {display: none;}<br/>#small {display: block}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>#medium {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>#big {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>#huge {display: block}<br/>#small {display: none;}<br/>}<br/>

    View Slide


  38. <br/>image {display: none;}<br/>#small {display: block}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>#medium {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>#big {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>#huge {display: block}<br/>#small {display: none;}<br/>}<br/>

    View Slide


  39. <br/>image {display: none;}<br/>#small {display: block}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>#medium {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>#big {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>#huge {display: block}<br/>#small {display: none;}<br/>}<br/>

    View Slide


  40. <br/>image {display: none;}<br/>#small {display: block}<br/>@media screen and (min-width: 401px) and (max-width: 700px) {<br/>#medium {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 701px) and (max-width: 1000px) {<br/>#big {display: block}<br/>#small {display: none}<br/>}<br/>@media screen and (min-width: 1001px) {<br/>#huge {display: block}<br/>#small {display: none;}<br/>}<br/>

    View Slide

  41. Preload, motherf*#ker

    View Slide


  42. Clown Car Technique
    <br/>svg {<br/>background-size: 100% 100%;<br/>background-repeat: no-repeat;<br/>}<br/>svg {<br/>background-image: url(images/small.png);<br/>}<br/>@media screen and (min-width: 768px) {<br/>svg {<br/>background-image: url(images/medium.png);<br/>}<br/>}<br/>

    View Slide

  43. CSP
    Content Security Policy

    View Slide

  44. type="image/svg+xml">

    View Slide




  45. View Slide




  46. View Slide




  47. View Slide

  48. data="data:image/svg+xml,%3Csvg%20viewBox=0%200%203[…]"
    type="image/svg+xml">


    View Slide

  49. View Slide

  50. It’s tricky

    View Slide

  51. srcset

    View Slide

  52. • Proporzioni uguali
    • Dimensioni diverse
    • Retina
    srcset

    View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide


  57. View Slide

  58. src="narcos.jpg"
    srcset="narcos.jpg,
    [email protected] 2x"
    alt="Noyz Narcos"/>

    View Slide

  59. src="narcos.jpg"
    srcset="narcos.jpg,
    [email protected] 2x"
    alt="Noyz Narcos"/>

    View Slide

  60. Suggerimento

    View Slide

  61. src="narcos.jpg"
    srcset="narcos-320.jpg 320w,
    narcos-640.jpg 640w,
    narcos-840.jpg 840w,
    narcos-1100.jpg 1100w"
    alt="Noyz Narcos"/>

    View Slide

  62. src="narcos.jpg"
    srcset="narcos-320.jpg 320w,
    narcos-640.jpg 640w,
    narcos-840.jpg 840w,
    narcos-1100.jpg 1100w"
    alt="Noyz Narcos"/>

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. Schermo più grande

    Immagine più grande

    View Slide

  70. sizes
    Descrivono il comportamento
    dell’immagine del layout

    View Slide

  71. 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"/>

    View Slide

  72. 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"/>

    View Slide

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

    View Slide

  74. Prima condizione valida

    View Slide

  75. 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"/>

    View Slide

  76. 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"/>

    View Slide

  77. 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"/>

    View Slide

  78. 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"/>

    View Slide

  79. Coolio!

    View Slide

  80. View Slide

  81. Contenuto - Presentazione

    View Slide

  82. HTML - CSS

    View Slide

  83. Preload

    View Slide

  84. Compromesso

    View Slide


  85. View Slide

  86. Art directed

    View Slide

  87. Art directed

    View Slide

  88. Suggerimento
    Dire iva

    View Slide






  89. View Slide






  90. View Slide






  91. View Slide

  92. srcset="d12-large.jpg">

    View Slide






  93. View Slide

  94. Shopify

    View Slide

  95. View Slide


  96. srcset=“https://cdn.shopify.com/[...]/muttonhead-feature@desktop-[...].png 1x,
    https://cdn.shopify.com/[...]/muttonhead-feature@desktop-2x-[...].png 2x"
    media="(min-width: 990px)">
    srcset="https://cdn.shopify.com/[...]/muttonhead-feature@tablet-[...].png 1x,
    https://cdn.shopify.com/[...]/muttonhead-feature@tablet-2x-[...].png 2x"
    media="(min-width: 750px)">

    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="">

    View Slide

  97. Bonus track

    View Slide

  98. type

    View Slide

  99. • WEBP
    • APNG
    • JPEG-2000
    • JPEG-XR

    View Slide

  100. • WEBP
    • APNG
    • JPEG-2000
    • JPEG-XR

    View Slide


  101. View Slide







  102. View Slide







  103. View Slide







  104. View Slide

  105. Sintesi

    View Slide

  106. SVG

    View Slide

  107. data="data:image/svg+xml,%3Csvg%20viewBox=0%200%203[…]"
    type="image/svg+xml">


    SVG

    View Slide

  108. srcset

    View Slide

  109. srcset
    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"/>

    View Slide


  110. View Slide







  111. View Slide

  112. View Slide

  113. h p://dpi.lv

    View Slide

  114. Come preparo le immagini?

    View Slide

  115. Size ma ers

    View Slide

  116. View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. View Slide

  121. View Slide

  122. View Slide

  123. View Slide

  124. View Slide

  125. View Slide

  126. View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. View Slide

  131. View Slide

  132. View Slide

  133. View Slide

  134. Rap

    View Slide

  135. Lyri-css

    View Slide

  136. View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. View Slide

  141. View Slide

  142. View Slide

  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

    View Slide