Adaptive Images: piccole immagini per piccoli dispositivi

Qualche mese fa scrissi un post in cui parlavo di tre proprietà  dei CSS per la realizzazione di siti con un layout adattativo. Con gli smartphone e i tablet che diventano sempre più strumento di navigazione scegliere di realizzare un layout "liquido" è una scelta obbligata. Non è casuale, infatti, che alcuni temi di WordPress, come Yoko, nascano già  con questa capacità . Nonostante gli sforzi, però, poco ancora si può fare per le immagini (il tema precedente, ad esempio, nasconde l'immagine dell'header su dispositivi con risoluzione bassa). Ma quali strumenti abbiamo se non vogliamo fare a meno delle immagini?

Oggi presentiamo Adaptive Image, uno strumento grazie al quale saremo in grado di fornire all'utente l'esperienza di navigazione migliore per quanto riguarda le immagini e a noi stessi un consumo di banda più oculato.

Funzionamento

Il funzionamento è tanto semplice quanto geniale. Al caricamento della pagina, delle istruzioni JavaScript misureranno la risoluzione dell'utente e la memorizzeranno in un cookie, in questo modo anche il server potrà  esserne a conoscenza quando sarà  necessario. Successivamente, verranno individuate tutte le chiamate a immagini .jpg, .gif o .png. Per ogni immagine "intercettata", uno script PHP controllerà  se sul server esiste una versione adatta dell'immagine, in caso affermativo questa verrà  caricata, altrimenti una nuova immagine delle dimensioni adatte verrà  creata e memorizzata in cache.

Installazione

L'installazione è davvero semplice e come gli stessi sviluppatori promettono si conclude in 5 minuti. Una volta collegati al sito del progetto basterà  scaricare il pacchetto, decomprimerlo e caricare i file .htaccess e adaptive-images.php nella root del nostro spazio. Sempre all'interno della root, creeremo una directory chiamata ai-cache e assegnaremo globalmente tutti i permessi di lettura, scrittura ed esecuzione (CHMOD 777). All'interno del tag head delle nostre pagine andrà  poi inserito il codice Javascript di cui parlavamo prima:

<script>
    var device_width = screen.width;
    var device_height = screen.height;
 
    if (device_width>device_height){
        ai_width=device_width;
    } else {
        ai_width=device_height;
    }
 
    document.cookie='resolution='+ai_width+';
    expires=;
    path=/';
</script>

All'interno del file .htaccess è presente una regola con la quale viene richiesto al server di non intercettare e quindi di non sottoporre al processo di ridimensionamento, le immagini contenute nella cartella assets (utile per non ridimensionare le immagini di layout). Salvo impostazioni particolari del webserver l'installazione è conclusa!