I siti web e l’ottimizzazione per il Retina Display del nuovo iPad

lunedì, 26 marzo 2012 di Giuseppe Migliorino in Approfondimenti

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.

[via]

Per restare sempre aggiornato sul tema di questo articolo, puoi seguirci su Twitter, aggiungerci su Facebook o Google+ e leggere i nostri articoli via RSS.

Unisciti alla nostra community su Facebook! Clicca Mi Piace!
L'utilizzo del contenuto di questo articolo è soggetto alle condizioni della Licenza Creative Commons. Sono consentite la distribuzione, la riproduzione e la realizzazione di opere derivate per fini non commerciali, purché venga citata la fonte.
  • Biscio

    Secondo me questo passaggio si può considerare un arma a doppio taglio,da possesore del nuovo ipad potrei essere felice del cambiamento ma,ho dei dubbi.Sicuramente con l’upgrade dei siti ci troveremo ad affrontare il problema della quantità di dati che il dispositivo deve scambiare col server prima che esso ci possa far vedere la “nuova pagina in hd”,quindi una maggiore lentezza della rete per un maggiore consumo di traffico dati che,per chi ha un piano flat,potrebbero diventare un po’ pochini…Correggetemi se sbaglio!

  • Jpg

     La penso esattamente come te!

  • Cristo77

    Il retina display per navigare sulle pagine web non serve a niente! E’ assurdo modificare i siti web per adattarli all’alta risoluzione, chi costruisce siti sa che è necessario il giusto compromesso tra qualità dell immagini e dimensioni in kb delle stesse, non è accettabile quadruplicare i tempi di caricamento delle pagine per un po di risoluzione in più. La navigazione sul web è già sufficiente così e poi l’alta risoluzione dei siti non serve proprio a niente su un display da 10 pollici!!! Stiamo sfiorando il ridicolo!

  • Tama

    Io non capisco una cosa tecnica: perché il retina display soffre le foto a bassa risoluzione quando su un monitor di desktop (prendendone uno qualsiasi ad alta risoluzione) invece non cambia nulla.

  • Mat78

    In effetti è proprio così… Su un 10″ mi dici a che cavolo serve una risoluzione più alta di un televisore a 52″?
    Non solo ma se in precedenza in alcuni siti era possibile leggere senza l’obbligo di zoomare ora con l’HD sarà indispensabile…