Come accennato nel precedente articolo sui template gratuiti per PrestaShop, il template Classic non supporta ancora l'attributo Srcset dell'HTML 5 e di conseguenza non permette di offrire ai dispositivi retina le immagini ad alta risoluzione. Nel caso del WebP esistono diversi moduli per PrestaShop, con la nuova versione 8, vi sarà comunque il supporto nativo a questo formato di immagine.

Prestashop presenta la voce "Genera immagini ad alta risoluzione" in back-end attivabile in:
Design > Impostazioni immagine.

Vediamo il seguente esempio, i primi due loghi sembrano identici nei dispositivi non ad alta definizione e il terzo a seconda della qualità del monitor apparirà o più marcato o più pixelato, nei display Retina il logo al centro apparirà sgranato e sfuocato, quello a sinistra e a destra appariranno corretti.

Logo con attributo srcset
Passa due immagini distinte una da 290x69 pixel e una da 580x138 pixel per i display retina.

Logo senza attributo srcset
Passa solo l'immagine da 290x69 pixel, nei display retina verrà zoomata del 200%. 

Logo con dimensioni errate
Passa solo l'immagine da 580x138 pixel, ma limitato a 69 pixel di altezza via CSS

In fondo all'articolo spiego come simulare un display retina su un normale monitor. Potete comunque visualizzare l'esempio sopra con uno zoom del 200% vedrete così che il logo al centro sarà sfocato, mentre quello a destra sarà ben definito. Il logo ottimizzato da 290pixel ha un peso di 9.6 kb (5Kb in formato WebP qualità 90%), mentre quello da 580pixel pesa 29kb (13,7kb in formato WebP qualità 90%). Una differenza che può sembrare trascurabile, ma le metriche web vitals non gradiranno. Parliamo comunque di una piccola immagine con pochi colori e già ottimizzata per il web, nel caso di una slide la differenza tra un immagine di 1920 pixel e una di 3840 pixel, è molto grande. Se parliamo di un ecommerce e delle miniature delle immagini dei prodotti nella categoria, usare immagini più grandi del necessario ci penalizzerà e non poco. Per questo con l'HTML 5 è stato introdotto l'attributo srcset.

Supporto immagini 2x alla compressione WebP

Complice forse il fatto che i display ad alta densità di pixel non sono molto diffusi, attualmente le soluzioni per PC sono estremamente costose e di conseguenza poco diffuse se non in ambito professionale,  il supporto dei template PrestaShop per le immagini alta risoluzione non è ancora molto utilizzato. Solo i display retina di Apple introdotti nel 2010 sono utilizzati in ambito consumer. Apple comunque ha una fetta del mercato tra il 12% e 15% e, fatto salvo gli ultimi modelli, sono realmente pochi quelli dotati di display di questa tipologia. 

Una situazione rovesciata rispetto alla diffusione del formato WebP di Google, formato introdotto anch'esso nel 2010, ma ancora poco supportato, solo recentemente il browser Safari di Apple, ha finalmente introdotto il supporto a questo importante formato di compressione delle immagini.

Sono filosofie completamente diverse, la prima punta a offrire la massima qualità di visualizzazione delle immagini e testi, attraverso schermi che hanno una densità di pixel da 2 a 2.5 volte maggiore rispetto a un normale display. Praticamente è come visualizzare tutto con lo zoom,  al 200%, senza immagini 2x si vede tutto sfocato.  Ottimo secondo me per dispostivi piccoli quali i Tablet, per leggere riviste e libri con una definizione simile alla stampa, poco pratico per le altre attività come la navigazione web. Per esempio lo schermo 5K da 27 pollici di un iMac è di 5120×2880 pixel, i normali monitor IPS 4K UHT da 27 pollici presentano una risoluzione da 3840x2160 pixel. In un 27 pollici retina è condensata la risoluzione di un monitor da 49 pollici, per esempio il mio display attuale (Samsung Odyssey) ha una risoluzione di 5120x1440 pixel, perché a parità di prezzo ho preferito un pannello da 49 pollici al posto di un 27 pollici ad alta densità di pixel e medesima risoluzione? Semplice, per il mio utilizzo necessito di visualizzare più finestre affiancate, un 27 pollici anche di tipologia retina, è troppo piccolo. Ad esclusione di elaborazione grafiche destinate alla stampa, un monitor ad alta densità di pixel non ha nessun senso pratico, anzi le problematiche legate all'eccessivo ingrandimento dei contenuti rendono meno piacevole il normale utilizzo in ambito desktop.

Il formato WebP punta all'esatto opposto, ovvero permettere di bilanciare l'esigenza di velocità di caricamento dei contenuti con la qualità (leggi perché è importante). Qui nasce il problema vero delle immagini 2x, sono immagini doppie rispetto alle dimensioni realmente necessarie. Se in una pagina Web inseriamo un'immagine che deve essere visualizzata in un contenitore che ha dimensioni massime di 200x200, per i display retina dovremo inserirla da 400x400 pixel; in realtà tenendo conto degli ultimi display di questo tipo, dovremo inserire un'immagine da 500x500 pixel. Questo impatta in modo significativo sui tempi di caricamento, ed è contrario a qualsiasi buona prassi di sviluppo web

Attributo Srcset introdotto con HTML 5

Con HTML 5, i browser possono gestire le informazioni sul dimensionamento in modo da selezionare l'immagine più appropriata per il device. Lo scopo di questo attributo è velocizzare il caricamento, l'attributo src è utilizzato come immagine di "fallback" o predefinita. Se l'immagine srcset non viene caricata o il browser non la supporta, viene quindi visualizzata l'immagine indicata nell'attributo src.  

Con l'attributo srcset possiamo ottimizzare le immagini a seconda dei dispositivi. Se per esempio abbiamo la necessità di visualizzare un immagine per un desktop con risoluzione 1920x1080pixel e la stessa immagine in mobile con risoluzione massima di 500pixel, possiamo usare questo attributo per caricare due immagini diverse nei due dispositivi, così da rendere più rapido il caricamento soprattutto con l'utilizzo del tag e l'attributo media.

Esempio di implementazione lo potete trovare nel seguente articolo: How to Serve Responsive Images for Mobile, Tablet, and Desktop

In questo caso si tratta però di ottimizzazioni estreme che non troverete in template PrestaShop gratuiti o commerciali, ad esclusione di Classic Rocket di cui parleremo in seguito e pochi altri.

L'attributo srcset è usato in alcuni template per passare le immagini 2x  

Per esempio il template WareHouse usa questo attributo per passare il logo in alta risoluzione ai dispositivi con alta densità di pixel, purtroppo per ora si limita al logo. Quindi fatto salvo modifiche, che consiglio di apportare tramite il tema child, non vi sarà nessun supporto per immagini del prodotto e le immagini inserite tramite Elementor Page Builder. Non è solo nel CMS PrestaShop, pure in WordPress il supporto a srcset è stato introdotto nella versione 4.4 nel 2015, ma ad oggi l'implementazione nei template e l'utilizzo è molto limitato e complesso.

Per impostare il Retina Logo nel tema WareHouse aprire: IqitThemeEditor - Backoffice e andate in Responsive/Mobile, aggiungendo un logo con dimensioni doppie rispetto a quello impostato nel vostro template alla voce: "Retina logo".

Perché usare srcset per le immagini ad alta definizione? In realtà non è solo questione di prestazioni e ottimizzazione, non è solo per evitare penalizzazione da parte di Google in SERP, non è solo per evitare che gli utenti abbandonino la navigazione. Il problema è che se l'immagine è più grande del suo contenitore, apparirà male sui display non retina, ovvero ad oltre il 90% dei vostri visitatori.

L'utilizzo di scrset per passare le immagini 2x, va comunque ponderato, se da un lato è vero che un iPhone, iPad e iMac con display retina visualizzerebbero le immagini adatte e non sgranate, dall'altro gli stessi dispositivi dipendono dalla tecnologia attuale e dai limiti della stessa sia del protocollo HTTP che della velocità di connessione a Internet. Per esempio se vogliamo mettere una immagine a alta risoluzione del classico formato per desktop per una slide, quindi con larghezza di 1920 pixel, ci troveremo a dover caricare un immagini da 3840 pixel e con un peso che supera gli 8MB se a qualità altissima: 100% e di circa 3MB per la qualità alta: 60%. Con connessioni 5G o fibra si noterebbe solo un leggero rallentamento, ma con connessioni più lente la cosa cambia. 

Non solo, l'hosting dove risiede il nostro ecommerce serve contemporaneamente più immagini e file a più utenti. La banda a disposizione non è infinita, e costa molto, per avere una banda di 1Gbit/s tutta dedicata a voi, necessitate di un server dedicato. Nella maggioranza dei casi avrete una banda massima di circa 100mbit/s. Se avete poche visite, non avrete grandi problemi a parte vendere poco, se ne avete molte una mancata ottimizzazione anche delle sole immagini, vi può costare caro come la necessità di avere più server su cui bilanciare il traffico. 

Molte soluzioni hosting hanno un limite nel numero di file, generare immagini ad alta definizione, o per ottimizzare lato mobile, magari anche in WebP, può portare ad avere 6 immagini per ogni formato. PrestaShop per le immagini genera 7 formati diversi, per un singolo prodotto potremo trovarci 42 file di immagine e un catalogo di 1000 prodotti genererebbe 42.000 immagini. 

Alta definizione: ambiente e uso responsabile del traffico dati.

Una curiosità, tali problematiche sono state trattate anche dagli ambientalisti, che hanno proposto la limitazione dei contenuti 4K delle piattaforme di streaming. E non hanno del tutto torto, che senso ha guardare un film in 4K su un cellulare con schermo da 5 pollici se non quello di produrre più CO2? La problematica si presentò nel 2020 durante la pandemia, la richiesta di contenuti in streaming stava mettendo a dura prova la rete, non solo i consumi elettrici, così l'unione Europea dovette far fonte all'aumento del traffico di rete, tra Smartworking, E-learning, Gaming online e acquisti online. Chiese così un uso responsabile del consumo di dati da parte degli operatori del settore. Netflix e Youtube decisero di interrompere la fornitura di contenuti in alta definizione. Molti altri servizi nelle ore di punta passarono alla definizione standard. Ben pochi clienti se ne sono accorti, anche perché in display di piccole dimensioni la differenza tra 4K e full HD è non apprezzabile.

In piena pandemia Covid, Netflix e Youtube accettarono di ridurre la qualità dello streaming per il bene della rete.

Le immagini 2x impostate con l'attributo srcset è consigliato utilizzarle solo per il proprio logo e le miniature prodotto.

Come verificare se sono implementate le immagini ad alta definizione?

Come premesso, i display a alta definizione non sono molto diffusi, e non sono adatti a tutti gli utilizzi. Quindi se non abbiamo un monitor ad alta densità di pixel, come possiamo verificare che il nostro srcset sia correttamente implementato?

Abbiamo diverse modalità per farlo, la prima è molto semplice, basta installare l'estensione Chrome: Retina Check Extension

Un'altra possibilità più adatta agli sviluppatori è l'uso della console di Chrome utilizzando i Dispositivi Emulati.

Dispositivi Emulati

Nella selezione dei dispositivi emulati, andiamo a inserire un nuovo dispositivo cliccando su "Modifica..."

Emula display retina

Indicando nella cella "Rapporto pixel del dispositivo" il rapporto 2 o 2.5. Analizzando la pagina con gli strumenti per sviluppatore dei Chrome, potremo ora verificare quali immagini sono caricate nel browser.

Conclusioni

Nello sviluppo web è importante tenere a mente alcuni dati, nel 2022:

  • In ambito mobile il 72% dei dispositivi è Android, seguito da un 27% di iOS.
  • In ambito desktop i sistemi Windows sono oltre il 75%, OS X si attesta al 15%
  • Tra questi, i dispositivi con display ad alta densità di pixel sono una percentuale molto esigua e del tutto trascurabile.
  • L'accessibilità è molto trascurata, malgrado le statistiche parlino di 43 persone su 100 con disturbi alla vista. Quasi 2 milioni di persone in Italia ha disabilità visiva, il 15% è cieco assoluto e l'85% ipovedente.
  • Il 66% delle connessioni internet in Italia è sotto i 30mbit/s, solo il 20% arriva almeno a 100mbit/s. E solo grazie alla pandemia c'è stata un miglioramento della situazione, ma ancora un terzo delle famiglie è senza connessione.

Alla luce dei dati, è molto più importante oggi progettando un'interfaccia web puntare sulla velocità di caricamento, sull'esperienza utente e prestare più attenzione all'accessibilità. È necessario bilanciare e ponderare le varie esigenze, tenendo presenti i limiti delle tecnologie e soprattutto chi non ha accesso alle ultime novità di mercato o non vive in metropoli servite dalla fibra o dal connessioni 5G e andrebbe prestata più attenzione a chi è meno fortunato e deve fare i conti con qualche disabilità.  Purtroppo su questo ultimo punto pecchiamo tutti, sia nel settore privato che pubblico.

Autore: Loris Modena

Loris Modena

SENIOR DEVELOPER

Per Ind Loris Modena titolare di Arte e Informatica, inizia a lavorare nel settore informatico nel 1989 quale sistemista addetto alla manutenzione e installazione di sistemi informatici. Inizia a programmare per il web nel 1997 occupandosi di programmazione CGI in PERL e successivamente passando alla programmazione in PHP e JavaScript. In questo periodo si avvicina al mondo Open source e alla gestione di server Linux. 

prodotto aggiunto alla lista