Generatore automatico di Immagini Responsive che si adattano alle risoluzioni dei dispositivi.

Come generare il codice per pubblicare su Blogger o su Wordpress una immagine responsive che si adatta in modo automatico al dispositivo mobile o desktop con cui viene aperta.

Il grande sviluppo dei dispositivi mobili ha dato un grande impulso al traffico web. Se prima per navigare dovevamo avere un computer e una connessione internet adesso basta un cellulare. Questa grande opportunità crea però grandi problematiche agli webmaster che devono adattare il layout dei loro siti alle risoluzioni dei dispositivi con cui vengono aperti.

La questione di base viene spesso risolta adottando un Modello Responsive per Blogger o un Tema Responsive per Wordpress. Gli utenti della piattaforma Blogger hanno anche la possibilità di crearsi un modello responsive da soli oppure utilizzare la versione mobile di Blogger attivabile dalla Bacheca > Modello > Cellulare.  

I problemi però rimangono pressoché immutati per alcuni oggetti HTML presenti nelle pagine. Una particolare importanza le hanno naturalmente le immagini. Il sistema utilizzato è quello di creare dei breakpoint vale a dire dei punti in cui il dispositivo carica una immagine più piccola rispetto a una più grande o viceversa. Ho già illustrato la metodologia da seguire per Blogger.

La scelta dei breakpoint invece di essere arbitraria può essere ragionata e calcolata matematicamente in funzione delle altre variabili. A questo scopo è stato creato il tool Responsive Images Breakpoints Generator che è open sorce e che può essere usato senza registrazione. 

COME GENERARE IL CODICE PER UNA IMMAGINE RESPONSIVE

Facciamo un esempio pratico che rende le cose più chiare di qualsiasi ragionamento teorico.  Poniamo che si abbia una immagine da pubblicare in una pagina web che desideriamo risulti visibile correttamente con tutti i dispositivi a prescindere dalla loro risoluzione. Il concetto è quello di caricare la stessa immagine con diverse risoluzioni in un hosting che potrebbe essere Picasa per poi implementare un codice che selezioni quella giusta in funzione della risoluzione del dispositivo.

Dopo aver aperto lo strumento di cui sopra si settano la risoluzione minima e quella massima con cui si deve visualizzare l'immagine. Nel test è stato scelto 200 pixel come minimo e 1080 pixel come massimo. I cellulari moderni difficilmente hanno una risoluzione inferiore a 300 pixel quindi la scleta è puramente indicativa. Sempre sulla destra si seleziona la differenza massima di peso del file tra immagini contigue. Se si seleziona un numero di KB piccolo aumenteranno il numero delle immagini e viceversa. Sempre nella sezione Breakpoints generation settings infine si può settare il numero massimo di immagini da utilizzare. Un  numero maggiore di immagini significa uno scalare meno repentino da una immagine più piccola una più grande e viceversa.

Si clicca su Upload File per caricare il file immagine da processare. Il risultato sarà il seguente

con i breakpoint creati automaticamente. Nella immagine test che ho utilizzato e con i parametgri che ho impostato sono stati creati breakpoint per larghezze della immagine 200, 408, 561, 692, 806, 912, 1000. Si può cliccare sui link View image per aprire le varie immagini nel browser. Più in basso

si visualizzerà il codice HTML5  da usare con il tag <img.. mentre ancora più in basso si vedrà

il codice HTML5 da usare con il tag <picture> e il bottone di download delle immagini. Il file ZIP scaricato dovrà essere scompattato con 7Zip o software analogo e dovremo caricare le immagini su Picasa Web Album per poi ricavarne il link diretto di ciascuna di esse

Facciamo l'esempio del primo codice HTML5 che nel test è il seguente

<img
sizes="(max-width: 1000px) 100vw, 1000px"
srcset="
responsive-image_hqe3q0_c_scale,w_200.jpg 200w,
responsive-image_hqe3q0_c_scale,w_408.jpg 408w,
responsive-image_hqe3q0_c_scale,w_561.jpg 561w,
responsive-image_hqe3q0_c_scale,w_692.jpg 692w,
responsive-image_hqe3q0_c_scale,w_806.jpg 806w,
responsive-image_hqe3q0_c_scale,w_912.jpg 912w,
responsive-image_hqe3q0_c_scale,w_1000.jpg 1000w"
src="responsive-image_hqe3q0_c_scale,w_1000.jpg"
alt="">

dopo aver sostituito i link diretti delle foto caricate su Picasa diventa

<img
sizes="(max-width: 1000px) 100vw, 1000px"
srcset="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbL_N3Tm7hls_Qb3JV287E5Y0FdhrAPDWfuflrSUAxdQUFajA6dISw8-Wz554CIWrqkGmsLfL0oyJR-tldgbVy8akKYn9421ww2sdNAggjhAPlpU08tbfKmyn_LY0fbx78sPrTMz8lG4/s200-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_200.jpg 200w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSDjGsaJkRIjEVR-rOZFqVL6_P2xFCtCRUyMa4DAFiDkwiFb_dqPVXQ87jgDH4XUtIb6KkleIw4DEPC2xN3U60teCyg0nEcKcDh5GiG2n_3QrAq9gX-cfL1byTQXfP1BrMtXPeK8wGCQ/s408-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_408.jpg 408w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1p4T4Hn6om_gie3jQgmU-SpP2Om95bFstCm6S_rC0GRnrNyOPgttFJ6xWwHgqQWXeZbThBfjWteJ_jbAFnOgGJ0ZX5PsOCOE8PkwbSxWC4b6-7D7P-vYg3Pv0bQK30n1VGHLEiTdzo8/s561-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_561.jpg 561w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2e5x3uGr0HM6-1zNUH4ci7uIUy6cG45dIX0y-3H1icGUq7an3uKoYHkPUp7pE5O4HrWfQXBrj_YbLYqRQmJcGf95H_oxIpj-q6MmP6bylKWWa0kCeygz_2B2oBxrdHOnC_cScGbQ-0nY/s692-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_692.jpg 692w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKVZUn07xDqLAbK9LpCtakzEuwrR0Cj6z-PJ9bWoBRll2bbQ0-eUP7oKm9J9oBV_h0fhbF94QY0iHHo-bVy69MCwg1S_6tEIk8ppCc93JD9SOAkm7vVDgVQtF1Mjb6vuBQ_R4zNGbtlc/s806-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_806.jpg 806w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVb0MpN44FhwTQX7z8LQQ_fEuGvgaPLTs5RVFIAie4_U1zGxLpN8FWT73R-0di7Srs0eZa_7Utpu3L7fCyzkQF0t1DYJJMXEr4oRO9EBVrmVxvtIENW-LgiuA-k2eO0Z3OBGcdJabhqE/s912-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_912.jpg 912w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKHCngy8SpvsKiHBBb-47nMaTZp3HIBmZeEWMuGcXDUIhengpM4VfW_Ftb1ak683SPqhBTigxBH7QDyibAUfz3-ec8KkSb7Vbt19i8bPCQwTF1sqlfusTr7j8G4RXzA5TzqyzCnoADQw/s912-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_1000.jpg 1000w"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKHCngy8SpvsKiHBBb-47nMaTZp3HIBmZeEWMuGcXDUIhengpM4VfW_Ftb1ak683SPqhBTigxBH7QDyibAUfz3-ec8KkSb7Vbt19i8bPCQwTF1sqlfusTr7j8G4RXzA5TzqyzCnoADQw/s912-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_1000.jpg"
alt="Immagine Responsive creata con il Generatore">

mentre quello con il tag <picture> diventerebbe

<picture>
<img
sizes="(max-width: 1000px) 100vw, 1000px"
srcset="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbL_N3Tm7hls_Qb3JV287E5Y0FdhrAPDWfuflrSUAxdQUFajA6dISw8-Wz554CIWrqkGmsLfL0oyJR-tldgbVy8akKYn9421ww2sdNAggjhAPlpU08tbfKmyn_LY0fbx78sPrTMz8lG4/s200-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_200.jpg 200w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSDjGsaJkRIjEVR-rOZFqVL6_P2xFCtCRUyMa4DAFiDkwiFb_dqPVXQ87jgDH4XUtIb6KkleIw4DEPC2xN3U60teCyg0nEcKcDh5GiG2n_3QrAq9gX-cfL1byTQXfP1BrMtXPeK8wGCQ/s408-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_408.jpg 408w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1p4T4Hn6om_gie3jQgmU-SpP2Om95bFstCm6S_rC0GRnrNyOPgttFJ6xWwHgqQWXeZbThBfjWteJ_jbAFnOgGJ0ZX5PsOCOE8PkwbSxWC4b6-7D7P-vYg3Pv0bQK30n1VGHLEiTdzo8/s561-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_561.jpg 561w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2e5x3uGr0HM6-1zNUH4ci7uIUy6cG45dIX0y-3H1icGUq7an3uKoYHkPUp7pE5O4HrWfQXBrj_YbLYqRQmJcGf95H_oxIpj-q6MmP6bylKWWa0kCeygz_2B2oBxrdHOnC_cScGbQ-0nY/s692-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_692.jpg 692w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiKVZUn07xDqLAbK9LpCtakzEuwrR0Cj6z-PJ9bWoBRll2bbQ0-eUP7oKm9J9oBV_h0fhbF94QY0iHHo-bVy69MCwg1S_6tEIk8ppCc93JD9SOAkm7vVDgVQtF1Mjb6vuBQ_R4zNGbtlc/s806-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_806.jpg 806w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVb0MpN44FhwTQX7z8LQQ_fEuGvgaPLTs5RVFIAie4_U1zGxLpN8FWT73R-0di7Srs0eZa_7Utpu3L7fCyzkQF0t1DYJJMXEr4oRO9EBVrmVxvtIENW-LgiuA-k2eO0Z3OBGcdJabhqE/s912-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_912.jpg 912w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKHCngy8SpvsKiHBBb-47nMaTZp3HIBmZeEWMuGcXDUIhengpM4VfW_Ftb1ak683SPqhBTigxBH7QDyibAUfz3-ec8KkSb7Vbt19i8bPCQwTF1sqlfusTr7j8G4RXzA5TzqyzCnoADQw/s912-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_1000.jpg 1000w"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKHCngy8SpvsKiHBBb-47nMaTZp3HIBmZeEWMuGcXDUIhengpM4VfW_Ftb1ak683SPqhBTigxBH7QDyibAUfz3-ec8KkSb7Vbt19i8bPCQwTF1sqlfusTr7j8G4RXzA5TzqyzCnoADQw/s912-Ic42/responsive-image_hqe3q0_c_scale%25252Cw_1000.jpg"
alt="Immagine Responsive creata con il Generatore">
</picture>

Si può indifferentemente usare uno dei due codici per pubblicare l'immagine che risulterà Responsive cioè che si adatterà alla risoluzione dei dispositivi fissi e mobili. Gli utenti di Blogger dovranno incollare tale codice nel punto desiderato nell'Editor in Modalità HTML.