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

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

De exakta pixelstorlekarna för varje plattform finns i bildstorlekar för sociala medier. 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. 1

   Börja med storleken

   Säg 1080×1350, ett stående Instagram-inlägg.

2. 2

   Hitta den största gemensamma delaren

   Det största tal som delar både 1080 och 1350 jämnt är 270.

3. 3

   Dela båda sidorna

   1080 ÷ 270 = 4 och 1350 ÷ 270 = 5. Bildförhållandet är 4:5.

4. 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.

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

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.

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 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 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.

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 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.

.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 */
}

Förhållanden betyder också något för tryck och video, med egna konventioner. För videoformat, se videostorlekar för sociala medier, och för hur antal pixlar hänger ihop med fysisk storlek, DPI mot PPI.