Immagini responsive - ultimo atto

Trascrivo qui, in versione "addetti ai lavori", il talk sulle immagini responsive che ho fatto all'incontro di FEVR di giugno, al CSS day 2016 e, non bastasse, anche al Torino Supernova 2015.
La versione per non addetti ai lavori si trova in quest'altra pagina.
Giuro solennemente che dopo questi quattro post non parlerò e non scriverò più delle immagini responsive. Lo giuro.

Prima di continuare, devi sapere che mentre nella prima versione torinese del talk ero abbastanza "professionale", nella seconda e nella terza versione (Faenza e Verona) ho aggiunto un "riassunto" rap alla fine del tutto. Così, tanto per fare il simpatico.
Sì, rap.
Sì, cantavo io.
Sì, certo che è stato imbarazzate.
Sì, c'è un video qui. Se ne vuoi sapere di più vai nella sopra citata versione per non addetti ai lavori.

Le slide le trovi sul mio Speakerdeck (quelle del CSS day e quelle del Torino Supernova) e su quello di FEVR per l'ultima "performance".

Infine, tutto il lavoro è venuto fuori da una sintesi dei post del buon Jason Grigsby su CloudFour, con aggiunte e integrazioni varie.

"Sarò breve"

Purtroppo per affrontare l'argomento non riesco ad essere sintetico. Di conseguenza ho deciso di diluire il discorso in ben quattro parti:

1. Introduzione (questa che stai leggendo)
2. srcset
3. Picture element
4. Strumenti e link

Pubblicherò i link man mano che pubblicherò i post.

Perché sono importanti le immagini responsive

Citando il buon vecchio Marcotte, il Responsive Web Design si compone di tre aspetti: Griglie fluide, CSS media queries e Immagini flessibili.
Le griglie fluide e le media queries sono l'una figlia dell'altra: la griglia tipografica è una soluzione grafica per organizzare un layout, le media queries ti permettono di organizzare il codice in modo da avere griglie adatte ad ogni larghezza. Le immagini flessibili sono quelle che abbiamo faticato di più ad ottenere. Mi spiego: all'inizio si trattava solo di avere un'immagine con una larghezza in percentuale che si adattasse in base allo schermo che la conteneva; inutile dire che si poteva e si può fare di meglio.

Sappiamo che sul web in media le immagini occupano il 63% del peso di una pagina. È tanto. Ottimizzare le immagini rende il mondo (e il web) un posto migliore.

Infine, giusto per dare la meritata blasonatura all'argomento: nel 2015 le immagini repsonsive hanno vinto due premi ai Net Awards: Best New Web Technology e Best Collaborative Project

Supporto

Ad oggi (agosto 2016), le immagini responsive sono supportate praticamente da tutti i device/computer/browser aggiornati. In particolare, abbiamo semaforo verde sia per srcset sia per picture.

Variabili da considerare

(Sarò un po' ripetitivo ma è un punto importante).

Abbiamo diversi scenari di utilizzo da tenere in considerazione:

• Presenza di schermi al doppio e al triplo della densità di pixel. Per capirci, schermi retina;
• Immagini che cambiano di dimensione quando cambia il layout. Un'immagine che viene visualizzata da mobile è tutta larghezza, mentre quando viene visualizzata su desktop è incolonnata. In questi casi l'immagine in questione può cambiare completamente (art direction);
• Formati nuovi tipo webp o apng. Qui la "pesca" è che non si sa mai quando si possono usare;
• Il preload dei browser, punto molto importante. Preload vuol dire che il browser, per via delle dimensioni importanti delle immagini, inizia a scaricarle prima ancora di scaricare i css o i js; quindi prima di sapere quanto spazio occuperanno effettivamente le immagini in pagina. Preloading. Ok? Per adesso limitati a tenerlo a mente, presto ce lo ritroveremo tra i piedi.

Come approcciamo le immagini responsive.

Possiamo limitare il discorso a due soli casi di utilizzo di immagini responsive.

Il primo caso riguarda l'immagine che non cambia di formato ma cambia solo di dimensioni. Esempio: immagine rettangolare panoramica sul cellulare che resta rettangolare panoramica sul desktop ma viene visualizzata molto più grande. In questo discorso rientrano anche le immagini retina.

Facile. Aumentano le dimensioni dello schermo e allo stesso tempo aumenta l'immagine. Ma non è sempre così semplice:

In questo caso, l'immagine sul telefono è addirittura più grande di quella sul desktop.

Avere uno schermo più grande non vuol dire avere un'immagine più grande.

Il secondo caso è l'immagine che che cambia di proporzioni. Esempio: sulla visualizzazione da cellulare l'immagine ha un formato quadrato, ma su desktop diventa orizzontale (guarda il sax nella home di Radio24).

Questo è quanto

Per adesso basta così.
Sappiamo che è importante perché le immagini hanno un peso non indifferente nel web, che ci sono un po' di variabili da tenere in considerazione (retina, scalarità e formato dell'immagine, preload del browser) e che abbiamo due soli tipi di comportamento delle immagini nei diversi viewport.

Easy peasy, no?

Prossimo post andiamo dritti al sodo (cit.).