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
   

   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,
    narcos@2x.jpg 2x"
    alt="Noyz Narcos"/>
    

    View Slide

59. src="narcos.jpg"
    srcset="narcos.jpg,
    narcos@2x.jpg 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