Retina

kongen

kongemedlem
Hva er dette retinaopplegget fra Apple? Må man ha dobbel oppløsning på bilder / logo?
 

kongen

kongemedlem
Gjelder dette bare på bilder? Hva med kantlinjer, tekststørrelse, bredde på div og slikt?

Bør man ha egne css-filer til appleprodukter?
 
Sist redigert:

adeneo

Medlem
Du må ikke ha noe som helst, men du kan bruke bilder med bedre oppløsning på retina skjermer ettersom de klarer å vise bedre oppløsning, mens på vanlige skjermer er det bortkastet.
 

kongen

kongemedlem
Så hvis en bildefil er 500 x 250 px så blir koden slik?

HTML:
<img src="stortbilde.jpg" style="width:250px; height:125px; border-width:4px" />

Når rammen er definert som 4px, blir det 4px på retina da, og ikke 2px?

Hva hvis en bildefil er 250 x 125 px og høyde og bredde ikke er definert slik som i koden over, vil da bildet vises normalt på retina eller vil det vise 125 x 62 px og ødelegge resten av designet?
 

peterpan

Medlem
Så hvis en bildefil er 500 x 250 px så blir koden slik?

HTML:
<img src="stortbilde.jpg" style="width:250px; height:125px; border-width:4px" />

Når rammen er definert som 4px, blir det 4px på retina da, og ikke 2px?

Hva hvis en bildefil er 250 x 125 px og høyde og bredde ikke er definert slik som i koden over, vil da bildet vises normalt på retina eller vil det vise 125 x 62 px og ødelegge resten av designet?

Dette vil nok fungere. Men vil heller anbefale å sette inn bildet på 250px x 125px (Skalering av bilder i html er ikke bra) og så bruker du heller javascript til å sjekke om brukeren har retina. Viss brukeren har retina, sett inn retinabilde.

For på en vanlig skjerm er det ingen grunn til å laste inn et dobbelt så stort bilde :)
 

kongen

kongemedlem
Jeg bruker normalt 72 pkt/tomme på bilder og Retina kan vise opptil 326 pkt/tomme. Hva hvis jeg lagrer bilder med 326 pkt/tomme, da kan jeg vel lagre de i normal høyde/vidde-størrelse? Eller er jeg heeeelt på bærtur nå?
 

TorsteinO

Art Director & grunder
Det som faktisk har noe å si på skjerm, helt generelt, er hvor mange PIXLER høyt og bredt et bilde er. Hva du setter av punkter pr tomme har bare noe å si for print. For for å få utbytte av oppløsningen på en retinaskjerm så må bildet være dobbelt så høyt og dobbelt så bredt som "vanlig", I ANTALL PIXLER.

Om du lagrer bildet i 50000dpi, og det er 100px bredt, så vil det fremdeles vises som 100px på skjermen. Hvis du derimot skriver det ut, så vil det bli bittelite om det bare er 100px og du har satt 50000dpi. Om du setter dpi til 100 og det er 100px bredt, så vil det bli 100px bredt på skjermen, og 1 tomme bred ved utskrift.
 

kongen

kongemedlem
Så jeg skal fortsette å bruke 72 dpi og bare doble størrelsen på bildene da? For så å skalere ned bildestørrelsen med css slik at også vanlige skjermer viser korrekt størrelse?

Hva hvis jeg gir en lang balle i hele retina og lager alle bildefilene i normal størrelse, vil bildene bli litt utydelig på retinaskjermene da, eller vil bildene få like god tydlighet som en vanlig skjerm.
 

Posterum

Medlem
Så hvis en bildefil er 500 x 250 px så blir koden slik?

HTML:
<img src="stortbilde.jpg" style="width:250px; height:125px; border-width:4px" />

Når rammen er definert som 4px, blir det 4px på retina da, og ikke 2px?

Hva hvis en bildefil er 250 x 125 px og høyde og bredde ikke er definert slik som i koden over, vil da bildet vises normalt på retina eller vil det vise 125 x 62 px og ødelegge resten av designet?

Tror ikke det vil fungere. Som sagt over så bør du ikke skalere bilder i HTML, den beste måten (iallefall den jeg liker best) er å bruke retinajs.

Da vil koden din se slik ut
HTML:
<img src="logo.png" data-at2x="logo@2x.png" />

Tips: husk å lagre logoen som progressive PNG
 
Topp