Disegnare per il Retina Display, come ottimizzare e progettare un sito web per Immagini @2x

Massima definbizione delle immagini con il Retina display

Massima definbizione delle immagini con il Retina display

Il Retina Display , da non confondere con il Virtual retinal display (wiki: http://en.wikipedia.org/wiki/Virtual_retinal_display), è un nome di marchio usato da Apple per il display a cristalli liquidi che  hanno un’ alta densità di pixel alta tanto che l’occhio umano non è in grado di notare scalettature se posto a una normale distanza di visione. Il termine è usato per diversi prodotti Apple , tra cui l’ iPhone , iPod Touch , iPad, MacBook Pro , iPad Mini e iPad Air . Dal novembre 2012 il termine ” Retina ” è stato approvato dalla US Patent and Trademark office ed e’ cosi’ diventato un marchio registrato da Apple.
Abbiamo parlato di “normale distanza di visione”, ma questa misura è differente  a seconda dell’uso e del dispositivo utilizzato. Detto questo possiamo affermare che i pixel per pollice (PPI) necessari per considerare la qualità dello schermo di tipo “Retina” possono variare a seconda delle dimensioni dello schermo stesso. Avremo quindi un maggiore numero di PPI nei i display più piccoli e un più basso PPI nei display più grandi. Ad esempio 326 PPI è usato da Apple per i dispositivi più piccoli , come iPhone (dal 4 in poi) , iPod Touch (dalla 4 generazione) e iPad Mini ( dalla 2 ° generazione )  , mentre una desità di 264 PPI viene usata per i dispositivi di medie dimensioni come  iPad ei iPad Air , mentre 220 ​​PPI sono presenti nei i dispositivi più grandi come i portatili MacBook Pro con retina display.
iPhone-5S-iPad-Mini_iPad_Retina_displayC’e’ da notare che quando un prodotto Apple ha un display Retina  ciascun elemento dell’ interfaccia utente è raddoppiato in larghezza e in altezza al fine di compensare i pixel più piccoli;  Apple chiama questa modalità modalità HiDPI .

Gli schermi sono prodotti da fornitori diversi. Attualmente, il display dell’iPad viene realizzato da Samsung,  mentre touch display del MacBook Pro, iPhone, e iPod sono realizzati sia da LG che Samsung.

Apple ha commercializza i seguenti dispositivi come aventi Retina Display:

Modello PPI (pixels per inch) ppcm (pixels per cm) Resolution Totale Pixels Normale distanza di visione (in/cm) Pixels per degree (PPD)
iPhone 4/4S e iPod Touch (4a generatione) 326 128 960×640 614,400 10 inches (25 cm) 57
iPhone 5/5S/5C e iPod Touch (5a generation) 1136×640 727,040
iPad (3a/4a generatione/iPad Air) 264 105 2048×1536 3,145,728 15 inches (38 cm) 69
iPad Mini (2a generatione) 326 128 2048×1536 3,145,728 15 inches (38 cm) 85
MacBook Pro con Retina Display 15″ 220 87 2880×1800 5,184,000 20 inches (51 cm) 77
MacBook Pro con Retina Display 13″ 227 89 2560×1600 4,096,000 20 inches (51 cm) 79

Altri dispositivi ad alta densità di pixel

  • Cellulari e lettori multimediali con 5 pollici hanno oramai  1280 x 800 display a pixel
  • Tablet con 10 pollici hanno 2560 x 1440 display a pixel (es. dalla 3a generazione Ipad e dalla 2a iPad Mini)
  • Ultrabook con 11 pollici parte con 2560 x 1440 display a pixel
  • Ultrabook con 13 pollici parte con 2800 x 1800 display a pixel
  • La risoluzione dei computer portatili da 15 pollici sarà 3840 x 2160 display a pixel
  • All-in-one desktop (iMac e PC) riceveranno con 3840 x 2160 display a pixel

Comprensione del concetto di Retina
Nel migliore dei termini , Retina Display , è una visualizzazione ad alta definizione  ma, prima di entrare nel dettaglio su come creare e ottimizzare immagini pronte per questo tipo di definizione grafic, è necessario comprendere la tecnologia che c’e’ sotto.

In primo luogo , cerchiamo di analizzare alcuni termini :

  1. DPI: I punti per pollice, noti anche con il termine inglese dots per inch da cui l’acronimo , sono la quantità di informazioni grafiche che possono essere rese da un dispositivo di output (stampante grafica, plotter, RIP, schermo) o fornite da un dispositivo di input (scanner, mouse). Con il DPI si esprime la quantità di punti stampati o visualizzati su una linea lunga un pollice (2,54 cm). Ad un valore più elevato corrisponde una risoluzione maggiore ed una migliore resa sulle linee inclinate.
  2.  Pixels per inch (PPI) E ‘diventato un luogo comune  riferirsi a PPI come DPI, non è corretto perché PPI si riferisce sempre alla risoluzione di input. Teoricamente, il PPI può essere calcolato conoscendo la dimensione diagonale dello schermo in pollici e la risoluzione in pixel (larghezza e altezza).
  3.  Device pixel (Pixel del dispositivo) è la più piccola unità fisica visualizzata.
  4.  Pixel density (Densità di pixel) è il numero di pixel visualizzati in un dato spazio .
  5.  La risoluzione è il numero di pixel dell’intera larghezza o altezza di un dispositivo.
  6.  Pixels per inch (Pixel per pollice) , ppi o dpi , è la quantità di pixel che si ottiene quando si divide la larghezza fisica del display per il numero di pixel orizzontali visualizzate .
  7.  High DPI (Alto DPI) è una densità esposizione di 200 pixel per pollice o superiore .

Dovremo ora essere in grado di capire che si può avere un iPad e un piccolo monitor da tavolo con la stessa dimensione fisica ma diverse densità di pixel . L’iPad , ripetto al vecchio monitor, avrà molti più pixel  all’interno dello spazio disponibile per lo schermo e per questo il display sarà di più alta qualità e di elevata definizione visto che ha un più alto DPI . Quindi stessa dimensione del display ma più pixel , il che significa un’ alta visualizzazione DPI.

DPI Calculator / PPI Calculator per displays con pixel quadrati o square pixels

Dati Display

pixels
1536 pixels
inches (246.4 mm)

Display size: 7.76″ × 5.82″ = 45.16in² (19.71cm × 14.78cm = 291.37cm²) at 263.92 PPI, 0.0962mm dot pitch, 69652 PPI²

La maggior parte delle immagini vengono ancora  realizzate in 72 dpi per schermi standard. Tuttavia , DPI di Retina è molto più grande e quelle immagini sarannno sfocate se non sono adattate a tali risoluzioni . Questo è il motivo per cui avete bisogno di ottimizzare le immagini per i dispositivi ad alta DPI .

Le Unità pixel sono relative alla risoluzione del dispositivo di visualizzazione, che di norma è uno schermo di computer , di tablet o di smartphone. Se la densità di pixel del dispositivo è molto differente da quella di un tipico display per computer, il browser (attraverso l’user agent) dovrebbe ridimensionare i valori di pixel. Qundo si lavora per un sito web (o per una Web View di un’applicazione) e si deve progettare una pagina che verrà mostrata dal browser oppure da una Web view si consiglia di lavorare con il CSS.

retina_display_come_disegnare_capire

Normal and Retina Display density
Fonte: http://internetmarketingsynergies.com/website-design/retina-displays-is-your-fully-responsive-website-optimised-for-them/

Wikipedia definisce il CSS (Cascading Style Sheets o Fogli di stile) come un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML ad esempio in siti web e relative pagine web. Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C. L’introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti, garantendo contemporaneamente anche il riuso di codice ed una sua più facile manutenibilità.

CSS-Pixels_Device-Pixels_retina-display


Differenze tra CCS e Device Pixels
http://internetmarketingsynergies.com/website-design/retina-displays-is-your-fully-responsive-website-optimised-for-them/

CSS e Device Pixels

Un pixel è un punto fisico dello schermo , la definizione di  ‘CSS pixel’ si riferisce invece a un pixel come definito nelle reference del “CSS 2″ ovvero ” il numero intero di pixel del dispositivo che meglio approssima il pixel di riferimento. Si raccomanda che il pixel di riferimento sia l’angolo di visuale di un pixel su un dispositivo con una densità di pixel di 96dpi e una distanza dal lettore della lunghezza di un braccio. Per la lunghezza di un braccio nominale usiamo la misura di 28 pollici (Nota: 70,0 cm = 27,56 pollic), l’angolo visivo è quindi di circa 0,0213 gradi.

Quindi un pixel CSS corrisponde a un pixel nei normali dispositivo con semplici display. Tuttavia, per gli schermi ad altissima risoluzione come il “Retina Display” in cui il sistema operativo bilancia le sue dimensioni normali raddoppindole, un pixel CSS può corrispondere a 2 pixel di  del dispositivo.

Ora consideriamo che abbiamo anche una funzione di ‘zoom’ nella maggior parte dei browser, che naturalmente modifica la dimensione del pixel CSS (insieme a tutte le altre unità) in modo che non corrisponderà a un pixel del dispositivo.

Tipicamente, 1 pixel sul dispositivo sarà lo stesso di 1 pixel in CSS. Su un dispositivo con una densità molto elevata di pixel, si potrebbe scoprire che la sua dimensione in pixel CSS è in realtà  2 pixel fisici, ma non conosco eventuali dispositivi che lo fanno. Nemmeno l’iPhone 4, con il suo display Retina, adeguerà la sua dimensione in pixel CSS.

Immagini Rasterizzate e Bitmap

Le immagini bitmap sono un problema quando si tratta di costruire elementi dell’ interfaccia utente perché risulteranno sgranate (pixelate) o sfocate quando si scalano.

Differenza tra immagine vettoriale e rasterFonte: http://www.deskshare.com/lang/it/help/fp/UnderstandingVectorGraphics.aspx

Differenza tra immagine vettoriale e raster
Fonte: http://www.deskshare.com/lang/it/help/fp/UnderstandingVectorGraphics.aspx

Un immagine raster – o bitmap – si basa su una struttura di dati ad aghi il che significa che è basata su una griglia rettangolare di pixel . I file raster più comuni sono JPG , PNG e GIF . Le immagini raster sono caratterizzate dal fatto di essere renderizzate pixel per pixel , dove ogni pixel corrisponde individualmente ad una particolare tonalità, saturazione , luminosità , opacità e posizione all’interno l’intera immagine . L’unica cosa fondamentale da notare su immagini raster è che sono dipendenti dalla risoluzione , il che significa che non possono ingrandite senza perdere la qualità di visualizzazione .

Nella risoluzione standard , 1 bitmap pixel di un’immagine raster è equivalente a 1  pixel del dispositivo. In Retina Display , 1 bitmap pixel di un’immagine raster è equivalente a 4 pixel del dispositivo . Al fine di accogliere la modifica , display Retina moltiplica un pixel bitmap da quattro. Se l’immagine viene visualizzata nella stessa dimensionequesta risulterà sfocata .

Cio’ che possiamo fare è,  in primo luogo,  avere un’immagine che sia il doppio in termini di dimensioni e che verrà dimezzata con il codice per essere visualizzata  sulretina display. Qui ci sono tre metodi comuni :HTML and CSS, JavaScript, Media Queries

HTML e CSS

È possibile usare l’HTML e CSS per dichiarare la dimensione di un’immagine in modo che appaia la metà di quello che effettivamente è. Quindi, se si dispone di un’immagine che si suppone essere 150 di larghezza e 200px di altezza. È necessario disporre di questa immagine ad una rioluzione doppia ovvero  300px di altezza e 400px di larghezza. Attraverso HTML è possibile specificare l’immagine di essere la metà di quella dimensione.

<img src="mia_immagine@2x.png" width="150" height="200" />
Come potete vedere, questo è un concetto molto semplice e lineare. Tuttavia, è possibile anche utilizzare i CSS per definire le dimensioni dell’immagine. Così, ancora una volta, se si dispone di un’immagine che è 300px per 400px, ma dovrebbe essere visualizzato in 150px da 200px provate definendo la sua larghezza e l’altezza in questo modo:
.image{
     background: url (mia_immagine@2x.png);
     background-size: 150px 200px;
     width: 150px;
     height: 200px;
}

 Si prega di notare che la proprietà background-size,  come suggerisce il nome , definisce le dimensioni del fondo.

Si può anche provare a definire con CSS la larghezza e l’altezza delle immagini al 50%. Questo può essere fatto attraverso una classe se si desidera raggiungere solo immagini fisse o se si desidera applicare a tutte le immagini basta usare il tag img.

.image{
     height: 50%;
     width: 50%;
}
img{
     height: 50%;
     width: 50%;
}

JavaScript

Con l’aiuto di jQuery, è possibile bloccare le immagini alla metà delle proprie larghezze e altezze. Funziona esattamente allo stesso modo come l’esempio CSS con larghezza 50% e le dichiarazioni di altezza.

$(window).load(function() {
     var images = $('img');
     images.each(function() {
          $(this).width($(this).width() / 2);
          $(this).height($(this).height() / 2);
     )};
)};

Media Queries

Un altro modo è quello di scambiare le immagini a seconda del dispositivo utilizzato  in modo da visualizzare il sito in un dispositivo dotato di Retina o meno. Si deve però disporre di due serie di immagini, l’immagine normale e un’altra che deve essere due volte la sua dimensione (@2x). È quindi utile utilizzare le media query per puntare le immagini specifiche e quindi se si tratta di un dispositivo di Retina Display verrà utilizzata l’immagine più grande.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
.image{
     background: url (myIMG@2x.png);
}
}

Grafica vettoriale scalabile (Scalable Vector Graphics)

Differenze tra BMP (raster) e Vettore (SVG) Fonte; http://akvector.wordpress.com/

Differenze tra BMP (raster) e Vettore (SVG)
Fonte; http://akvector.wordpress.com/<s/mall>

I vettori

A differenza delle immagini raster, le immagini SVG  (Scalable vector graphics), o semplicemente vettori, hanno un grande vantaggio per Retina Display che è quello che possono allargarsi o rimpicciolirsi senza che l’immagini risulti sfocata o sgranata. Il modo in cui i vettori sono costruiti è attraverso elementi geometrici primitivi come linee, punti, forme o curve che sono solo un espressione matematica, e questo è ciò che dà loro la possibilità di scalare senza distorsioni o sfocature.

.mia_immagine {
background-image: url(mia_immagine.svg);
background-size: 150px 200px;
height:150px; width:200px;
}

I file SVG sono, per cosi’ dire, a prova di futuro a causa della loro capacità di scala infinite. Un immagine in formato SVG si adatterà a qualsiasi densità di pixel quindi è sufficiente inserire l’immagine in HTML  e si adatterà e regolerà per la risoluzione.Proprio per questo il motivo si desidera utilizzare immagini vettoriali al posto di immagini raster. L’unico problema è  he non tutte le vecchie versioni dei browser supportano il formato .SVG come possiamo notare nella tabella seguente:

  IE Firefox Chrome Safari Opera
27 versions back     4.0: Supported    
26 versions back     5.0: Supported    
25 versions back   2.0: Partial support 6.0: Supported    
24 versions back   3.0: Supported 7.0: Supported    
23 versions back   3.5: Supported 8.0: Supported    
22 versions back   3.6: Supported 9.0: Supported    
21 versions back   4.0: Supported 10.0: Supported    
20 versions back   5.0: Supported 11.0: Supported    
19 versions back   6.0: Supported 12.0: Supported    
18 versions back   7.0: Supported 13.0: Supported    
17 versions back   8.0: Supported 14.0: Supported    
16 versions back   9.0: Supported 15.0: Supported    
15 versions back   10.0: Supported 16.0: Supported    
14 versions back   11.0: Supported 17.0: Supported    
13 versions back   12.0: Supported 18.0: Supported   9.0: Supported
12 versions back   13.0: Supported 19.0: Supported   9.5-9.6: Supported
11 versions back   14.0: Supported 20.0: Supported   10.0-10.1: Supported
10 versions back   15.0: Supported 21.0: Supported   10.5: Supported
9 versions back   16.0: Supported 22.0: Supported   10.6: Supported
8 versions back   17.0: Supported 23.0: Supported   11.0: Supported
7 versions back   18.0: Supported 24.0: Supported 3.1: Partial support 11.1: Supported
6 versions back 5.5: Not supported 19.0: Supported 25.0: Supported 3.2: Supported 11.5: Supported
5 versions back 6.0: Not supported (but has polyfill available) 20.0: Supported 26.0: Supported 4.0: Supported 11.6: Supported
4 versions back 7.0: Not supported (but has polyfill available) 21.0: Supported 27.0: Supported 5.0: Supported 12.0: Supported
3 versions back 8.0: Not supported (but has polyfill available) 22.0: Supported 28.0: Supported 5.1: Supported 12.1: Supported
2 versions back 9.0: Supported 23.0: Supported 29.0: Supported 6.0: Supported 15.0: Supported
Previous version 10.0: Supported 24.0: Supported 30.0: Supported 6.1: Supported 16.0: Supported
Current 11.0: Supported 25.0: Supported 31.0: Supported 7.0: Supported 17.0: Supported
Near future   26.0: Supported 32.0: Supported   18.0: Supported
Farther future   27.0: Supported 33.0: Supported    

 

  iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Chrome for Android Firefox for Android IE Mobile
6 versions back     2.1: Not supported   10.0: Supported      
5 versions back 3.2: Supported   2.2: Not supported   11.0: Supported      
4 versions back 4.0-4.1: Supported   2.3: Not supported   11.1: Supported      
3 versions back 4.2-4.3: Supported   3.0: Supported   11.5: Supported      
2 versions back 5.0-5.1: Supported   4.0: Supported   12.0: Supported      
Previous version 6.0-6.1: Supported   4.1: Supported 7.0: Supported 12.1: Supported      
Current 7.0: Supported 5.0-7.0: Supported 4.2-4.3: Supported 10.0: Supported 16.0: Supported 30.0: Supported 25.0: Supported 10.0: Supported
Near future     4.4: Supported          
Farther future                
Photoshop e Illustrator sono utili

Lavorando con Photoshop  la soluzione è quella di creare una tinta unita , un modello o strati gradiente con maschere vettoriali [solid color, pattern or gradient layers with vector masks] assicurandosi di avere lo snap to pixel acceso, se possibile.

icon_vector_rounded_rectangle-options

Fonte: http://bjango.com/articles/designingforretina/

Fonte: http://bjango.com/articles/designingforretina/

Il passaggio ai vettori ha dei vantaggi significativi. Solitamente si disegnano elementi semplici direttamente in Photoshop utilizzando il rettangolo o lo strumento rettangolo arrotondato . Le circonferenze e i cerchi li disegno con lo strumento rettangolo arrotondato con un ampio raggio d’angolo , perché lo strumento ellisse non presenta lo snap to pixel. Gruppi di layer possono avere anche maschere vettoriali , ciò è utile per il compositing complesso (opzione-trascinare una maschera da un altro livello per creare una maschera di gruppo)..

Oggetti più complessi possono essere trascinati in Illustrator, quindi incollati in Photoshop come shape layer. E’ necessario fare attenzione quando si incolla in Photoshop in quanto il risultato non sempre viene allineato come dovrebbe – è spesso un mezzo pixel fuori l’asse x, l’ asse y o entrambi. La soluzione è di ingrandire e scorrere il documento con lo strumento Mano (hand tool) e incollare di nuovo. Ripetiamo l’operazione fino a quando tutto si allinea, funziona putroppo solo dopo alcuni tentativi.
Un’altra opzione è quella di zoom al 200%, selezioniamo il tracciato con lo strumento selezione diretta e selezioniamo una volta, questo muoverà tutto esattamente di 0.5px.

Anche gli oggetti più complessi, che richiedono più colori vengono disegnati in Illustrator per l’esatta dimensione dei pixel, quindi incollati in Photoshop come oggetto avanzato. E’ l’ultima risorsa se ​​- gradienti non sono dithering e la modifica è in seguito più difficile.

Se avete bisogno di usare un bitmap per una texture, ci sono tre opzioni: Usa uno pattern layer, uo pattern layer style o costruisci un layer bitmap con le dimensioni 2× e poi trasformarlo in uno smart object. Spesso si preferisce usare i pattern layer styles, nella maggior parte dei casi, ma attenzione, i modelli vengono scalati con l’interpolazione bicubica quando si scala l’intero documento (in modo che diventi più morbida quando in scala). La soluzione è creare due versioni di ogni modello e cambiare manualmente gli stili di livello pattern (pattern layer styles) per il modello corretto dopo la scalatura. Un po ‘noioso, ma assolutamente fattibile, basta non dimenticare.

 Conclusioni

L’informatica è una continua evoluzione e spesso il designer, a cui mancano forti basi matematiche o a cui manca una visone profondamente tecnica del suo lavoro, ha serie difficoltà ad aggiornarsi sulle ultime tecniche di programmazione non potendone comprendere tutti gli aspetti che impattano sulla visualizzazione sui dispositivi . Ritengo che i Retina Display possono risultare un incubo per quei designers che non hanno lavorato, in passato, con immagini grandissime  o per chi non ha lavorato esclusivamente in vettoriale. Ovviamente  non tutte le immagini che troverete nel vostro archivio potranno essere di formato vettoriale (SVG) e non avrete la vita facile per quei files , come vecchie foto o iconcine, che non posseggono la qualità di poter essere allargate senza perdere qualità.

 

ALLEGATO:

Dimensioni del display di monitors degni di nota e comuni , PCs, notebooks, tablets, phablets, smartphones and HMDs:

Un commento:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*