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

Cura l'immagine. Nel RWD le dimensioni contano.

decarola
September 27, 2015
Technology
2
330

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.

decarola

September 27, 2015
Tweet

More Decks by decarola

See All by decarola
Long live the indie web
decarola
0
49
Service Worker - Out of the shadows – CSS day 2019
decarola
0
290
Styleguiding is not a crime
decarola
1
250
Styleguiding is not a crime
decarola
0
59
5 cose utili imparate su internet. E 5 meno.
decarola
0
73
Uno stile per ogni occasione
decarola
0
210
Le performance come esperienza religiosa - CSS day 2017
decarola
1
420
Responsive images - css day 2016
decarola
3
440
DPRK ♥︎ internet
decarola
0
590

Other Decks in Technology

See All in Technology
LINE 平台與開發生態系介紹
line_developers_tw
PRO
0
240
JPOUG Tech Talk Night #7 ASAHI
asahihidehiko
0
190
レイヤードアーキテクチャにおける 例外との向き合い方
yukihiromori
0
1.3k
マネジメントコンソールやONTAP CLIだけじゃない! BlueXPとSystem ManagerでFSx for ONTAPを操作してみた #storagejaws
non97
0
190
DDD e Team Topologies como estes conceitos podem te dar pistas de como montar seus times de engenharia!!!
claudioed
2
260
サーバーレスで仮想待合室を作ろう！ / Serverless Virtual Waiting Room
_kensh
2
330
サーバーレスは死なぬ！みんなEDA(Event Driven Architecture)として使ってるでしょ？
cyberarchitect
2
250
Generative UX in LLM Application
huffon
1
290
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
2
750
沖縄観光、名物を一挙紹介！
bumptakayuki
PRO
0
140
Designing an Incident Response Process at Scale
opeonikute
0
140
asken リアーキテクチャを行う背景と DDD導入戦略
murahigeas
1
140

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
14
2.7k
Building an army of robots
kneath
300
41k
What's new in Ruby 2.0
geeforr
336
30k
Making Projects Easy
brettharned
104
5.1k
Designing for Performance
lara
601
66k
Git: the NoSQL Database
bkeepers
PRO
420
61k
Three Pipe Problems
jasonvnalue
89
9.2k
Being A Developer After 40
akosma
52
580k
A Philosophy of Restraint
colly
195
15k
A better future with KSS
kneath
230
16k
Product Roadmaps are Hard
iamctodd
42
8.7k
Happy Clients
brianwarren
92
6.1k

Transcript

  1. Cura l’immagine.
    Nel RWD le dimensioni contano
    Andrea De Carolis
    Modo
    !"#$%&'()*+(&,'(

    View Slide

  2. 1. Intro

    View Slide

  3. Andrea De Carolis
    @decarola

    View Slide

  4. Modo
    @madebymodo

    View Slide

  5. View Slide

  6. Immagini responsive

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

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

    View Slide

  11. 1. Intro
    2. Viva la resolution
    3. Art direction
    4. Exit through the gi shop

    View Slide

  12. Responsive Web Design

    View Slide

  13. Griglia fluida
    CSS media queries
    Immagini flessibili

    View Slide

  14. Immagini responsive

    View Slide

  15. 63%
    fonte: h p://h parchive.org/

    View Slide

  16. h p://alistapart.com/author/joshcleland

    View Slide

  17. Pletora di dispositivi

    View Slide

  18. Retina

    View Slide

  19. h p://dpi.lv

    View Slide

  20. Ad ognuno la sua

    View Slide

  21. View Slide

  22. View Slide

  23. Schermo più grande
    ≠
    Immagine più grande

    View Slide

  24. Dimensione
    immagine in pagina

    View Slide

  25. Estensioni
    esotiche

    View Slide

  26. APNG

    View Slide

  27. WEBP

    View Slide

  28. Prefetching

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide


  32. View Slide

  33. Tipologie di utilizzo

    View Slide

  34. 1. Risoluzione

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. proporzioni uguali
    dimensioni diverse

    View Slide

  40. 2. Art directed

    View Slide

  41. h ps://www.flickr.com/photos/barackobamadotcom/5795228030/

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. Vector

    View Slide

  46. Riassunto

    View Slide

  47. 1. Grandezza schermo ≠ grandezza immagine
    2. Prefetching
    3. Img responsive che cambiano solo risoluzione
    4. Img responsive che cambiano risoluzione &
    contenuto

    View Slide

  48. 2. Viva la
    resolution

    View Slide

  49. srcset

    View Slide

  50. Suggerimento

    View Slide


  51. View Slide

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

    View Slide

  53. src=“roger.jpg”  
    srcset=“roger.jpg,    
                   [email protected]  2x”  
    alt=“Roger  Federer”/>

    View Slide

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

    View Slide

  55. View Slide

  56. View Slide

  57. Prefetching

    View Slide

  58. sizes

    View Slide

  59. 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”  />

    View Slide

  60. Prima condizione valida.

    View Slide

  61. 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.">

    View Slide

  62. 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.">

    View Slide

  63. 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.">

    View Slide

  64. 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.">

    View Slide

  65. Cool? Cool.

    View Slide

  66. Obiezione

    View Slide

  67. Dovremmo separare
    contenuto e presentazione

    View Slide

  68. Prefetching

    View Slide

  69. Compromesso

    View Slide

  70. Sintesi

    View Slide

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

    View Slide

  72. tag di default
    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”/>

    View Slide

  73. tag di default
    srcset con immagini e dimensioni dichiarate
    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”/>

    View Slide

  74. tag di default
    srcset con immagini e dimensioni dichiarate
    sizes per dichiarare lo spazio nel layout
    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”/>

    View Slide

  75. Esercizio 1.

    View Slide

  76. wired.com
    browser largo 400px
    immagine di plutone
    larga 330px

    View Slide

  77. browser 800px
    immagine 260px

    View Slide

  78. browser 1200px
    immagine larga 380px

    View Slide

  79.          srcset=“”    
             sizes=“”/>

    View Slide

  80. usano solo un

    View Slide

  81. @wired

    View Slide

  82. 3. Art directed

    View Slide

  83. 3. Art directed

    View Slide

  84. Suggerimento
    Dire iva

    View Slide


  85. View Slide

  86.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  87.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  88.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  89.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96.  
             srcset=“[email protected],  homepage@desktop-­‐2x.png  2x"          
         media="(min-­‐width:  990px)”>  
             srcset="[email protected],  homepage@tablet-­‐2x.png  2x”  
         media="(min-­‐width:  750px)">  
                     srcset=“[email protected],    
                                 homepage@mobile-­‐2x.png  2x"    
                 alt="Shopify  Merchant,  Corrine  Anestopoulos">  

    View Slide

  97. Bonus

    View Slide

  98. type

    View Slide

  99. JPEG-2000
    WEBP
    JPEG-XR
    APNG

    View Slide

  100.  

    View Slide

  101.  
                           media="(min-­‐width:  900px)"    
                       srcset="roger-­‐backhand.webp">    
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg">  
         

    View Slide

  102. Sintesi

    View Slide

  103.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  104.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    1. tag

    View Slide

  105.  
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    1. tag
    2. tag

    View Slide

  106. 1. tag
    2. tag
    3. serie di con media e srcset
     
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  107. 1. tag
    2. tag
    3. serie di con media e srcset
     
                           srcset="roger-­‐backhand.jpg">  
                           srcset=“roger-­‐serve.jpg”>  
         

    View Slide

  108. Esercizio 2

    View Slide

  109. wired.com
    browser largo 400px
    immagine di Ello
    larga 330px

    View Slide

  110. browser 800px
    immagine Ello
    larga 150px

    View Slide

  111. browser 1200px
    immagine Ello 160px

    View Slide

  112. Usano

    View Slide

  113. Niente tweet :-)

    View Slide

  114. 4.

    View Slide

  115. IE?

    View Slide

  116. View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. Come preparo le immagini?

    View Slide

  121. Le dimensioni contano

    View Slide

  122. View Slide

  123. View Slide

  124. h p://responsivizr.com/

    View Slide

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

    View Slide


  126.  
       
       
       

    View Slide

  127. Esercizio 3

    View Slide

  128. Su mobile (default)
    foto quadrata.

    View Slide

  129. Tablet e desktop
    foto re angolare
    (diverse dimens.)

    View Slide

  130. View Slide

  131.  
       
               srcset=“[…]”  
    />  

    Risultato sarà qualcosa come:

    View Slide

  132. Per la soluzione

    View Slide

  133. Page source :-)

    View Slide

  134. Grazie.

    View Slide