Share
Å gjøre nettstedet ditt klart for Retina-skjerm behøver ikke å være et problem. Enten du bygger et nytt nettsted eller oppgraderer en eksisterende, er denne veiledningen designet for å hjelpe deg med å få jobben jevnt.
For øvrig, hvis du leter etter en rask løsning, sjekk ut Retina-klare temaer på Envato Market, for eksempel Rebound - Responsive Multipurpose Retina Theme.
Rebound - Responsive Multipurpose Retina Theme Den enkleste og mest tidsbesparende måten å legge til Retina-støtte, er å skape ett bilde som er optimalisert for Retina-enheter, og servere det til ikke-retina-enheter også.
Nå bruker hver moderne nettleser bikubisk resampling og gjør en god jobb med nedsampling bilder. Her er en sammenligning av downsampling i Photoshop vs. Google Chrome, ved hjelp av et bilde fra vår Growth Engineering 101 nettsted.
Det er to måter å la nettleserprøver bilder for deg: img tagger eller CSS bakgrunnsbilder.
Du kan ha img koder tjener Retina-optimalisert bilde, og angi bredde- og høydeattributene til halvparten av oppløsningen til det aktuelle bildet (f.eks. 400x300 hvis bildedimensjonene er 800x600).
Hvis du bruker bilder som CSS-bakgrunner, kan du bruke CSS3 background-size Egenskapen til å nedtrykke bildet for ikke-retina-enheter.
.bilde bakgrunnsbilde: url (Retina-image-800x600-2x.png); bakgrunnsstørrelse: 400px 300px; bakgrunn-gjentak: ikke-gjenta; skjerm: blokk; bredde: 400px; høyde: 300px;
I begge tilfeller må du sørge for at du bruker jevne tall i begge dimensjoner for å hindre forskyvning av piksler når bildet blir nedsamplet av nettleseren.
Vanligvis bør nettleser nedsampling fungere ganske bra. Når det er sagt, er det noen situasjoner hvor nedsampling i nettleseren kan gjøre bildene uskarpe.
Her har vi en haug med 32px sosiale ikoner.
Og her er hvordan de vil dukke opp når nedsamplet til 16px av Photoshop, så vel som Google Chrome's bikubiske filter. Det ser ut til at vi får bedre resultater fra Photoshop i dette tilfellet.
For å få de beste resultatene for brukerne, kan vi lage to versjoner av det samme bildet: en for Retina-enheter, og en annen som er nedsamplet av Photoshop for enheter uten nett.
Nå kan du bruke CSS-mediesøk for å betjene retina eller ikke-retina bilder, avhengig av pikseldensiteten til enheten.
/ * CSS for enheter med normale skjermer * / .icons bakgrunnsbilde: url (icon-sprite.png); bakgrunn-gjentak: ikke-gjenta;
/ * CSS for høyoppløsningsenheter * / @media bare skjerm og (-Webkit-min-enhet-pixel-forhold: 1,5), bare skjerm og (-moz-min-enhet-pixel-forhold: 1,5), bare skjerm og (-o-min-enhet-pixel-forhold: 3/2), bare skjerm og (min-enhet-piksel-forhold: 1,5) .icons bakgrunnsbilde: url (ikon-sprite-2x.png) ; bakgrunnsstørrelse: 200px 100px; bakgrunn-gjentak: ikke-gjenta;
Hvis du bruker en bakgrunnsfarve for små ikoner, virker nedsampling av nettleseren ganske bra. Her er det samme downsampling eksempel med en hvit bakgrunn.
Hvis du fortsatt ikke er fornøyd med resultatene fra Photoshops downsampling, kan du gå den ekstra mile og hånd-optimalisere ikke-retina-versjonen for å få super skarpe resultater.
Nedenfor er noen eksempler på bilder fra Blossom produktet nettsted som jeg hånd-optimalisert for de som fortsatt er på ikke-retina-enheter.
Her er et eksempel på downsampling problemer med hairlines, hvor jeg trekker linjene i nedsamplet bildet.
Se Retina-versjonen av dette bildet på Dribbble.
Deretter kommer vi til et eksempel på nedsamlingsproblemer med tekst. I dette tilfellet skrev jeg manuelt teksten "Feature Pipeline" for å gjøre resultatet så skarpt som mulig.
Når detaljer, skarpe skrifttyper og rene hårfjerninger er viktige, vil du kanskje gå den ekstra mile.
De største ulempene ved rasteriserte bilder er deres betydelige filstørrelse, og at de ikke skaleres godt til forskjellige størrelser uten å påvirke bildekvaliteten. Gode alternativer til rasterisert grafikk er CSS, Scalable Vector Graphics (SVG) og Icon Fonts.
Hvis du har mulighet til å bygge de grafiske elementene for nettstedet ditt i CSS, må du gå for det. Det kan brukes til å legge til gradienter, grenser, avrundede hjørner, skygger, piler, rotere elementer og mye mer.
Her er noen eksempler på interaksjonselementer i Blossom som implementeres i CSS. Den subtile gradienten drives av CSS-gradienter, og den egendefinerte skrifttypen som brukes på denne knappen, er Kievit, servert via Typekit. Ingen bilder.
I det følgende skjermdumpet er de eneste to bildene som bruker brukerens avatar og det blå stempelet. Alt annet - det sirkulerte spørsmålet, den mørkegrå pilen ved siden av den, popover, skyggen og pilen på toppen av den - er ren HTML og CSS.
Her kan du se hvordan prosjekter i Blossom vises. Det er et skjermbilde av et prosjekts nettsted som brukes som omslag på en bunke med papirark. Papirarkene er implementert med divs som roteres ved hjelp av CSS.
Den sirklede pilen i høyre side av skjermbildet nedenfor er også ren CSS.
Her er noen fantastiske verktøy som vil bidra til å spare tid når du lager effekter med CSS.
Den primære fordelen med SVG er at, i motsetning til rasterisert grafikk, skaler de rimelig godt til forskjellige størrelser. Hvis du jobber med enkle former, er de vanligvis mindre enn PNG. Ofte blir de brukt til ting som diagrammer.
Ikonfonter brukes ofte som erstatning for bilde sprites. I likhet med SVG, kan de oppskaleres uendelig uten tap av kvalitet og er vanligvis mindre i størrelse, sammenlignet med bildet sprites. På toppen av det kan du bruke CSS til å endre størrelse, farge og til og med legge til effekter, for eksempel skygger.
Både SVG og Icon Fonts støttes godt av moderne nettlesere.
Favikoner er veldig viktige for brukere som trenger en enkel måte å huske hvilken nettside tilhører hvilken nettleserfane. En Retina-klar Favicon vil ikke bare være enklere å identifisere, men det vil også skille seg ut blant en mengde pixelated Favicons som ennå ikke er optimalisert.
For å gjøre din Favicon Retina-klar, anbefaler jeg X-Icon Editor. Du kan enten laste opp et enkelt bilde og la redaktøren endre størrelsen på den for forskjellige dimensjoner, eller du kan laste opp separate bilder som er optimalisert for hver størrelse for å få de beste resultatene..
Hvis du vil oppgradere et nettsted med eksisterende bilder, trenger du litt mer arbeid, for du må gjenopprette alle bildene for å gjøre dem Retina-klare, men dette trenger ikke å kaste bort for mye tid.
Forsøk å identifisere bilder som du kan unngå ved å bruke alternativer som CSS, SVG og Image Fonts, som tidligere nevnt. Knapper, ikoner og andre vanlige brukergrensesnitt kan vanligvis erstattes med moderne løsninger som ikke krever noen bilder.
Hvis du faktisk trenger å gjenopprette rasteriserte bilder, vil du selvfølgelig vil returnere til kildefilene. Som du kanskje antar, bare å endre størrelsen på dine rasteriserte bitmapbilder til å være dobbelt så stor, får du ikke jobben, fordi alle detaljer og grenser blir pixelert.
Du trenger ikke å fortvile - bildesammensetninger som for det meste inneholder vektorer (det vil si i Adobe Photoshop eller Illustrator) er ganske enkle å skalere opp. Når det er sagt, ikke glem å verifisere om Photoshop-effektene dine i blandingsalternativene, for eksempel streker, skygger og fasetter, fremdeles vises som du hadde tenkt.
Generelt lager Photoshop komposisjoner direkte ut av vektorer (former) og Photoshop Smarte objekter vil spare deg for mye tid i fremtiden.
Sist, men ikke minst, optimaliserer filstørrelsen på alle bilder i et program eller nettsted effektivt å lagre opptil 90% av bildeinnlastingstider. Når det gjelder Retina-bilder, blir filstørrelsesreduksjonen enda viktigere, da de har en høyere pixeldensitet som vil øke deres respektive filstørrelser.
I Photoshop kan du optimalisere bildefilstørrelsen, via funksjonen "Lagre for web". På toppen av det er det et utmerket gratis verktøy, kalt ImageAlpha, som kan redusere bildens størrelse enda mer med bare et lite tap av kvalitet.
I motsetning til Photoshop kan ImageApha konvertere 24-bit alfa-kanal PNG til 8-bit PNG med alfakanalsupport. Glasuret på kaken er at disse optimaliserte bildene er kryssbrowser-kompatible og til og med fungerer for IE6!
Du kan spille rundt med forskjellige innstillinger i ImageAlpha for å få den rette avstanden mellom kvalitet og filstørrelse. I saken nedenfor kan vi redusere filstørrelsen med nesten 80%.
Når du er ferdig med å sette inn ønsket komprimeringsnivå, tilbyr ImageAlphas lagringsdialog også "Optimaliser med ImageOptim" - et annet flott og gratis verktøy.
ImageOptim velger automatisk de beste komprimeringsalternativene for bildet ditt og fjerner unødvendig metainformasjon og fargeprofiler. I tilfelle av vår stempelfil var ImageOptim i stand til å redusere filstørrelsen med en annen 34%.
Etter at vi oppdaterte alle ressursene ved Blossom.io for høyoppløselige skjermer og brukt ImageAlpha og ImageOptim for å optimalisere filstørrelsen, endte vi faktisk med å spare noen få kilobytes i forhold til de eiendelene vi hadde før.
Hvis du vil lære mer om hvordan du får appene og nettstedene dine klar for Retina-skjermer, anbefaler jeg "Retinafy dine nettsider og apper", av Thomas Fuchs. Det er en rett fremover trinnvis guide som sparte meg mye tid og nerver.
Takk for at du leste! Noen spørsmål?
Accentsconagua