Ieri ho partecipato ad un interessante laboratorio gratuito, all'interno del festival Supernova Creative Innovation Festival a Torino, dedicato alle immagini nel Responsive Web Design (RWD).

Cos'è il festival Supernova (di Torino)

La cupla sotto alla quale si è tenuto il Workshop

In questo fine settimanta, tra il 26 e 27 settembre 2015, si sono tenuti due giorni pregni di incontri tematici, workshop, conferenze e installazioni nella centrale Piazza Carlo Alberto, in centro a Torino dedicati a "Sintonizzare il vivace universo delle buone idee e la dimensione eterogenea della startup italiane con le aziende e le istituzioni che compongono ed animano il territorio".

Il festival continuerà il 2-3-4 ottobre a Brescia e il 15 ottobre a Kaunas in Lituania.

Il laboratorio sulle immagini nel Responsive Web Design

Andrea De Carolis

Organizzato da Modo, web agency dedicata allo sviluppo del front-end dei siti internet con sede a San Mauro Torinese, e condotto dal simpatico e preparato Andrea De Carolis, Senior Front-End Developer, il workshop a cui ho partecipato era intitolato "Cura l'immagine. Nel RWD (Responsive Web Design) le dimensioni contano."

Sessanta minuti di interessante spiegazione (e due esercizi), dedicata agli esperti del settore e in particolare agli sviluppatori di siti internet, su come realizzare e ottimizzare le immagini per la fruizione da diversi device, con monitor di dimensioni e risoluzione diversa.

Cosa ho imparato sul Responsive Web Design

Questo articolo è stato scritto senza visionare le slide del workshop, che potete trocare qui e basandomi solo sui miei appunti, per cui per comprendere nel dettaglio di cosa si è trattato date una occhiata alle diapositive.

La prefazione

Il gioco di Modo in regalo per i più cubo...si

Andrea ha introdotto il laboratorio con una veloce prefazione, in cui ci ha spiegato perchè è necessario ottimizzare e realizzare immagini di diverse dimensioni e risoluzione, al fine di venire visualizzate in maniera ottimale dai diversi dispositivi, accennando al mobilegeddom del 21 aprile scorso e all'enorme diffusione che hanno, al giorno d'oggi i device mobili, quali smartphone e tablet, e computer con monitor dalle più disparate risoluzioni e dimensioni.

Secondo archive.org, il 63% del peso (in termini di kb) dei siti internet è dovuto alle dimensioni delle immagini, e di conseguenza per velocizzare il caricamento delle pagine è necessario ottimizzare le fotografie e le illustrazioni che andremo ad inglobare nel nostro codice.

Per far questo, in termini di layout, possiamo utilizzare le media query che ci vengono fornite dal CSS3, utilizzando un layout a griglia fluida:

@media screen and (min-width: 480px) {
  .logo img{background-image:url("image-small.jpg")}
}

@media screen and (min-width: 800px) {
 .logo img{background-image:url("image-big.jpg")}
}

Per le immagini all'interno dei diversi articoli dovremo però intervenire utilizzando due attributi particolari del tag IMG: srcset e sizes, oppure utilizzando il tag PICTURES.

Prima di analizzare questi tag e attributi HTML5 è necessario però ricordare che, con un layout fluido, a schermo più grande/più piccolo non sempre corrisponde immagine più grande/più piccola, in quanto le proporzioni della nostra immagine cambieranno in funzione del monitor con cui vengono visualizzate.[vc_message color="warning" message_box_style="standard" style="rounded" message_box_color="warning" icon_type="fontawesome" icon_fontawesome="fa fa-exclamation-triangle" icon_openiconic="vc-oi vc-oi-dial" icon_typicons="typcn typcn-adjust-brightness" icon_entypo="entypo-icon entypo-icon-note" icon_linecons="vc_li vc_li-heart" icon_pixelicons="vc_pixel_icon vc_pixel_icon-alert"]Attenzione, o incauti visitatori, perdete (quasi) ogni speranza, voi che leggete!

Questo non è un articolo pienamente "tecnico" e serve a:

• Offrire una infarinatura sui concetti di base del web responsive design.
• Stimolare la curiosità.
• Raccontare la mia esperienza di ieri.

Per cui, per approfondire meglio la questione, e effettuare i primi esperimenti con il codice, vi consiglio di seguire i link in coda a questo articolo.[vc_row_inner][vc_column_inner el_class="" width="1/2"]

L'immagine visualizzata da un monitor di computer

[/vc_column_inner][vc_column_inner el_class="" width="1/2"]

L'immagine visualizzata da un monitor di un dispositivo desktop

[/vc_column_inner][/vc_row_inner]Ulteriore elemento da considerare, nella realizzazione di siti RWD, è la possibilità di utilizzare immagini di formato diverso da quelli standard, come il JPG, il PNG e il GIF, che ad oggi non sono pienamente supportati da tutti i browser, ma che in futuro potrebbero venire gestiti dai diversi software utilizzati per la visualizzazione dei siti internet.

Questi formati sono l'APNG (PNG animate come le GIF, con supporto della transparenza) le WebP (il 40% più leggere delle normali JPG) o le JPG 2000.

Andrea ci ha ricordato che nel caso di immagini vettoriali o di badge/icone di piccolo formato non è necessario effettuare interventi di responsive web design.

Il prefetching

Un utile meccanismo, che alcuni browser supportano, per ottimizzare il caricamento delle immagini è quello di prefetching. Utilizzando il periodo di inattività nel download di documenti il browser incomincia a scaricare gli elementi presenti sulla pagina, come le immagini, e li memorizza in cache, per venire visualizzati in futuro dall'utente.

L'attributo srcset e sizes del tag IMG

Ai fini del RWD e spiegati da Andrea, sono due attributi del tag html IMG: srcset e sizes, da utilizzare quando vogliamo fornire la stessa immagine a differenti risoluzioni in funzione del monitor su cui vengono visualizzate.

L'attributo srcset imposta quale immagine utilizzare nelle dverse dimensioni del viewport e come per l'attributo sizes, ad oggi, non è pianemente supportato da tutti i browser.

Si utilizza nel seguente formato: srcset="immagine1.formato dimensioneImmagine w" oppure srcset="immagine1.formato 2x".

Per comprendere meglio facciamo un esempio pseudopratico:

<img src="immagine.jpg" srcset="immagine-mobile.jpg 320w, immagine-tablet.jpg 800w, immagine-desktop.jpg 1100w" alt="immagine">

Per far visualizzare diverse immagini a diverse risoluzioni.

Oppure

<img src="immagine.jpg" srcset="immagine-retina.jpg 2x" alt="immagine">

Per far utilizzare al browser delle immagini, in genere esportate a una più alta risoluzione, a dispositivi con monitor con densità di pixel superiore a 2.

Per poter funzionare al meglio l'attributo srcset va utilizzato in combinazione con l'attributo sizes che spiega al browser quale immagine utilizzare nel caso di risoluzione diversa

sizes="(min-width: 600px) 32vw, (min-width: 900px) 50vw"

Combinando i due attributi avremo il seguente tag, dove:

• immagine-mobile.jpg ha dimensioni pari a 180px
• immagine-tablet.jpg ha dimensioni pari a 500px
• immagine-desktop.jpg ha dimensioni pari a 900px

<img src="immagine.jpg" 
srcset="immagine-mobile.jpg 180w, immagine-tablet.jpg 500w, immagine-desktop.jpg 600w" 
sizes="(min-width: 320px) 32vw, (min-width: 600px) 50vw, (min-width: 900px) 100vw" 
alt="immagine">

Il tag picture e l'Art direction

Quando vogliamo utilizzare immagini di formato diverso, in funzione della visualizzazione su diverse periferiche come l'esempio proposto poco sopra, possiamo ricorrere al tag PICTURE.

Questo tag si utilizza inserendo all'interno il source in cui andiamo a definire in funzione della risoluzione che immagine dobbiamo far visualizzare e una di default, evidenziata dal tag img.

Un esempio potrebbe essere il seguente.

<picture>
<source media="(min-width: 900px)" srcset="immagine-large.jpg">
<source media="(min-width: 400px)" srcset="immagine-small.jpg">
<img src="immagine.jpg" alt="immagine">
</picture>

Utilizzando il tag picture possiamo anche definire l'uso di un tipo di file immagine diverso da quelli standard mediante l'attributo type, all'interno del tag source.

Per fare un esempio:

<picture>
<source type="image/webp" srcset="immagine-large.webp">
<img src="immagine.jpg" alt="immagine">
</picture>

Le immagini ottimizzate RWD lato SEO

Naturalmente il workshop mi ha generato ulteriori domande, prima fra tutte: come influisce l'uso del Responsive Web Design nel posizionamento organico delle immagini? Google quali inserirà nel suo indice quando andiamo ad utilizzare diversi formati di immagine mediante il tag pictures?

Proverò quindi a fare un test SEO sul Responsive Web Design nei prossimi gioni, e non appena avrò i risultati li proverò ad analizzare.

Alcuni riferimenti per chi volesse approfondire la questione

Durante la redazione di questo articolo ho trovato una serie di link di approfondimento molto interessanti, che vi segno a seguire per comprendere meglio l'argomento:

• Un sito molto interessante sul responsive web design.
• Una guida, più specifica di questo articolo, sulle immagini responsive
• La W3C e gli standard sulle immagini responsive.
• I diversi formati di immagini, da Wikipedia.
• I browser e il supporto dell'attributo srcset.
• Il tag picture nel dettaglio.

Conclusione e esperimenti con Wordpress

Nel mio caso è opportuno studiare meglio l'argomento, prima di applicarlo in serie ai diversi siti internet che andrò a realizzare.

In particolare con Wordpress non vi è ancora la possibilità di utilizzare il responsive web design per il contenuto, se non intervenendo direttamente nel codice degli articoli e delle pagine nella modalità Testo, pubblicati poi mediante web editor e per non è ancora possibile fornire uno strumento semplificato e alla portata degli autori dei diversi siti realizzati in WP che non conoscono l'HTML.

Ciò non toglie che l'esperienza di ieri sia stata particolarmente interessante e un forte incentivo a approfondire meglio l'argomento, complice la bravura del relatore (Andrea) nell'esporre l'argomento.