Sideforhold forklart: 1:1, 4:5, 9:16, 16:9 og flere

Et sideforhold er formen på et bilde: bredden sammenlignet med høyden, skrevet som to tall, for eksempel 16:9. En video i 1920×1080 og et miniatyrbilde i 1280×720 har ulik størrelse, men samme sideforhold 16:9, så det ene skaleres til det andre uten beskjæring. De fleste designproblemer med «feil størrelse» er egentlig problemer med feil form.

De vanlige sideforholdene og hvor de brukes

De nøyaktige pikselstørrelsene for hver plattform finner du i bildestørrelser for sosiale medier. Legg merke til hvor få former det er: kan du designe godt i 1:1, 4:5, 9:16 og 16:9, dekker du det meste av en merkevares tilstedeværelse i sosiale medier.

Slik regner du ut et sideforhold

Ta bredden og høyden og del begge på det største tallet som går opp i begge, kalt største felles divisor. Det som står igjen er forholdet i enkleste form.

1. 1

   Start med størrelsen

   For eksempel 1080×1350, et stående Instagram-innlegg.

2. 2

   Finn største felles divisor

   Det største tallet som går opp i både 1080 og 1350 er 270.

3. 3

   Del begge sidene

   1080 ÷ 270 = 4 og 1350 ÷ 270 = 5. Sideforholdet er 4:5.

4. 4

   Eller bruk et desimaltall

   Del bredden på høyden: 1080 ÷ 1350 = 0,8. Desimaltall er praktiske for kronglete former som 1200×630, som er omtrent 1,91, derav 1,91:1.

Vil du slippe å regne for hånd, gjør disse få linjene med JavaScript det samme i nettleserkonsollen.

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

Konvertere størrelser uten å endre formen

For å skalere et bilde og beholde sideforholdet bruker du én formel: ny høyde = ny bredde × forholdets høyde ÷ forholdets bredde. For en 16:9-ramme som er 1280 piksler bred blir det 1280 × 9 ÷ 16 = 720. For en 4:5-ramme som er 1600 piksler bred blir det 1600 × 5 ÷ 4 = 2000.

Andre veien er like enkelt: ny bredde = ny høyde × forholdets bredde ÷ forholdets høyde. En 9:16-video som må være 1280 høy blir 1280 × 9 ÷ 16 = 720 bred. Får du et desimaltall, runder du av til nærmeste hele piksel; forskjellen er usynlig.

Hva skjer når du endrer sideforholdet

Skalering beholder formen. Å endre forholdet gjør ikke det, og du har bare tre ærlige valg: beskjære bort en del av bildet, legge til luft rundt det, eller sette opp designet på nytt for den nye formen. Det fjerde valget, å strekke, forvrenger hver bokstav og hver sirkel, og folk merker det med en gang.

Det er dette endring av størrelse i Gradiently gjør med Pro: velg størrelsene du trenger, så settes hver kopi opp på nytt for sin form, mens Marken bak gjengis på nytt i hvert forhold i stedet for å beskjæres fra ett bilde. Ett uttrykk, alle størrelser går gjennom det.

Hvilket sideforhold du bør velge til et innlegg

Når en plattform godtar flere former, velger du den som tar mest plass på en mobilskjerm. På Instagram er det 4:5, som er høyere enn et kvadrat og tåler beskjæringen i profilrutenettet best; størrelse på Instagram-innlegg forklarer hvorfor. På Pinterest er en pin i 2:3 standarden; lengre pins finnes, men kan bli kuttet i feeden, som omtalt i størrelse på Pinterest-pins.

For alt som ses på TV eller bærbar PC er 16:9 det trygge valget, og derfor bruker YouTube-miniatyrbilder og presentasjoner det. For alt som ses i fullskjerm på en mobil, er 9:16 den eneste formen som fyller skjermen. Er du i tvil, designer du den vertikale og den brede versjonen først: kvadratet og det stående formatet passer fint mellom dem.

Sideforhold i CSS

På nett holder CSS-egenskapen aspect-ratio en boks i form uansett bredde, noe som hindrer at layouten hopper mens bilder og videoer lastes. Den støttes i alle dagens nettlesere; se MDNs referanse for 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 */
}

Sideforhold betyr også noe for trykk og video, med egne konvensjoner. For videoformater, se videostørrelser for sosiale medier, og for hvordan antall piksler henger sammen med fysisk størrelse, DPI og PPI.