# 133: Capire immagini reattive - Trucchi CSS

Probabilmente sono un po 'raro in quanto mi è piaciuto piuttosto cercare di tenere il passo con le immagini reattive. È un problema interessante che ha prodotto molte soluzioni interessanti. Il tutto però sta iniziando a concludere adesso, ora che le soluzioni ufficiali sono:

1. e amici
2. 

   Diciamo che siamo su uno schermo 1x. Poiché abbiamo detto al browser che utilizzeremo queste immagini il più grande possibile (100% della visualizzazione), i "punti di interruzione" per quando il browser capovolgerà le immagini avverranno a 1280px, 640px e 320px, le stesse dimensioni esatte che abbiamo detto per le immagini.

   Se siamo su uno schermo 2x, quei "punti di interruzione" verranno dimezzati (indipendentemente da ciò che effettivamente facciamo per ridimensionare quelle immagini) e saranno a 640px, 320px e 160px.

   Supponiamo ora di utilizzare le stesse immagini, ma sappiamo molto di più sul layout della nostra pagina e abbiamo usato qualcosa del genere:

   Qui stiamo dicendo (con l' sizesattributo), se il viewport è di 500px o inferiore, intendiamo visualizzare l'immagine a 250px di larghezza. Se la visualizzazione è più ampia di quella, visualizza l'immagine con una larghezza di 500 px.

   Ciò corrisponderebbe a CSS in questo modo:

   img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

   Su uno schermo 1x, otterrai sempre l'immagine 320w (piccola) quando il viewport è largo 500px o più piccolo, e otterrai sempre l'immagine 640w (medio) quando il viewport è più grande. Non otterrai mai l'immagine grande, perché può dire che non avrai mai bisogno di tanti pixel.

   Su uno schermo 2x, otterrai sempre l'immagine 640w (media) quando il viewport è largo 500px o più piccolo (perché pensa di aver bisogno di 500px di pixel e il piccolo non è sufficiente a 320px), e otterrai sempre il Immagine 1280w (grande) quando il riquadro di visualizzazione è più grande. Non otterrai mai l'immagine piccola, perché non sono mai abbastanza pixel per coprire ciò che hai detto a cui intendi renderizzare l'immagine.

   Dimensionamento effettivo

   Ricorda che il dimensionamento effettivo dell'immagine dipende da te. Penso che nella maggior parte dei casi sia tu a farlo tramite CSS. E il CSS vince sempre. Ciò che dichiari sarà la larghezza renderizzata dell'immagine, indipendentemente da ciò che accade con le cose srcsete sizes. Questo funziona solo quale immagine verrà mostrata.

   Questo è ciò che rende l'attributo delle taglie un po 'difficile. Diciamo che hai qualcosa come:

   .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

   Non è affatto insolito. Quindi ora quale dimensione usi sizesnell'attributo? Sarebbe il 13,33% (moltiplicali tutti insieme) perché quel numero deve essere relativo alla visualizzazione, non al contenitore. E questo non tiene conto dei margini, del riempimento e del resto su quei contenitori, quindi è una specie di supposizione. Immagino che conteggi stretti in ferri di cavallo, bombe a mano e attributo taglie.

   Quindi supponiamo che arrivi una media query e il corpo diventi effettivamente largo il 75% oltre a tutto ciò. Devi saperlo in modo da poter regolare quello che pensi che saranno le dimensioni delle immagini renderizzate. L'attributo delle taglie potrebbe diventare:

   sizes="(min-width: 500px) 8%, 13.33%"

   Quindi ripeti l'operazione per ogni query multimediale di layout che hai che influisce sulle immagini dei contenuti. Può diventare un po 'complesso.

   Dimensioni pratiche?

   Sospetto che la maggior parte dell'utilizzo nel mondo reale utilizzerà qualcosa come:

   Supponendo che le immagini del contenuto saranno circa la metà della dimensione della finestra del browser su schermi di grandi dimensioni e l'intera dimensione della finestra del browser su schermi piccoli, lascia che i punti di interruzione si verifichino dove si verificano. Avrai comunque una scelta abbastanza decente in questo modo senza schiavizzare la corrispondenza esatta di tutte le tue query multimediali.

   E ricorda che queste sono immagini di contenuto. L'HTML tende a durare più a lungo di CSS o JS, specialmente quando è contenuto.

   Altre cose da sapere

   Puoi anche specificare se un'immagine è 2x o 1x con srcset. Quindi un caso d'uso davvero semplice può essere:

   Questo da solo è piuttosto utile. Non mescolarlo con la specifica di larghezze. Come dice Eric Portis:

   E di nuovo lasciatemi sottolineare che sebbene sia possibile allegare descrittori di risoluzione 1x / 2x alle fonti srcsetinvece che ai wdescrittori, 1x / 2x & w non si mescolano. Non usare entrambi nello stesso srcset. Veramente.

   E ricordi quando ho detto che il picturefill originale era facile? Il nuovo può essere così facile, ma anche gli elementi all'interno supportano srcsete sizes. Ciò significa che puoi essere molto specifico. Aggiunge un altro livello a questo:

   1. Tu decidi quale

      Collegamenti

      • L'articolo di Martin Wolf che lo ha ispirato
      • Picturefill è il polyfill che desideri utilizzare.
      • Articolo di Smashing Magazine su Picturefill 2.0 di Tim Wright
      • Eric Portis spiega perché esistono Srcset e size e cosa risolve meglio delle media query
      • Eric Portis con di più sul nuovo

      Guarda il testcase Pen srcset e taglie di Chris Coyier (@chriscoyier) su CodePen.