Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Immagine responsive: ipotesi di implementazione lato server

Immagine responsive: ipotesi di implementazione lato server


In vista del rilascio di un sito con layout responsive ho cercato una soluzione che mi permettesse di ottimizzare il caricamento delle immagini. Alla base del ragionamento c’è una semplice considerazione: se la risoluzione del device è di 480 pixel è inutile fornire immagini 3 volte più grandi, soprattutto se l’utente non ha a disposizione una connessione a banda larga.

Ho immaginato questa soluzione basandomi su Wordpress, dove è semplice avere in automatico diversi tagli della stessa foto. Il limite più grosso della tecnica proposta, quindi, è dare per scontata l’esistenza di diverse versione dello stesso file. A differenza di Adaptive Images non è prevista la creazione di immagini “on the fly”.

Potete vedere la demo accedendo con vari dispositivi se potete.

Prima di passare all’analisi del codice alcune considerazioni importanti.

- Il proof of concept utilizza un cookie, un javascript da 1,1 KB (compresso) e 2 regole da inserire in un file htaccess (se avete accesso alla configurazione del virtualhost, ovviamente, mettete le regole lì dentro. Le elaborazioni saranno più veloci).

- Lo script è volutamente in javascript puro per questioni prestazionali. La prima versione che ho fatto usava jQuery ma, anche se l’adoro, è pur sempre un wrapper e quindi più lento nell’esecuzione. Al primo caricamento, in molti casi, non venivano fornite le immagini giuste per via di una lenta elaborazione. Dopo che la libreria veniva servita dalla cache del browser, ovviamente, la situazione cambiava.

- L’approccio che ho utilizzato inizialmente era di impostare come default le immagini più piccole, per sostituirle all’occorrenza con quelle più grandi.
Dopo tutti i test effettuati ho valutato che fosse meglio agire al contrario. In caso di errori da parte del client il massimo che può accadere è che gli vengano fornite le immagini di peso maggiore; poco male rispetto al caso in cui ad un browser con risoluzione di 1900×1200 vengano mostrate foto 70×70.

- Questa tecnica non si basa sull’analisi degli user-agent ma sulla risoluzione dello schermo dell’utente indipendentemente dal dispositivo che usa. Non era mia intenzione fornire un’immagine per ogni device ma, piuttosto, ragionare per breakpoint (anche abbastanza ampi).
Mi spiego meglio: nella maggior parte dei casi la differenza tra l’immagine desktop e quella per tablet potrebbe essere minima; quello che è importante è riuscire a distinguere le foto tra smartphone e pc. Ecco perchè i breakpoint per default sono 3: small, medium e normal.
Attenzione ad un particolare: il javascript utilizza window.screen.availWidth. Ciò significa che sul mio tablet android, sia inversione portrait che landscape, il valore restituito sarà sempre 1280, ovvero la risoluzione massima impostata. In sostanza do per scontate che se entrate nel sito con una risoluzione la manterrete per tutta la navigazione.

La scelta di comprire con un unico breakpoint tutte le versioni tablet è voluta anche per via di possibili problemi di cache del cookie. Molto dipende anche dai breakpoint che avete costruito voi nel vostro layout responsive.

Pagina: [1] 2 3

link sponsorizzati

Consiglialo su Facebook

Lascia un Commento

Iscriviti alle discussione senza commentare

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,721 secondi dopo aver eseguito ben 62 query. Wordpress... prestazioni da urlo!