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)
It means: Filen skal være 1,200 px × 900 px.
§ 13
Retina/HiDPI asset scaling
Hvor mange pixels skal mit @2x/@3x-ikon eksporteres i, når CSS-størrelsen er kendt?
Answer: 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.
Formula
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.
| Symbol | Meaning | Unit |
|---|---|---|
| css_bredde_px | CSS-/punkt-bredde | px |
| css_hoejde_px | CSS-/punkt-højde | px |
| skalafaktor | Skalafaktor | — |
| = | Eksportbredde | px |
| = | Eksporthøjde | px |
Validity and source
- Source
- Apple Human Interface Guidelines – @1x/@2x/@3x-skalafaktorer
Worked example
The calculator's own default values inserted. The figures are calculated with exactly the formula the tool uses.
Substituted
- CSS-/punkt-bredde400 px
- CSS-/punkt-højde300 px
- Skalafaktor2
Giver
- Eksportbredde800 px
- Eksporthøjde600 px
Members only
The calculator itself is locked
Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.
Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.
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.
Step by step
- 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.
Typical errors
- At eksportere i @1x og lade skærmen opskalere.
- At bruge PNG til ikoner, der kunne være SVG.
Examples from everyday life
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)
It means: Eksportér ikonet i 96 px × 96 px.
Rule of thumb
@2x er dobbelt så mange pixels i hver retning, altså fire gange så mange i alt.
How to check the answer
Eksportbredden ÷ skalafaktoren skal give punktstørrelsen.