Share
Efectuarea site-ului dvs. gata pentru afișare Retina nu trebuie să fie un hassle. Indiferent dacă construiți un site web nou sau faceți upgrade la unul deja existent, acest ghid este conceput pentru a vă ajuta să obțineți treaba fără probleme.
Apropo, daca cautati o solutie rapida, verificati temele pregatite cu Retina pe Envato Market, cum ar fi Rebina - Responsabil Multipurpose Retina Theme.
Rebound - Tema retina multifuncțională responsabilă Cea mai ușoară și cea mai ușoară modalitate de a adăuga suportul pentru Retina este crearea unei imagini optimizată pentru dispozitivele Retina și servirea acesteia la dispozitivele non-Retina.
Până acum, fiecare browser modern utilizează o reevaluare bicubică și face o treabă minunată cu reducerea imaginilor. Iată o comparație a downsampling-ului în Photoshop vs. Google Chrome, utilizând o imagine de pe site-ul Web Growth Engineering 101.
Există două moduri de a permite browserului să schimbe imagini pentru dvs.: img tag-uri sau imagini de fundal CSS.
Poti avea img etichetele servesc imaginea optimizată cu retină și setați atributele de lățime și înălțime la jumătate din rezoluția imaginii reale (de ex. 400x300 dacă dimensiunile imaginii sunt 800x600).
Dacă utilizați imagini ca fundaluri CSS, puteți utiliza CSS3 background-size proprietăți pentru a reduce imaginea pentru dispozitivele non-Retina.
.fotografie fundal-imagine: url (Retina-imagine-800x600-2x.png); dimensiune de fundal: 400px 300px; background-repeat: nu-repeta; afișare: bloc; lățime: 400px; înălțime: 300px;
În ambele cazuri, asigurați-vă că utilizați numere egale în ambele dimensiuni pentru a împiedica deplasarea pixelilor atunci când imaginea este scăzută de către browser.
De obicei, defazarea browserului ar trebui să funcționeze destul de bine. Acestea fiind spuse, există câteva situații în care downsampling-ul în browser poate face ca imaginile să fie neclare.
Aici avem o mulțime de 32px icoane sociale.
Și iată cum vor apărea ei, când vor fi aruncați în jos 16px de filtrul bicubic al lui Photoshop, precum și de la Google Chrome. Se pare că vom obține rezultate mai bune din Photoshop în acest caz.
Pentru a obține cele mai bune rezultate pentru utilizatorii noștri, putem crea două versiuni ale aceleiași imagini: una pentru dispozitive Retina și una care a fost downsampled de Photoshop pentru dispozitive non-Retina.
Acum, puteți utiliza interogările media CSS pentru a servi imagini Retina sau non-Retina, în funcție de densitatea pixelilor dispozitivului.
/ * CSS pentru dispozitive cu ecrane normale * /. Icons background-image: url (icon-sprite.png); background-repeat: nu-repeta;
/ * CSS pentru dispozitive de înaltă rezoluție * / numai pentru ecranul @media și (-Webkit-min-device-pixel-ratio: 1.5), numai ecran și (-moz-min-device-pixel-ratio: 1.5) și (-o-min-device-pixel-ratio: 3/2), numai ecranul și (min-device-pixel-ratio: 1.5) .icons background-image: url (icon-sprite-2x.png) ; dimensiune de fundal: 200px 100px; background-repeat: nu-repeta;
Dacă utilizați o culoare de fundal pentru pictogramele mici, pe de altă parte, ștergerea de eșantioane din browser funcționează destul de bine. Iată același exemplu de downsampling cu un fundal alb.
Dacă încă nu sunteți mulțumiți de rezultatele din trecerea de la eșantionul Photoshop, puteți trece la extra mile și mână-optimizarea versiunea non-Retina pentru a obține rezultate foarte clare.
Iată câteva exemple de imagini de pe site-ul de produse Blossom pe care eu Manual optimizat pentru cei care sunt încă pe dispozitive non-Retina.
Iată un exemplu de downsampling probleme cu hairlines, în cazul în care am re-desena linii de imagine downsampled.
Vedeți versiunea Retina a acestei imagini pe Dribbble.
Apoi, vom ajunge la un exemplu de subestimare a problemelor cu text. În acest caz, am re-scris manual textul "Feature Pipeline" pentru a face rezultatul cât mai clare posibil.
Când detaliile, fonturile clare și firul de păr curat sunt importante, vă recomandăm să mergeți în plus.
Principalele dezavantaje ale imaginilor rasterizate sunt dimensiunea lor considerabilă a fișierelor și că nu se măsoară bine la dimensiuni diferite fără a afecta calitatea imaginii. Excelente alternative la grafice rasterizate sunt CSS, Vector Graphics Scalable (SVG) și Icon Fonts.
Dacă aveți vreo șansă să construiți elemente grafice pentru site-ul dvs. în CSS, mergeți la el. Poate fi folosit pentru a adăuga gradienți, margini, colțuri rotunjite, umbre, săgeți, elemente de rotire și multe altele.
Iată câteva exemple de elemente de interacțiune în Blossom care sunt implementate în CSS. Gradientul subtil este alimentat de gradientele CSS, iar fontul personalizat utilizat pe acest buton este Kievit, servit prin intermediul Typekit. Nicio imagine.
În următoarea captură de ecran, singurele două imagini folosite sunt avatarul de utilizator și ștampila albastră. Tot ce altceva - semnul întrebării încrucișate, săgeata gri închisă de lângă ea, poporul, umbra și săgeata deasupra acestuia - sunt pure HTML și CSS.
Aici puteți vedea cum apar proiectele din Blossom. Este o captură de ecran a site-ului web al unui proiect care se folosește ca acoperire pe o coală de foi de hârtie. Foile de hârtie sunt implementate cu divs care sunt rotite folosind CSS.
De asemenea, săgeata încorporată din partea dreaptă a ecranului de mai jos este CSS pură.
Iată câteva instrumente minunate care vă vor ajuta să economisiți timp când creați efecte cu CSS.
Avantajul principal al SVG este acela că, spre deosebire de grafica rasterizată, ele scaldă destul de bine la diferite dimensiuni. Dacă lucrați cu forme simple, acestea sunt de obicei mai mici decât PNG-urile. Adesea, ele sunt folosite pentru lucruri precum grafice.
Icon Fonturile sunt utilizate frecvent ca înlocuitori pentru sprite de imagini. Similar cu SVG, ele pot fi scalate infinit fără nici o pierdere de calitate și sunt, de obicei, mai mici în dimensiune, în comparație cu imaginile sprite. În plus, puteți utiliza CSS pentru a schimba dimensiunea, culoarea și chiar adăuga efecte, cum ar fi umbrele.
Ambele fonturi SVG și Icon sunt bine suportate de browserele moderne.
Favicoanele sunt foarte importante pentru utilizatorii care au nevoie de o modalitate ușoară de a-și aminti care dintre site-uri aparțin acelei taburi de browser. Un Favicon pregătit pentru Retina nu numai că va fi mai ușor de identificat, dar se va evidenția și în rândul unei mulțimi de Favicoane Pixellated care nu au fost încă optimizate.
Pentru a vă pregăti Favicon Retina, recomand foarte mult editorului X-Icon. Puteți încărca o singură imagine și permite editorului să o redimensioneze pentru diferite dimensiuni sau puteți încărca imagini separate optimizate pentru fiecare dimensiune pentru a obține cele mai bune rezultate.
Dacă doriți să actualizați un site web cu imagini existente, este nevoie de mai multă muncă, deoarece va trebui să creați din nou toate imaginile pentru a le face pregătite pentru Retina, dar acest lucru nu trebuie să risipească prea mult timp.
În primul rând, încercați să identificați imaginile pe care le puteți evita utilizând alternative cum ar fi CSS, SVG și Fonturi imagine, după cum sa menționat anterior. Butoanele, pictogramele și alte widgeturi UI comune pot fi înlocuite de obicei cu soluții moderne care nu necesită imagini.
În cazul în care trebuie să re-creați imagini rasterizate, veți dori, desigur, să reveniți la fișierele sursă. Așa cum ați putea presupune, redimensionarea pur și simplu a imaginilor bitmap rasterizate pentru a fi de două ori mai mari nu face treaba, pentru că toate detaliile și granițele vor deveni pixelate.
Nu este nevoie să disperați - compozițiile de imagine care conțin în mare parte vectori (adică în Adobe Photoshop sau Illustrator) sunt destul de ușor de mărit. Acestea fiind spuse, nu uitați să verificați dacă efectele Photoshop din opțiunile de amestecare, cum ar fi accidentele, umbrele și înclinările, apar în continuare așa cum v-ați dorit.
În general, realizarea compozițiilor Photoshop direct din vectori (forme) și din Photoshop Obiecte inteligente vă va salva mult timp în viitor.
Nu în ultimul rând, optimizarea dimensiunii fișierului pentru toate imaginile dintr-o aplicație sau un site Web ar putea economisi eficient până la 90% din timpul de încărcare a imaginilor. Când vine vorba de imagini Retina, reducerea dimensiunii fișierului devine și mai importantă, deoarece acestea au o densitate mai mare a pixelilor care va crește dimensiunile respective ale fișierelor.
În Photoshop, puteți optimiza dimensiunea fișierului imagine prin intermediul funcției "Salvați pentru Web". În plus, există o excelentă unealtă gratuită, numită ImageAlpha, care poate reduce chiar mai mult dimensiunile imaginilor dvs. cu doar o pierdere minoră de calitate.
Spre deosebire de Photoshop, ImageApha poate converti PNG-uri de canal alfa pe 24 de biți în PNG-uri pe 8 biți cu suport canal alfa. Cireasa de pe tort este că aceste imagini optimizate sunt compatibile cu browserul încorporat și chiar funcționează pentru IE6!
Puteți juca în jur cu diferite setări în ImageAlpha pentru a obține compromisul potrivit între calitate și dimensiunea fișierului. În cazul de mai jos, putem reduce dimensiunea fișierului cu aproape 80%.
După ce ați terminat setarea nivelurilor dorite de compresie, dialogul de salvare al ImageAlpha oferă de asemenea opțiunea "Optimize with ImageOptim" - un alt instrument excelent și gratuit.
ImageOptim alege automat cele mai bune opțiuni de compresie pentru imaginea dvs. și elimină informațiile inutile despre meta și profilurile de culoare. În cazul fișierului nostru de timbru, ImageOptim a reușit să reducă dimensiunea fișierului cu încă 34%.
După ce am actualizat toate materialele de la Blossom.io pentru afișări de înaltă rezoluție și am folosit ImageAlpha și ImageOptim pentru a optimiza dimensiunea fișierului, am ajuns să salvăm câteva kilobyte în comparație cu activele pe care le-am avut înainte.
Dacă doriți să aflați mai multe despre cum să obțineți aplicațiile și site-urile web pregătite pentru afișajele Retina, recomand foarte mult "Retinați site-urile web și aplicațiile" de Thomas Fuchs. Este un ghid pas cu pas, care mi-a salvat o mulțime de timp și nervi.
Vă mulțumim pentru lectură! Alte intrebari?
Accentsconagua