Strumenti per le immagini responsive

Quali tipi di immagini responsive esistono, perché e quando dobbiamo usarle, lo abbiamo detto. Come gestire il cambio di sole dimensioni e come gestire il cambio di dimensioni e proporzioni, anche.
Per concludere non ci resta che capire quali e quante immagini dobbiamo creare. E magari se c'è qualche strumento che ci semplifica la vita.

Non sei solo

Se per caso durante la lettura di uno dei post precedenti hai pensato qualcosa come "sòccia che due maroni, una volta era solo un'immagine ora ne sono una miriade", sappi che non sei solo.
Scegliere la grandezza delle immagini non è banale e non è scontato.

Questa immagine (presa senza chiedere il permesso dal blog di Jason, mostra cosa cambia se si usano immagini più grandi del necessario. Per capirci meglio è come dire "ho spazio per visualizzare un'immagine con larghezza di 150px e ne ho a disposizione una di 200px. Normalmente si restringe e amen. Facile.

Quello che ci mostra l'immagine è una visione dettagliata di quello che succede: se andiamo a stringere un'immagine piccola, generiamo uno spreco piccolo. Allo stesso modo se stringiamo un'immagine grande, generiamo uno spreco molto più grande.

Può sembrare un'esagerazione, specie se si pensa di fare a mente i calcoli o alla complessità che possono raggiungere le immagini di un layout responsive.
Appunto per questo, per gestire questa complessità sono nati diversi tool che ci aiutano sia a capire come fare i tagli in modo più efficiente, sia con il codice da generare.

Strumenti per vivere felici

Noi di Modo per primi ci siamo fatti uno strumento per affrontare questa complessità.
Introducing....

Responsivizr

Responsivizr è una paginetta (webapp? :-)) che noi Modos abbiamo creato per automatizzare e avere un quadro più completo dei casi delle immagini responsive.

Quello che fa in pratica è:

• Ti permette di dichiarare tutti i vari viewport che utilizzi nel layout. Ad esempio: il primo viewport lo chiamo small e va da 320px a 650px. Il secondo lo chiamo medium e va da 651px a 800px e così via.
• Una volta che hai i viewport puoi dichiarare come si comportano le immagini all'interno di questi viewport. Ad esempio: nel viewport small l'immgine è grande il 70% della pagina ed è art directed, nel medium è grande il 40% e nel large è larga 320px fissi.
• Una volta che hai i dati relativi a viewport e immagine, viene generato un grafico (qui sopra) che mostra che dimensione hanno le immagini che hai dichiarato, sia negli schermi retina sia in quelli non retina. Qui puoi vedere che ad esempio le immagini che vengono usate per i cellulari retina in genere sono molto più grandi di quelle usate per i desktop non retina.
• Cliccando sopra il grafico, puoi simulare i "tagli" da effettuare (in blu). Più tagli fai, meno spreco di dati avrai (ovviamente a discapito della comodità di scrittura del codice). In teoria quindi ti conviene creare meno tagli per le immagini piccole e aumentarli via via che l'immagine diventa più grande.
• Dulcis in fundo, in fondo alla pagina viene generato il codice per l'immagine responsive. Indifferentemente <picture> o srcset in base alla necessità.

....Carino vero?

Responsive Images Breakpoints Generator

Con questo bel nome SEO friendly, RIBG (acronimo necessario) è un servizio più centrato sulla singola immagine.
Ti permette di caricare un'immagine e di impostare alcuni parametri come:

• che range di larghezza avrà l'immagine (es. da un minimo di 350px a un max di 900px)
• ogni quanti kb "sprecati" vuoi effettuare un cambio di immagine
• il numero massimo di immagini che vuoi generare

Quello che ti viene restituito è una bella lista delle immagini che dovresti creare con le relative dimensioni e il peso che avranno.
Comodamente rappresentato anche sull'immagine stessa:

Subito sotto viene fornito il codice sia delle singole immagini (nel caso ce ne fossero di art-directed), sia il codice finale completo.

Quello che è carino di questo tool è che va nel dettaglio della singola immagine con dati molto precisi (non a caso il tool è fatto da un'azienda che offre servizi proprio sulle immagini). Quello che non è molto carino è non fornisce una visione di insieme (il grafico).

Kraken.io

Questo è il prossimo sito che aggiungerai ai preferiti. Si tratta di un ottimizzatore di immagini per il web.
Non mi dilungo molto anche perché non saprei cosa dire. Quello che è certo è che ottimizza come nessuno. È tipo magico.
Ha dei servizi (API) a pagamento e un ottimizzatore di immagini live.
Ancora una volta: è magico.

Possibile che non ci sia qualcosa di più facile?

Quando ho raccontato le immagini resposive al CSS day a Faenza, una domanda dal pubblico dal bravo Giacomo mi ha chiesto qualcosa come "ma con i client hints non cambierà nulla?". Io ho prontamente risposto: "Booh".

Client Hints

Avevo letto dei client hints ma sinceramente non mi ricordavo neanche che si chiamassero così.

Questi Client hints sono delle informazioni aggiuntive che Google ha suggerito di aggiungere alle richieste http.
In pratica quando si fa una richiesta http, oltre alle informazioni presenti già si aggiungono queste:

• DPR o "device pixel ratio"
• Viewport-Width, la larghezza del viewport
• Width ovvero la larghezza che l'immagine avrà realmente nella pagina (quella espressa in w nelle immagini responsive)
• Downlink ovvero la velocità massima di download
• Save-Data ovvero un booleano che indica se bisogna prendere particolari accorgimenti per risparmiare dati

Ora, la cosa bella è che avere queste informazioni a disposizione lato server semplifica la vita sotto parecchi aspetti.
La cosa meno bella è che queste informazioni sono ancora in discussioni nei vari organi di standardizzazione e che pochissimi browser attualmente supportano queste client hints (manco Chrome).

Per dirla tutta questa tecnologia potrebbe sostituire in parte le immagini responsive, in quanto per le immagini art directed il limite resterebbe intatto.
Comunque è bene sapere che c'è anche questa cosa qua.

Conclusioni e risorse extra

Questo è quanto. Dalle motivazioni ai casi d'utilizzo agli strumenti per utilizzarle abbiamo fatto una panoramica sulle immagini responsive.
Puoi usarle (dovresti già usarle) subito e con rischi minimi se non nulli.

Se vuoi approfondire l'argomento ulteriormente, ti suggerisco il sito del Responsive Images Community Group, i già citati post di Jason Grigsby, la guida sulle Resp Img di Smashing Magazine e dulcis infundo, l'articolo sempre di Smashing che introduce i client hints.

Chiedo con una promessa a me stesso: dopo questi quattro post non parlerò più di immagini responsive.