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

Cura l'immagine. Nel RWD le dimensioni contano.

Avatar for decarola decarola
September 27, 2015

Cura l'immagine. Nel RWD le dimensioni contano.

Retina o non retina? Attributo srcset, elemento picture o clown car?. Progettare siti internet che funzionino indistintamente su dispositivi piccoli e grandi è già abbastanza complicato.

Sbagliare le dimensioni delle immagini potrebbe compromettere l’esperienza utente irrimediabilmente. Questo workshop fornisce una visione panoramica su svariate possibili soluzioni e si pone come obiettivo di chiarire una volta per tutte il cosa-usare-dove per quanto riguarda le immagini nel responsive web design.

Workshop fatto durante il Supernova festival il 27 settembre a Torino.

Avatar for decarola

decarola

September 27, 2015
Tweet

More Decks by decarola

Other Decks in Technology

Transcript

  1. Un metodo per fornire al browser più sorgenti di immagine

    tra cui scegliere a seconda della densità del desktop, dimensione dell’immagine nella pagina, o in generale di qualsiasi altro fa ore.
  2. 1. Grandezza schermo ≠ grandezza immagine 2. Prefetching 3. Img

    responsive che cambiano solo risoluzione 4. Img responsive che cambiano risoluzione & contenuto
  3. <img     src=“roger.jpg”     srcset=“roger-­‐320.jpg  320w,    

           roger-­‐640.jpg  640w,          roger-­‐840.jpg  840w,          roger-­‐1100.jpg  1100w”   alt=“Roger  Federer”/>
  4. <img     src=“roger.jpg”   srcset=“roger.jpg,        

               [email protected]  2x”   alt=“Roger  Federer”/>
  5. <img     src=“roger.jpg”     srcset=“roger-­‐320.jpg  320w,    

           roger-­‐640.jpg  640w,          roger-­‐840.jpg  840w,          roger-­‐1100.jpg  1100w”   alt=“Roger  Federer”/>
  6. <img  src=“roger.jpg”     srcset=“roger-­‐320.jpg  320w,        

               roger-­‐640.jpg  640w,                    roger-­‐840.jpg  840w,            roger-­‐1100.jpg  1100w”   sizes=“(min-­‐width:  900px)  32vw,                (min-­‐width:  600px)  50vw,                  100vw”   alt=“Roger  Federer”  />
  7. <img  src=“https://[blabla]/img/media/[blabla]/3417.jpg”     srcset=“https://[blabla]/img/media/[blabla]/3417_w620.jpg  620w,        

             https://[blabla]/img/media/[blabla]/3417_w700.jpg  700w,                    https://[blabla]/img/media/[blabla]/3417_w645.jpg  645w,                  https://[blabla]/img/media/[blabla]/3417_w465.jpg  465w"     sizes="(min-­‐width:  980px)  620px,                  (min-­‐width:  740px)  700px,                  (min-­‐width:  660px)  620px,                  (min-­‐width:  480px)  645px,                  465px"     alt="Roger  Federer  on  his  way  to  a  7-­‐6,  6-­‐3  victory  over  Novak   Djokovic  in  the  final  of  the  Cincinnati  Masters.">
  8. <img  src=“https://[blabla]/img/media/[blabla]/3417.jpg”     srcset=“https://[blabla]/img/media/[blabla]/3417_w620.jpg  620w,        

             https://[blabla]/img/media/[blabla]/3417_w700.jpg  700w,                    https://[blabla]/img/media/[blabla]/3417_w645.jpg  645w,                  https://[blabla]/img/media/[blabla]/3417_w465.jpg  465w"     sizes="(min-­‐width:  980px)  620px,                  (min-­‐width:  740px)  700px,                  (min-­‐width:  660px)  620px,                  (min-­‐width:  480px)  645px,                  465px"     alt="Roger  Federer  on  his  way  to  a  7-­‐6,  6-­‐3  victory  over  Novak   Djokovic  in  the  final  of  the  Cincinnati  Masters.">
  9. <img  src=“https://[blabla]/img/media/[blabla]/3417.jpg”     srcset=“https://[blabla]/img/media/[blabla]/3417_w620.jpg  620w,        

             https://[blabla]/img/media/[blabla]/3417_w700.jpg  700w,                    https://[blabla]/img/media/[blabla]/3417_w645.jpg  645w,                  https://[blabla]/img/media/[blabla]/3417_w465.jpg  465w"     sizes="(min-­‐width:  980px)  620px,                  (min-­‐width:  740px)  700px,                  (min-­‐width:  660px)  620px,                  (min-­‐width:  480px)  645px,                  465px"     alt="Roger  Federer  on  his  way  to  a  7-­‐6,  6-­‐3  victory  over  Novak   Djokovic  in  the  final  of  the  Cincinnati  Masters.">
  10. <img  src=“https://[blabla]/img/media/[blabla]/3417.jpg”     srcset=“https://[blabla]/img/media/[blabla]/3417_w620.jpg  620w,        

             https://[blabla]/img/media/[blabla]/3417_w700.jpg  700w,                    https://[blabla]/img/media/[blabla]/3417_w645.jpg  645w,                  https://[blabla]/img/media/[blabla]/3417_w465.jpg  465w"     sizes="(min-­‐width:  980px)  620px,                  (min-­‐width:  740px)  700px,                  (min-­‐width:  660px)  620px,                  (min-­‐width:  480px)  645px,                  465px"     alt="Roger  Federer  on  his  way  to  a  7-­‐6,  6-­‐3  victory  over  Novak   Djokovic  in  the  final  of  the  Cincinnati  Masters.">
  11. <img  src=“roger.jpg”  alt=“Roger  Federer”     srcset=“roger-­‐320.jpg  320w,  roger-­‐640.jpg  640w,

                 roger-­‐840.jpg  840w,  roger-­‐1100.jpg  1100w”   sizes=“(min-­‐width:  900px)  32vw,                (min-­‐width:  600px)  50vw,                  100vw”/>
  12. <img> tag di default <img  src=“roger.jpg”  alt=“Roger  Federer”    

    srcset=“roger-­‐320.jpg  320w,  roger-­‐640.jpg  640w,              roger-­‐840.jpg  840w,  roger-­‐1100.jpg  1100w”   sizes=“(min-­‐width:  900px)  32vw,                (min-­‐width:  600px)  50vw,                  100vw”/>
  13. <img> tag di default srcset con immagini e dimensioni dichiarate

    <img  src=“roger.jpg”  alt=“Roger  Federer”     srcset=“roger-­‐320.jpg  320w,  roger-­‐640.jpg  640w,              roger-­‐840.jpg  840w,  roger-­‐1100.jpg  1100w”   sizes=“(min-­‐width:  900px)  32vw,                  (min-­‐width:  600px)  50vw,                  100vw”/>
  14. <img> tag di default srcset con immagini e dimensioni dichiarate

    sizes per dichiarare lo spazio nel layout <img  src=“roger.jpg”  alt=“Roger  Federer”     srcset=“roger-­‐320.jpg  320w,  roger-­‐640.jpg  640w,              roger-­‐840.jpg  840w,  roger-­‐1100.jpg  1100w”   sizes=“(min-­‐width:  900px)  32vw,                (min-­‐width:  600px)  50vw,                  100vw”/>
  15. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  16. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  17. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  18. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  19. <picture>      <source          srcset=“[email protected],  homepage@desktop-­‐2x.png

     2x"                media="(min-­‐width:  990px)”>      <source          srcset="[email protected],  homepage@tablet-­‐2x.png  2x”        media="(min-­‐width:  750px)">      <img  src=“[email protected]"                  srcset=“[email protected],                                  homepage@mobile-­‐2x.png  2x"                  alt="Shopify  Merchant,  Corrine  Anestopoulos">   </picture>
  20. <picture>      <source  type="image/webp"          

                 media="(min-­‐width:  900px)"                        srcset="roger-­‐backhand.webp">        <source  media="(min-­‐width:  900px)"                        srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg">      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  21. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  22. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture> 1. tag <picture>
  23. <picture>      <source  media="(min-­‐width:  900px)”        

                 srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture> 1. tag <picture> 2. tag <img>
  24. 1. tag <picture> 2. tag <img> 3. serie di <source>

    con media e srcset <picture>      <source  media="(min-­‐width:  900px)”                      srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  25. 1. tag <picture> 2. tag <img> 3. serie di <source>

    con media e srcset <picture>      <source  media="(min-­‐width:  900px)”                      srcset="roger-­‐backhand.jpg">      <source  media="(min-­‐width:  750px)"                        srcset=“roger-­‐serve.jpg”>      <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  26. 4.

  27. IE?

  28. <img  src=“roger.jpg”     srcset=“roger-­‐320.jpg  320w,        

               roger-­‐640.jpg  640w,          roger-­‐840.jpg  840w,          roger-­‐1100.jpg  1100w”   sizes=“(min-­‐width:  900px)  32vw,                (min-­‐width:  600px)  50vw,                  100vw,”   alt=“Roger  Federer”  /> srcset
  29. <picture> <picture>    <source  media="(min-­‐width:  900px)”  srcset="backhand.jpg">    <source  media="(min-­‐width:

     750px)”  srcset=“serve.jpg">    <img  src="roger-­‐serve.jpg"  alt=“Roger  Federer">   </picture>
  30. <picture>    <source  media="[…]”  srcset=“[…]">    <img  src="cruciani-­‐small.jpg"  alt=“Cruciani  in

     onda”            srcset=“[…]”   />   </picture> Risultato sarà qualcosa come: