Dopo il lancio del nuovo iPad ci sono state molte discussioni su come i siti web avrebbero aggiornato la propria grafica per ottimizzarla con il retina display del dispositivo. Una ottimizzazione che riguarderebbe non solo il nuovo iPad, ma tutti i dispositivi con schermi HiDPI già disponibili sul mercato o che lo saranno presto.
Per quanto riguarda le applicazioni, abbiamo già avuto modo di vedere e constatare come, grazie anche al controllo di Apple, tanti sviluppatori hanno già provveduto ad aggiornare le proprie app per renderle compatibili con il Retina Display. Ma se per le app la Apple fornisce gli strumenti utili per implementare questa ottimizzazione, lo stesso non può dirsi per i siti web.
Apple, ovviamente, ha subito aggiornato il proprio sito ufficiale con una serie di immagini ad alta risoluzione, in modo che queste siano ottimizzate per il Retina Display. Par farlo, Apple ha usato javascript per sostituire le immagini classiche con quelle ad alta risoluzione. Lo svantaggio di questo approccio è che è costoso, soprattutto se si offrono tutte immagini ad alta risoluzione, in quanto viene richiesta maggiore banda dato che ogni immagine può essere di 4 o più volte superiore rispetto a quelle classiche. Bisogna, quindi, pagare un server più potente. Offrire un’immagine normale che poi passa ad alta risoluzione su schermi compatibili, poi, è ancora più costoso perchè si stanno offrendo entrambe le immagini sulla stessa pagina.
Phil Webb di Mobify.com offre una serie di buoni consigli per chi vuole aggiornare il proprio sito web e renderlo compatibile con il Retina Display: creare immagini dalle dimensioni doppie che siano vincolate dagli attributi CSS in altezza e larghezza, non usare immagini per mostrare del testo e selezionare solo quelle immagini che davvero hanno bisogno di essere viste in alta risoluzione.
Utilizzando alcuni trucchi come i media queries CSS, si possono caricare immagini ad alta risoluzione senza pesare troppo sulla banda richiesta. Inoltre, è consigliabile utilizzare immagini JPG progressive, in quanto il WebKit integrato in molti browser pone limiti sulle dimensioni delle immagini e questo potrebbe entrare in conflitto con le foto ad alta risoluzione.
Il lavoro di ottimizzazione dei siti è appena iniziato, ma questi sono i primi consigli che esperti del settore hanno voluto condividere con gli utenti. Bisogna quindi valutare il target di utenze, quali immagini convertire, sfruttare i media queries di CSS e soprattutto usare immagini JPG progressive che possono essere realizzate con app quali Photoshop o Aperture.