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. RWD

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

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

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

    diversa risoluzione. • Art direction (crop) • Formati esotici • Preload
  5. SVG

  6. <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>
  7. <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>
  8. <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>
  9. <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>
  10. <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>
  11. <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>
  12. <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>
  13. <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>
  14. <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"/>
  15. <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"/>
  16. <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"/>
  17. <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"/>
  18. <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"/>
  19. <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"/>
  20. <!--[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="">
  21. <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>
  22. <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>
  23. <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>
  24. SVG

  25. 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"/>
  26. Rap

  27. 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