A seguito del Workshop di un mese fa in occasione del Responsive Web Design mi sono trovato ad effettuare un esperimento SEO con Wordpress e le immagini adattive per i diversi dispositivi.

Tralasciando i risultati, che mi hanno condotto a pensare che Google non è ancora pronto ad indicizzare le immagini inglobate sui siti internet mediante i tag RWD, mi sono reso conto di come anche Wordpress, il CMS che utilizzo quotidianamente, non era ancora ottimizzato nei confronti di questa tecnologia.

Una sorpresa mi aspettava però dietro l'angolo, in quanto a meno di un mese dal mio primo articolo dedicato a questa tecnologia di ottimizzazione delle immagini per i diversi dispositivi vengo a scoprire, grazie ad un post su Google Plus di Andrea Templari, della futura integrazione, per la versione 4.4 di Wordpress della gestione degli attributi "srcset" e "sizes" dedicati alle immagini responsive.

Utilizzando questi attributi il nostro sito internet realizzato con Wordpress potrà quindi fornire l'immagine più appropriata in funzione delle dimensioni dello schermo, della risoluzione e dal viewport che l'utente utilizza.

Nella versione 4.4 di #Wordpress verrà implementata la gestione delle immagini nel #RWD Share on X

Per migliorare la gestione dei tag HTML, dedicati al Responsive Web Design, la comunità di sviluppatori ha pensato di integrare, nel core di Wordpress, un plugin per estendere le funzionalità in tal senso: RICG Responsive Images.

Il plugin RICG Responsive Images

Questo plugin per Wordpress, creato da Tim Evko e Chris Coyler ad aprile 2014, è stato scaricato più di 40000 volte ed è stato installato e attivato su oltre 10000 siti web che utilizzano WP come CMS.

Il software non aggiunge nessuna interfaccia utente o impostazione di amministrazione al core di Wordpress, ma "semplicemente" aggiunge automaticamente gli attributi srcset e sizes alle immagini che andiamo a pubblicare nei nostri articoli o pagine, mediante l'editor interno.

Ho provato ad installare il plugin su un sito di test e dopo aver pubblicato un articolo, contenente una immagine, sono andato a visualizzare il codice per comprendere l'azione di questo software.

<img class="alignnone size-medium wp-image-50"
src="http://www.sito-di-test.tlp/wp-content/uploads/2015/10/wordpress-responsive-web-design-300x163.jpg"
alt="wordpress-responsive-web-design"
width="300" height="163"
srcset="http://www.sito-di-test.tlp/wp-content/uploads/2015/10/wordpress-responsive-web-design-300x163.jpg 300w,
http://www.sito-di-test.tlp/wp-content/uploads/2015/10/wordpress-responsive-web-design-1024x556.jpg 1024w,
http://www.sito-di-test.tlp/wp-content/uploads/2015/10/wordpress-responsive-web-design.jpg 1068w"
sizes="(max-width: 300px) 100vw, 300px">

Come potete vedere il plugin ha quindi creato tre versioni della nostra immagine, per tre diverse risoluzioni (mediante gli attributi srcset e sizes) in maniera automatica, questo perché ho caricato una immagine con una buona risoluzione. Il plugin, infatti, non interviene nel caso di immagini al di sotto di una certa dimensione (in px) e li pubblica con il tag img senza utilizzare gli attributi per l'RWD.

Il plugin RICG Responsive Images permette di gestire le immagini nel #RWD con #Wordpress Share on X

I temi Wordpress e il Responsive Web Design

Se nella versione 4.4 di Wordpress, pubblicando immagini mediante l'editor, le vedremo ottimizzate secondo gli standard del Responsive Web Design, gli sviluppatori di temi devono incominciare a ragionare in questa ottica e, per le immagini utilizzate nel layout, è necessario predisporre diverse dimensioni, o nel caso di campi in cui far caricare le immagini all'utente per personalizzare il layout (come il logo, immagini di testata, banner, etc) è necessario predisporre più campi per le diverse dimensioni, risoluzione e viewport.

Dalla versione 4.4 di #WP sarà necessario per gli sviluppatori di temi gestire le immagini nel #RWD Share on X

Conclusioni

Se ad ora siamo ancora agli inizi nell'uso di questa tecnologia destinata a migliorare la visualizzazione dei nostri siti internet, creati in Wordpress, sui diversi dispositivi, dobbiamo iniziare a ragionare di conseguenza e a rimanere aggiornati su un aspetto del web che aumenterà sicuramente la mole di lavoro per grafici, web designer e sviluppatori.

Riferimenti

• Il plugin RICG Responsive Image.
• L'annuncio in italiano delle modifiche al core di Wordpress 4.4.
• La proposta di implementazione di Wordpress per gestire il responsive web design.