Share
Rendere il tuo sito Web pronto per il display Retina non deve essere una seccatura. Sia che tu stia costruendo un nuovo sito Web o aggiornando uno esistente, questa guida è progettata per aiutarti a svolgere il lavoro senza intoppi.
A proposito, se stai cercando una soluzione rapida, dai un'occhiata ai temi Retina-ready su Envato Market, come Rebound - Responsive Multipurpose Retina Theme.
Rimbalzo - Tema multiuso reattivo per la retina Il modo più semplice e più rapido per aggiungere il supporto Retina è creare un'immagine ottimizzata per i dispositivi Retina e servirla anche su dispositivi non Retina.
Ormai, ogni browser moderno utilizza il ricampionamento bicubico e fa un ottimo lavoro con le immagini downsampling. Ecco un confronto tra il downsampling in Photoshop e Google Chrome, utilizzando un'immagine dal nostro sito Web di Growth Engineering 101.
Esistono due modi per consentire al browser di ridimensionare le immagini per te: img tag o immagini di sfondo CSS.
Puoi avere img i tag servono l'immagine ottimizzata per Retina e impostano gli attributi width e height a metà della risoluzione dell'immagine reale (ad es. 400x300 se le dimensioni dell'immagine sono 800x600).
Se si utilizzano immagini come sfondi CSS, è possibile utilizzare il CSS3 background-size proprietà per il downsampling dell'immagine per dispositivi non Retina.
.foto background-image: url (Retina-image-800x600-2x.png); dimensione di sfondo: 400px 300px; background-repeat: no-repeat; blocco di visualizzazione; larghezza: 400 px; altezza: 300 px;
In entrambi i casi, assicurati di utilizzare numeri pari in entrambe le dimensioni per impedire lo spostamento dei pixel quando l'immagine viene sottocampionata dal browser.
Di solito, il downsampling del browser dovrebbe funzionare abbastanza bene. Detto questo, ci sono alcune situazioni in cui il downsampling nel browser potrebbe rendere le immagini sfocate.
Qui abbiamo un sacco di 32px icone sociali.
Ed ecco come appariranno, quando sottocampionati 16px da Photoshop e dal filtro bicubico di Google Chrome. Sembra che in questo caso otteniamo risultati migliori da Photoshop.
Per ottenere i migliori risultati per i nostri utenti, possiamo creare due versioni della stessa immagine: una per i dispositivi Retina e un'altra che è stata sottoposta a downsampling da Photoshop per dispositivi non Retina..
Ora è possibile utilizzare le query multimediali CSS per pubblicare immagini Retina o non Retina, in base alla densità di pixel del dispositivo.
/ * CSS per dispositivi con schermi normali * / .icons background-image: url (icon-sprite.png); background-repeat: no-repeat;
/ * CSS per dispositivi ad alta risoluzione * / @media solo schermo e (-Webkit-min-device-pixel-ratio: 1.5), solo schermo e (-moz-min-device-pixel-ratio: 1.5), solo schermo e (-o-min-device-pixel-ratio: 3/2), solo schermo e (min-device-pixel-ratio: 1.5) .icons background-image: url (icon-sprite-2x.png) ; dimensione di sfondo: 200px 100px; background-repeat: no-repeat;
Se si utilizza un colore di sfondo per icone piccole, d'altra parte, il downsampling del browser funziona piuttosto bene. Ecco lo stesso esempio di downsampling con uno sfondo bianco.
Se non sei ancora soddisfatto dei risultati del downsampling di Photoshop, puoi fare il miglio supplementare e mano-optimize la versione non Retina per ottenere risultati super nitidi.
Di seguito sono riportati alcuni esempi di immagini dal sito web del prodotto Blossom che io Ottimizzata mano per coloro che sono ancora su dispositivi non Retina.
Ecco un esempio di problemi di downsampling con le linee sottili, in cui ridisegno le linee dell'immagine sottosampionata.
Visualizza la versione Retina di questa immagine su Dribbble.
Successivamente, arriviamo a un esempio di problemi di downsampling con il testo. In questo caso, ho riscritto manualmente il testo "Feature Pipeline" per rendere il risultato il più nitido possibile.
Quando i dettagli, i caratteri nitidi e le linee sottili pulite sono importanti, potresti voler fare il miglio supplementare.
I principali svantaggi delle immagini rasterizzate sono le dimensioni considerevoli del file e che non si adattano bene a dimensioni diverse senza influire sulla qualità dell'immagine. Grandi alternative alla grafica rasterizzata sono CSS, Scalable Vector Graphics (SVG) e Icon Fonts.
Se hai qualche possibilità di costruire gli elementi grafici per il tuo sito web in CSS, provaci. Può essere utilizzato per aggiungere sfumature, bordi, angoli arrotondati, ombre, frecce, ruotare elementi e molto altro.
Ecco alcuni esempi di elementi di interazione in Blossom implementati in CSS. Il gradiente sottile è alimentato dai gradienti CSS e il carattere personalizzato in uso su questo pulsante è Kievit, servito tramite Typekit. Nessuna immagine.
Nello screenshot seguente, le uniche due immagini utilizzate sono l'avatar dell'utente e il timbro blu. Tutto il resto - il punto interrogativo cerchiato, la freccia grigia scura accanto a esso, il popover, la sua ombra e la freccia sopra di esso - è puro HTML e CSS.
Qui puoi vedere come appaiono i progetti in Blossom. È uno screenshot del sito web di un progetto usato come copertina su una pila di fogli di carta. I fogli di carta sono implementati con divs che vengono ruotati usando i CSS.
Inoltre, la freccia cerchiata nella parte destra dello screenshot qui sotto è puro CSS.
Ecco alcuni strumenti fantastici che ti aiuteranno a risparmiare tempo quando crei effetti con i CSS.
Il vantaggio principale di SVG è che, a differenza della grafica rasterizzata, si adattano abbastanza bene a varie dimensioni. Se lavori con forme semplici, in genere sono più piccole di PNG. Spesso, sono usati per cose come i grafici.
Icona I caratteri vengono spesso utilizzati come sostituti degli sprite delle immagini. Analogamente a SVG, possono essere ridimensionati all'infinito senza alcuna perdita di qualità e sono di solito di dimensioni più piccole rispetto agli sprite di immagini. Inoltre, puoi utilizzare i CSS per cambiare dimensione, colore e persino aggiungere effetti, come le ombre.
Sia SVG che Icon Fonts sono ben supportati dai browser moderni.
Le favicon sono davvero importanti per gli utenti che hanno bisogno di un modo semplice per ricordare quale sito Web appartiene a quale scheda del browser. Un Favicon Retina-ready non solo sarà più facile da identificare, ma si distinguerà anche tra una folla di Favicon pixelate che non sono ancora state ottimizzate.
Per rendere il tuo Favicon Retina pronto, consiglio vivamente X-Icon Editor. Puoi caricare una singola immagine e lasciare che l'editor la ridimensiona per dimensioni diverse oppure puoi caricare immagini separate ottimizzate per ogni dimensione per ottenere i risultati migliori.
Se si desidera aggiornare un sito Web con immagini esistenti, è necessario un po 'più di lavoro, poiché sarà necessario ricreare tutte le immagini per renderle Retina-ready, ma questo non deve sprecare troppo tempo.
Innanzitutto, tentare di identificare le immagini che è possibile evitare utilizzando alternative come CSS, SVG e Image Fonts, come indicato in precedenza. Pulsanti, icone e altri comuni widget dell'interfaccia utente di solito possono essere sostituiti con soluzioni moderne che non richiedono alcuna immagine.
Nel caso in cui sia effettivamente necessario ricreare le immagini rasterizzate, è ovviamente necessario tornare ai file di origine. Come si può supporre, il semplice ridimensionamento delle immagini bitmap rasterizzate per essere due volte più grandi non comporta il completamento del lavoro, poiché tutti i dettagli e i bordi diventeranno pixelati.
Non c'è bisogno di disperare - le composizioni di immagini che contengono principalmente vettori (ad esempio in Adobe Photoshop o Illustrator) sono abbastanza facili da scalare. Detto questo, non dimenticare di verificare se i tuoi effetti di Photoshop nelle opzioni di fusione, come tratti, ombre e smussi, appaiono ancora come previsto.
In generale, creare composizioni di Photoshop direttamente da vettori (forme) e Photoshop Oggetti intelligenti ti farà risparmiare molto tempo in futuro.
Infine, ma non meno importante, l'ottimizzazione della dimensione del file di tutte le immagini in un'applicazione o in un sito Web potrebbe effettivamente risparmiare fino al 90% dei tempi di caricamento delle immagini. Quando si tratta di immagini Retina, la riduzione delle dimensioni del file diventa ancora più importante, in quanto hanno una densità di pixel maggiore che aumenterà le rispettive dimensioni dei file.
In Photoshop, puoi ottimizzare le dimensioni del file immagine, tramite la funzione "Salva per Web". Inoltre, c'è un eccellente strumento gratuito, chiamato ImageAlpha, che può ridurre ulteriormente le dimensioni delle tue immagini con una minima perdita di qualità.
A differenza di Photoshop, ImageApha può convertire i PNG dei canali alfa a 24 bit in PNG a 8 bit con supporto del canale alfa. La ciliegina sulla torta è che queste immagini ottimizzate sono compatibili cross-browser e funzionano anche per IE6!
Puoi giocare con diverse impostazioni in ImageAlpha per ottenere il giusto compromesso tra qualità e dimensione del file. Nel caso in basso, possiamo ridurre le dimensioni del file di quasi l'80%.
Quando hai finito di impostare i livelli di compressione desiderati, la finestra di salvataggio di ImageAlpha offre anche "Ottimizza con ImageOptim": un altro strumento eccezionale e gratuito.
ImageOptim seleziona automaticamente le migliori opzioni di compressione per l'immagine e rimuove le meta informazioni e i profili colore non necessari. Nel caso del nostro file di francobolli, ImageOptim è stato in grado di ridurre le dimensioni del file di un altro 34%.
Dopo aver aggiornato tutte le risorse su Blossom.io per i display ad alta risoluzione e utilizzato ImageAlpha e ImageOptim per ottimizzare le dimensioni del file, in realtà abbiamo finito per risparmiare alcuni kilobyte rispetto alle risorse che avevamo prima.
Se vuoi saperne di più su come ottenere le tue app e i tuoi siti web pronti per i display Retina, ti consiglio vivamente di "Retinafy your web sites & apps", di Thomas Fuchs. È una guida passo-passo che mi ha risparmiato un sacco di tempo e nervi.
Grazie per aver letto! Qualsiasi domanda?
Accentsconagua