Metabits

Bilder på høyoppløste mobile skjermer

Skrevet mars 20, 2012 i App utvikling, iPad, Webdesign Merket , ,

Apple lanserte nettopp iPad 3 som nå får samme høyoppløste rentina-skjerm som iPhone 4 og iPhone 4S. Dette setter nye krav til oppløsning på bilder som brukes på nettsider og i apps.

Den nye rentina-skjerm er på hele 2048 × 1536 piksler som gjør at det ikke lenger er mulig å se de individuelle punktene på fontene, men for bilder og annet grafikk bør det spesifiseres en egen høyoppløst fil(er) slik at hele designet fremstår like knivskarpt.

Gjør designet klar for iPad 3

For logo og andre grafiske elementer som brukes i designet er dette en forholdsvis enkel operasjon når man bruker såkalte «sprites» – hvor alle grafiske elementer er samlet i en fil slik at siden lastes raskere ned. Ved å spesifisere den høyoppløste versjonen av denne filen i nettsidens stilmaler, vil alle disse elementene fremstå like klart.

Et eksempel på en slik sprite-fil ser slik ut:

Og her den høyoppløste varianten (trykk på bilde for full størrelse):

Høyoppløst innholdsbilder på nettsiden

I tillegg bør man også vurdere om man skal bruke høyoppløste versjoner på de andre bildene på nettsiden.

For bilder brukt i artikler, produktbilder og andre andre bilder som lastes opp inne i eZ Publish eller WordPress, vil metoden være litt mer komplisert ved at man enten med javascript erstatter de lavoppløste bildene med høyoppløste på enheter med høy oppløsning eller at man på serveren gjør en tilsvarende sjekk på hva slags enhet som etterspør bildene og da serverer riktig format.

Tilbake til Notater