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. 1.
  2. 4.
  3. 5.
  4. 8.

    RWD

  5. 13.
  6. 14.
  7. 16.
  8. 17.
  9. 18.

    • Densità di pixel • Molteplici layout • Stesso rapporto,

    diversa risoluzione. • Art direction (crop)
  10. 19.
  11. 20.
  12. 21.
  13. 22.

    • Densità di pixel • Molteplici layout • Stesso rapporto,

    diversa risoluzione. • Art direction (crop) • Formati esotici
  14. 23.
  15. 24.

    • Densità di pixel • Molteplici layout • Stesso rapporto,

    diversa risoluzione. • Art direction (crop) • Formati esotici • Preload
  16. 28.
  17. 29.
  18. 31.
  19. 32.
  20. 33.

    SVG

  21. 35.
  22. 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>
  23. 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>
  24. 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>
  25. 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>
  26. 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>
  27. 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>
  28. 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>
  29. 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>
  30. 54.
  31. 56.
  32. 58.
  33. 59.
  34. 60.
  35. 61.
  36. 69.
  37. 70.
  38. 71.
  39. 72.
  40. 73.
  41. 74.
  42. 76.
  43. 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"/>
  44. 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"/>
  45. 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"/>
  46. 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"/>
  47. 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"/>
  48. 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"/>
  49. 85.
  50. 86.
  51. 89.
  52. 91.
  53. 100.
  54. 101.
  55. 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="">
  56. 104.
  57. 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>
  58. 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>
  59. 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>
  60. 111.
  61. 112.

    SVG

  62. 115.
  63. 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"/>
  64. 117.
  65. 119.
  66. 123.
  67. 124.
  68. 125.
  69. 126.
  70. 127.
  71. 128.
  72. 129.
  73. 130.
  74. 131.
  75. 132.
  76. 133.
  77. 134.
  78. 135.
  79. 136.
  80. 137.
  81. 138.
  82. 139.
  83. 140.
  84. 151.
  85. 152.
  86. 153.
  87. 154.
  88. 155.
  89. 156.
  90. 157.
  91. 158.
  92. 159.
  93. 160.
  94. 161.
  95. 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