Supporto volontario e collaborativo per Joomla!® in italiano

XT Adaptive Images: immagini ottimizzate per tutti i dispositivi

Valutazione attuale: 4 / 5

Stella attivaStella attivaStella attivaStella attivaStella inattiva
 

Stessa immagine con risoluzioni differenti in funzione del dispositivoCon la diffusione di strumenti mobile e tablet è cambiato profondamente il modo di costruire un sito web. Dispositivi differenti richiedono risorse differenti.

Oggi vi parlo di questo plugin, XT Adaptive Images, che ottimizza ed automatizza un processo importante: l'ottimizzazione delle dimensioni delle immagini proponendole in maniera automatica ai vari dispositivi (desktop, tablet, mobile).

Perchè potrei (dovrei) usare questo plugin?

Il vantaggio di utilizzare questo plugin nei vostri siti Joomla! è che non dovrete più preoccuparvi di dover gestire, per esempio, immagini troppo grandi su un dispositivo mobile. Spiego brevemente il concetto da cui nasce questo plugin.
Se visualizzate il vostro sito web su un dispositivo desktop (il vostro PC) con una risoluzione per esempio di 1920px di larghezza e avete un'immagine di sfondo, supponiamo anch'essa di 1920px di larghezza, questa verrà caricata anche come sfondo del dispositivo mobile (se non avete progettato il sito diversamente).
Ovviemente sullo schermo del vostro smartphone un'immagine così grande non ha senso, anzi richiede più tempo e più banda per essere scaricata. Lo stesso Google, se eseguite un test con Page Speed vi dirà che qull'immagine può essere ottimizzata.
Il concetto è appunto che per dispositivi differenti dovreste utilizzare immagini differenti. Come fare? Esistono diversi modi, più o meno macchinosi, ma questo plugin che vi presento oggi consente di facilitare tutto il processo.

Cosa fa XT Adaptive images

Crea 4 differenti formati della stessa immagine in base alle dimensioni impostate su alcuni "punti di rottura" (dimensioni di schermi) e in modo automatico le assegna in funzione del dispositivo. Semplice!
In questo modo su smartphone non verrà più caricata l'immagine da 1920px di larghezza dell'esempio di prima ma verrà utilizzata un'immagine 480px di larghezza (o la dimensione che sceglierete voi) con notevole risparmio di banda e tempo di caricamento!

Come funziona XT Adaptive images

Il plugin funziona in questo modo:
  • esegue operazioni su ogni immagine creandone le rispettive 4 versioni (in base alle dimensioni che avrete scelto);
  • crea 4 differenti cartelle (con il nome delle dimensioni) e in queste cartelle ricostruisce il percorso originale dell'immagine;
  • preserva il nome originale dell'immagine;
  • tramite un'estensione che gestisce la cache (come Jotcache per esempio) assegna ad ogni dispositivo la sua immagine adeguata;
  • una volta create le immagini queste permangono anche se la cache viene cancellata (quindi non dovranno essere ricreate ogni volta che la cache viene rigenerata).

Installiamo e configuriamo il plugin

Scarichiamo il plugin XT Adaptive Images

Potete scaricare il plugin qui. La versione gratuita ha già tutte le funzionalità che vi consentiranno di gestire le immagini in maniera "adattiva" e vi consentirà di usare anche 1 CDN (Content Delivery Network). Non vi consentirà però di scegliere la cartella in cui generare le sottocartelle e le immagini "adaptive". La versione a pagamento invece può essere usata su progetti commerciali ed estende le funzionalità precedenti.

NOTA

Il plugin funziona in accoppiata con un sistema di gestione della cache come, per esempio, Jotcache. E' quindi necessario scaricare e installare anche JotCache per far funzionare correttamente il sistema. Potete scaricare JotCache da qui. Configurate JotCache secondo le vostre necessità ma ricordate di assegnare la generazione della cache in maniera individuale per: "iPad, iPhone, Other Tablets, Other Phones, and Other Desktops"!

Installiamo e configuriamo il plugin

L'installazione è semplice e la potete fare come qualunque plugin di Joomla! attraverso l'installer. Una volta installato il plugin potrete eseguire la configurazione in base alle vostre necessità. Vediamo alcuni parametri principali nel dettaglio.

Risoluzione

Potete assegnare differenti "punti di rottura" in funzione delle dimensioni dello schermo che determineranno così quale dimensione dell'immagine verrà generata e assegnata tramite la cache. Di default i valori, espressi in pixel, sono: 1382,992,768,480.

Tipi di file

Qui potete scegliere i tipi di file che verranno gestiti dal plugin e caricati attraverso la rete CDN. Potete inoltre specificare anche quali file devono essere esclusi dal processo.

Gestione della qualità immagine

Questi parametri vi consentono di gestire la compressione delle immagini generate e la nitidezza. Inoltre potete specificare se gestire o meno le immagini preparate per i dispositivi con Retina Display.

CDN

Nella scheda CDN potete gestire i parametri della vostra CDN se ne disponete.

Qui di seguito vi mostro un video che vi descrive tutto il processo.

Risultati del processo

Una volta installato e configurato tutto il sistema, potete testare i risultati sul vostro sito. Noterete che al primo caricamento di una pagina il tempo impiegato potrebbe essere piuttosto lungo. Questo perchè il sistema genera per la prima volta le immagini e quindi, anche in funzione del numero di immagini, il server dovrà eseguire tutte le operazioni necessarie e impiegherà un certo tempo. Al termine del processo di generazione delle immagini (per quel dispositivo con cui avete caricato la pagina) verrà generata la pagina tramite la cache. Ora le immagini contenute nella pagina sono quelle "adaptive" e non più quelle originali (che comunque rimangono intatte nella cartella in cui le avete inserite).

Osservazioni

Se controllate una di queste immagini della vostra pagina noterete subito che:

  • l'immagine è compressa sia in peso che ridotta alle dimensioni specificate nel plugin (per esempio 1382px se l'immagine originale era di 1920px e la state visualizzando su desktop);
  • il nome del file è stato preservato e questo è buono dal punto di vista SEO per le immagini;
  • le immagini sono state create in una sottocartella della cartella principale di cache mantenendo la struttura originaria ma aggiungendo nel percorso la cartella che specifica la dimensione del file.
  • se cancellate e rigenerate la cache di JotCache le immagini già generate non verranno ricreate nuovamente ma verranno riprese quelle già esistenti create in precedenza e riassegnate, questo implica che il caricamento "lento" della pagina avviene solo la prima volta che il server deve eseguire le operazioni per generare le immagini "adaptive".

Conclusioni

Questo plugin è sicuramente un ottimo sistema per poter gestire le immagini in maniera automatizzata nell'epoca dei dispositivi mobile e delle tecnologie responsive e adaptive. Può essere molto utile anche per la gestione del sito da parte del cliente che non è mai avvezzo ad utilizzare software vari per ottimizzare l'immagine iniziale (e comunque non potrebbe fare granchè per le immagini adaptive a prescindere). Con questo plugin, chi gestisce il sito potrebbe (anche se sarebbe meglio di no...) caricare un'immagine da 5000px senza preoccuparsi di avere come risultato un'immagine enorme, inutile e pesante. Il sistema penserà a ottimizzare e comprimere l'immagine oltre che a farne i vari formati per tutti i dispositivi. In definitiva il plugin XT Adaptive Images consente di ottenere migliori performance con minori tempi di caricamento e meno consumo di banda soprattutto per i dispositivi mobile e ovviamente più il sito è veloce a caricarsi più l'utente è contento e infine anche Google ne sarà felice in qualche modo... ;-)



commentaCommenta questo articolo sul forum
Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Francesco Fiorani
Alcune informazioni su di me:
Lavoro per Crealia e costruiamo progetti nel web: siti web, e-commerce, community online e giornali online; facciamo analisi di posizionamento, progettiamo la comunicazione e il web marketing e sviluppiamo per i clienti campagne Google AdWords.


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.5.1 Stabile Italiana
Data di rilascio: 05 Aprile 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: