# Bildförhållanden förklarade: 1:1, 4:5, 9:16, 16:9 och fler

[Canonical HTML page](https://gradiently.design/sv/guide/aspect-ratios-explained)

Pixelstorlekarna skiftar mellan plattformarna, men det finns bara en handfull former. Lär dig dem, och räknereglerna som binder ihop dem, så trycker du aldrig ihop en design igen.

## The short version

- Ett bildförhållande är det proportionella förhållandet mellan en bilds bredd och höjd, skrivet som bredd:höjd.
- För att hitta bildförhållandet för en storlek delar du båda talen med deras största gemensamma delare, så att 1920×1080 blir 16:9.
- För att få en ny storlek i samma bildförhållande multiplicerar du den nya bredden med förhållandets höjd och delar med dess bredd.
- De förhållanden som betyder mest för sociala medier är 1:1, 4:5, 9:16, 16:9 och 1,91:1.
- Att ändra en bild till ett annat bildförhållande innebär alltid att beskära, lägga till utrymme eller lägga ut designen på nytt; att sträcka förvränger den.

Ett **bildförhållande** är bildens form: dess bredd jämfört med dess höjd, skrivet som två tal, till exempel 16:9. En video på 1920×1080 och en miniatyr på 1280×720 har olika storlek men samma bildförhållande, 16:9, så den ena skalas till den andra utan beskärning. De flesta designproblem med ”fel storlek” är egentligen problem med fel form.

## De vanliga bildförhållandena och var de används

- 1:1 kvadrat: 1080 × 1080
- 4:5 stående: 1080 × 1350
- 2:3 pin: 1000 × 1500
- 9:16 vertikal: 1080 × 1920
- 4:3 klassisk: 1600 × 1200
- 16:9 bredbild: 1920 × 1080
- 1,91:1 länkkort: 1200 × 630
- 3:1 sidhuvud: 1500 × 500

Åtta former täcker nästan allt du kommer att designa. Skalenligt, från kvadraten till det smala sidhuvudet.

| Förhållande | Form | Typisk storlek | Används till |
| --- | --- | --- | --- |
| 1:1 | Kvadrat | 1080×1080 | Instagram-kvadrat, inlägg på Facebook och LinkedIn, spellisteomslag |
| 4:5 | Stående | 1080×1350 | Stående inlägg på Instagram, Threads, Facebook och X |
| 3:4 | Stående | 1080×1440 | Hur Instagram beskär inlägg i profilrutnätet |
| 2:3 | Hög stående | 1000×1500 | Pinterest-pins |
| 9:16 | Vertikal | 1080×1920 | Stories, Reels, TikTok, Shorts, WhatsApp-status |
| 4:3 | Klassisk liggande | 1600×1200 | Äldre bildspel, Dribbble-bilder, Google Business-inlägg i 1200×900 |
| 16:9 | Bredbild | 1920×1080 | YouTube-miniatyrer, bildspel, webbplatsers toppbilder, inlägg på X och Bluesky |
| 1,91:1 | Brett kort | 1200×630 | Länkförhandsvisningar och Open Graph-bilder |
| 3:1 och 4:1 | Banderoll | 1500×500, 1584×396 | Sidhuvuden på X, LinkedIn-banderoller |

Ett förhållande, många plattformar. När två format delar förhållande räcker en design för båda genom skalning.

De exakta pixelstorlekarna för varje plattform finns i [bildstorlekar för sociala medier](https://gradiently.design/sv/guide/social-media-image-sizes). Lägg märke till hur få former det är: kan du designa bra i 1:1, 4:5, 9:16 och 16:9 täcker du det mesta av ett varumärkes närvaro i sociala medier.

## Så räknar du ut ett bildförhållande

Ta bredden och höjden och dela båda med det största tal som går jämnt upp i dem, den största gemensamma delaren. Det som blir kvar är förhållandet i sin enklaste form.

1. **Börja med storleken** Säg 1080×1350, ett stående Instagram-inlägg.
2. **Hitta den största gemensamma delaren** Det största tal som delar både 1080 och 1350 jämnt är 270.
3. **Dela båda sidorna** 1080 ÷ 270 = 4 och 1350 ÷ 270 = 5. Bildförhållandet är 4:5.
4. **Eller använd ett decimaltal** Dela bredden med höjden: 1080 ÷ 1350 = 0,8. Decimaltal är praktiska för ojämna former som 1200×630, som är ungefär 1,91, alltså 1,91:1.

Vill du slippa räkna för hand gör de här få raderna JavaScript samma sak i en webbläsarkonsol.

```js
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720
```

Euklides algoritm för delaren, sedan enkel skalning. Klistra in den i valfri webbläsarkonsol.

## Omvandla storlekar utan att ändra formen

För att skala en bild och behålla bildförhållandet använder du en enda formel: **ny höjd = ny bredd × förhållandets höjd ÷ förhållandets bredd**. För en 16:9-ram som är 1280 pixlar bred blir det 1280 × 9 ÷ 16 = 720. För en 4:5-ram som är 1600 pixlar bred blir det 1600 × 5 ÷ 4 = 2000.

Åt andra hållet är det lika enkelt: ny bredd = ny höjd × förhållandets bredd ÷ förhållandets höjd. En 9:16-video som ska vara 1280 hög är 1280 × 9 ÷ 16 = 720 bred. Om svaret får decimaler avrundar du till närmaste hela pixel; skillnaden syns inte.

## Vad händer när du ändrar bildförhållandet

Skalning bevarar formen. Att ändra förhållandet gör det inte, och du har bara tre ärliga alternativ: beskära bort en del av bilden, lägga till utrymme runt den eller ordna om designen för den nya formen. Det fjärde alternativet, att sträcka, förvränger varje bokstav och cirkel, och folk ser det direkt.

### Beskär eller sträck

- Snabbt, men rubriken kapas ofta
- Sträckning får text att se hoptryckt ut
- Logotyper hamnar på fel plats
- Bakgrunder förlorar sin ljusa punkt
- Varje format ser lite fel ut

### Lägg ut på nytt

- Orden flödar om efter formen
- Typen behåller sina riktiga proportioner
- Logotypen hamnar där varje format förväntar sig den
- Bakgrunden renderas på nytt för ramen
- Varje format ser ut att vara designat för sin plats

Ett stående 4:5-inlägg för en keramikstudio som meddelar att vårens kurser är öppna

Designen i 4:5 för flödet: staplade ord, luft över och under.

Samma keramikstudiomeddelande utlagt i en 16:9-bredbildsram

Samma design i 16:9 för en webbplats toppbild: orden breder ut sig, bakgrunden ritas om för ramen.

Så fungerar storleksändring i Gradiently med Pro: välj de storlekar du behöver så läggs varje kopia ut på nytt för sin form, medan Marken bakom renderas på nytt i varje förhållande i stället för att beskäras ur en enda bild. [Ett utseende, alla storlekar](https://gradiently.design/sv/guide/one-look-every-size) går igenom hur.

## Vilket bildförhållande ska du välja för ett inlägg

När en plattform godtar flera former väljer du den som tar mest plats på en mobilskärm. På Instagram är det 4:5, som är högre än en kvadrat och klarar profilrutnätets beskärning bäst; [storlek på Instagram-inlägg](https://gradiently.design/sv/guide/instagram-post-size) förklarar varför. På Pinterest är en 2:3-pin standard; längre pins finns men kan kapas i flödet, som beskrivs i [Pinterest-pinnens storlek](https://gradiently.design/sv/guide/pinterest-pin-size).

För allt som ses på en tv eller bärbar dator är 16:9 det säkra valet, och därför använder [YouTube-miniatyrer](https://gradiently.design/sv/guide/youtube-thumbnail-size) och bildspel det. För allt som ses i helskärm på en mobil är 9:16 den enda form som fyller skärmen. Är du osäker, designa den vertikala och bredbildsversionen först: kvadraten och den stående formen ryms bekvämt mellan dem.

## Bildförhållande i CSS

På webben håller CSS-egenskapen `aspect-ratio` en ruta i form vid vilken bredd som helst, vilket hindrar layouter från att hoppa medan bilder och videor laddas. Den stöds i alla nuvarande webbläsare; se [MDN:s referens för aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}
```

Skriv förhållandet med snedstreck. Kombinera det med object-fit: cover på bilder så att de beskärs i stället för att förvrängas.

Förhållanden betyder också något för tryck och video, med egna konventioner. För videoformat, se [videostorlekar för sociala medier](https://gradiently.design/sv/guide/social-video-sizes), och för hur antal pixlar hänger ihop med fysisk storlek, [DPI mot PPI](https://gradiently.design/sv/guide/dpi-vs-ppi).

## FAQ

### Vad är ett bildförhållande?

Det är bildens form, uttryckt som bredden jämfört med höjden, till exempel 16:9 eller 4:5. Bilder med samma bildförhållande skalas till varandra utan beskärning.

### Hur räknar jag ut ett bildförhållande?

Dela bredd och höjd med deras största gemensamma delare. För 1920×1080 är delaren 120, vilket ger 16:9.

### Vilket bildförhållande har 1080×1350?

4:5, den stående form som används för inlägg på Instagram, Threads, Facebook och X.

### Vad är skillnaden mellan 16:9 och 9:16?

Samma form vänd på sidan. 16:9 är liggande och används för YouTube och bildspel; 9:16 är vertikalt och används för Stories, Reels och TikTok.

### Hur ändrar jag bildförhållande utan att sträcka bilden?

Beskär bilden, lägg till utrymme runt den eller lägg ut designen på nytt för den nya formen. Att ordna om ger bäst resultat för designer med text.