§ 13

Retina/HiDPI-asset-skalering

Hvor mange pixels skal mit @2x/@3x-ikon eksporteres i, når CSS-størrelsen er kendt?

Svar: Beregneren omregner en billedressourcens punkt-/CSS-størrelse til den faktiske pixelstørrelse, den skal eksporteres i for at se skarp ud på skærme med højere pixel-tæthed (Retina/HiDPI). Bruges når man eksporterer ikoner, illustrationer og UI-grafik til app- eller webdesign i flere opløsninger. Erstatter ikke en fuld asset-eksportplan, men giver de tre standardstørrelser.

Formel

Eksport-pixelstørrelse = CSS-/punkt-størrelse × skalafaktor.

Apples Human Interface Guidelines definerer @1x som 1:1 pixel-tæthed, @2x som dobbelt og @3x som tredobbelt tæthed — samme princip bruges i Android (mdpi/xhdpi/xxhdpi) og på responsive websites.

Symboler og enheder i formlen
Symbol	Betydning	Enhed
css_bredde_px	CSS-/punkt-bredde	px
css_hoejde_px	CSS-/punkt-højde	px
skalafaktor	Skalafaktor	—
=	Eksportbredde	px
=	Eksporthøjde	px

Gyldighed og kilde

Kilde: Apple Human Interface Guidelines – @1x/@2x/@3x-skalafaktorer

Regneeksempel

Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.

Sat ind

CSS-/punkt-bredde400 px
CSS-/punkt-højde300 px
Skalafaktor2

Giver

Eksportbredde800 px
Eksporthøjde600 px

Kun for medlemmer

Selve beregneren er låst

Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.

Opret gratis bruger →Log ind

Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.

Sådan bruger du den

Når du eksporterer ikoner, illustrationer og UI-grafik til en app eller en hjemmeside, skal der være versioner til skærme med høj pixeltæthed. Beregneren ganger designets punktstørrelse med skalafaktoren.

Trin for trin

Skriv designets størrelse i punkt eller CSS-pixels.
Vælg skalafaktoren: @1x, @2x eller @3x.
Gang begge mål med faktoren.
Eksportér filen i de mål, og navngiv den med @2x eller @3x.

Typiske fejl

At eksportere i @1x og lade skærmen opskalere.
At bruge PNG til ikoner, der kunne være SVG.

Eksempler fra hverdagen

Illustration til en app

En illustration i en iPhone-app fylder 400 × 300 punkter, og du eksporterer til @3x.

CSS-/punkt-bredde: 400 px
CSS-/punkt-højde: 300 px
Skalafaktor: @3x (Super Retina)

Det betyder: Filen skal være 1.200 px × 900 px.

Ikon til hjemmeside

Et ikon vises i 48 × 48 CSS-pixels og skal være skarpt på Retina-skærme.

CSS-/punkt-bredde: 48 px
CSS-/punkt-højde: 48 px
Skalafaktor: @2x (Retina)

Det betyder: Eksportér ikonet i 96 px × 96 px.

Tommelfingerregel

@2x er dobbelt så mange pixels i hver retning, altså fire gange så mange i alt.

Sådan tjekker du svaret

Eksportbredden ÷ skalafaktoren skal give punktstørrelsen.