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

Immagine responsive: ipotesi di implementazione lato server

Immagine responsive: ipotesi di implementazione lato server


A mio parere un sito responsive non dovrebbe limitarsi solamente alla presentazione ma anche all’ottimizzazione del codice. Adattare la struttura della pagina semplicemente nascondendo gli elementi o forzando le dimensioni delle immagini equivale a nascondere la polvere sotto al tappeto.

Ipotizziamo una pagina adattiva ben fatta, il cui peso finale sia di circa 1,2 mega (non è così tanto se pensiamo che diversi studi confermano l’aumento del peso medio dei siti). Il file in questione si vedrà sicuramente bene sui vari schermi ma in tutti i casi i dati scaricati saranno sempre 1,2 mega.

Premesso che una soluzione lato server “completa” è sempre auspicabile (vedi ad esempio wurfl), non sempre è possibile applicarla: mancanza di competenze o limiti architetturali i casi più comuni.

Il mio obiettivo era trovare una soluzione performante, semplice nel markup e alla portata di tutti (o quasi). Mission: Impossible? Può darsi ma alla fine sono riuscito a creare un proof of concept che forse vale la pena approndire.

In rete esistono già moltissime soluzioni che sfruttano javascript per servire al client le immagini adatte. Alcune sono eccellenti, altre un po’ macchinose. Nella maggior parte dei casi viene eseguito un loop sui tag img presenti in pagina e, in base al device in uso, si modifica il nome del file da richiedere al server.

Altri script richiedono l’aggiunta di markup aggiuntivo: attributi data, tag span, div, noscript. In diversi casi per una semplice immagine vengono richieste 10 linee di codice. Un po’ troppo per i miei gusti.

In definitiva, con l’approccio javascript, si scarica sul client l’ònere di effettuare il calcolo per sapere quale immagine richiedere al server.
Se non avete imbottito la vostra pagina di codici che manipolano il DOM non dovreste notare un aggravio delle prestazioni. Ma nel caso di una pagina ricca di immagini e di uno smartphone di fascia medio-bassa con connessione 3G cosa potrebbe accadere? Dai test che ho effettuato ci sono stati dei rallentamenti nel caricamento della pagina. I fattori da tenere in considerazione sono diversi: potenza di calcolo del processore, numero di immagini presenti, numero di javascript presenti in pagina etc etc.

Per ottimizzare le operazioni da compiere si potrebbe agganciare la sostituzione delle immagini responsive ad un plugin di lazy load. Così facendo, almeno, con un solo loop si otterebbe un doppio vantaggio.

La soluzione lato server (o quasi) più famosa, probabilmente, è Adaptive Images. Senza entrare nello specifico: una pagina php funge da proxy per tutte le immagini. Prima di fornire la foto richesta viene valutato il device e, in base alle sue caratteristiche, viene restituito il file corretto presente nella cache del server. Se l’immagine non esiste viene creata dallo script stesso. Con questa tecnica si usa un cookie, php e delle regole impostate sull’.htaccess.

L’idea di base è ottima e non richiede particolari conoscenze. Ciò che non mi ha entusiasmato è il fatto che tutte le richieste passino per un singolo file php. Periodicamente lo stesso script si deve anche preoccupare di creare il file di cache. Ragionando su siti ad alto traffico e con immagini di una certa qualità questa soluzione è, a mio avviso, abbastanza onerosa in termini di carico.

Vi rimando a questo file per una lista (non esaustiva) di soluzioni per gestire le immagini responsive sia lato client che server.

A questo punto ho raccolto abbastanza informazioni per fissare i punti dell’obiettivo. Volevo una soluzione che fosse:

- leggera per poter essere gestita anche da device poco potenti

- semplice da implementare senza troppo markup aggiuntivo

- sviluppata senza loop lato client sulle immagini

- funzionante senza controllo dello user-agent

Ho effettuato una serie di test con i device a mia disposizione ma se anche voi avete modo di fare delle prove sarò lieto di leggere i vostri commenti

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,174 secondi dopo aver eseguito ben 55 query. Wordpress... prestazioni da urlo!