Retina Display, cos’è?
Per chi crea siti web, sicuramente uno degli aspetti principali è cercare di rendere la struttura “perfetta” con l’utilizzo di immagini accattivanti e di buona qualità, ma non sempre queste sembrano essere corrette a meno che non vengano visualizzate da un dispositivo Apple.
Ma cosa sono le immagini Retina Display?
Dopo gli smartphone, anche gli schermi si sono evoluti, Apple ha lanciato il Retina Display, ovvero un display a cristalli liquidi con una maggiore densità di pixel. Questa nuova generazione di display non è esclusivo solo per i dispositivi Apple, infatti anche molti degli smartphone e tablet delle altre case produttrici ne sono dotati, solo che vengono chiamati in altri modi.
A contrasto con questo effetto di assoluta nitidezza, evidente soprattutto nelle applicazioni di sistema, alcune immagini web risultano con una resa assolutamente inferiore. Perché succede questo? La maggiore densità di pixel fa sì che le immagini nelle pagine web che non supportano la risoluzione retina vengano “sovraccampionate”, in modo da essere visualizzate nella dimensione originale, ma con un’area composta da più pixel di prima. Questo meccanismo purtroppo presenta dei problemi, evidenti soprattutto sui bordi, che possono diventare leggermente sfocati.
Per ottimizzate la grafica ci sono dei trucchi a cui si può fare riferimento, come:
- ottimizzare la Retina Display utilizzando i fogli di stile, in modo da identificare i display ad alta risoluzione e fornire le risorse realizzate opportunamente. Quindi per tutte le risorse utilizzate nel foglio di stile, si può creare una versione ad alta risoluzione (raddoppiando le dimensioni in pixel);
- Gestire le immagini inserite nella pagina utilizzando la risorsa a doppia dimensione in pixel e utilizzare gli attributi width e height del tag <img> in modo da aggiustare la dimensione a video dell’immagine.
Questa soluzione presenta però due svantaggi:
- può aumentare (anche di parecchio a seconda del numero e delle dimensioni delle immagini) il peso della pagina, anche per chi poi non trae beneficio dalle immagini a più alta risoluzione;
- in alcuni browser (ad esempio Internet Explorer) ci possono essere problemi di resa nelle immagini sottocampionate e quindi si rischia di peggiorare l’effetto in più casi di quelli in cui effettivamente si migliora!
Perciò se ora mentre navigate con il vostro tablet, o smartphone e noterete un sito che ha le immagini un po’ sgranate, saprete distinguere la differenza tra immagini Retina Display e non.
