Beeldverhoudingen uitgelegd: 1:1, 4:5, 9:16, 16:9 en meer

Een beeldverhouding is de vorm van een afbeelding: de breedte ten opzichte van de hoogte, geschreven als twee getallen zoals 16:9. Een video van 1920×1080 en een thumbnail van 1280×720 hebben een ander formaat maar dezelfde beeldverhouding van 16:9, dus de ene schaalt zonder bijsnijden naar de andere. De meeste ontwerpproblemen met "het verkeerde formaat" zijn eigenlijk problemen met de verkeerde vorm.

De gangbare beeldverhoudingen en waar ze worden gebruikt

De exacte pixelformaten voor elk platform staan in afbeeldingsformaten voor social media. Merk op hoe weinig vormen er zijn: als je goed kunt ontwerpen in 1:1, 4:5, 9:16 en 16:9, dek je het grootste deel van de social aanwezigheid van een merk.

Zo reken je een beeldverhouding uit

Neem de breedte en de hoogte en deel beide door het grootste getal dat er precies in past, de grootste gemene deler. Wat overblijft is de verhouding in zijn eenvoudigste vorm.

1. 1

   Begin met het formaat

   Neem 1080×1350, een staande Instagram-post.

2. 2

   Zoek de grootste gemene deler

   Het grootste getal dat precies in zowel 1080 als 1350 past is 270.

3. 3

   Deel beide zijden

   1080 ÷ 270 = 4 en 1350 ÷ 270 = 5. De beeldverhouding is 4:5.

4. 4

   Of gebruik een decimaal

   Deel de breedte door de hoogte: 1080 ÷ 1350 = 0,8. Decimalen zijn handig voor lastige vormen zoals 1200×630, wat ongeveer 1,91 is, vandaar 1,91:1.

Als je het liever niet met de hand doet, doen deze paar regels JavaScript hetzelfde in een browserconsole.

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

Formaten omzetten zonder de vorm te veranderen

Om een afbeelding te schalen en de beeldverhouding te behouden gebruik je één formule: nieuwe hoogte = nieuwe breedte × hoogte van de verhouding ÷ breedte van de verhouding. Voor een 16:9-frame van 1280 pixels breed is dat 1280 × 9 ÷ 16 = 720. Voor een 4:5-frame van 1600 pixels breed is het 1600 × 5 ÷ 4 = 2000.

De andere kant op is net zo simpel: nieuwe breedte = nieuwe hoogte × breedte van de verhouding ÷ hoogte van de verhouding. Een 9:16-video die 1280 hoog moet zijn, is 1280 × 9 ÷ 16 = 720 breed. Komt er een decimaal uit, rond dan af op het dichtstbijzijnde hele pixel; het verschil is onzichtbaar.

Wat er gebeurt als je de beeldverhouding verandert

Schalen behoudt de vorm. De verhouding veranderen niet, en je hebt maar drie eerlijke opties: een deel van de afbeelding wegsnijden, er ruimte omheen toevoegen of het ontwerp herschikken voor de nieuwe vorm. De vierde optie, uitrekken, vervormt elke letter en cirkel, en mensen zien dat meteen.

Dit doet formaat wijzigen in Gradiently met Pro: kies de formaten die je nodig hebt en elke kopie wordt opnieuw opgebouwd voor zijn vorm, terwijl de Mark erachter bij elke verhouding vers wordt gerenderd in plaats van uit één afbeelding te worden bijgesneden. Eén look, elk formaat loopt het stap voor stap door.

Welke beeldverhouding kies je voor een post

Als een platform meerdere vormen accepteert, kies dan die met de meeste ruimte op een telefoonscherm. Op Instagram is dat 4:5, hoger dan een vierkant en het best bestand tegen het bijsnijden in het profielraster; Instagram-postformaat legt uit waarom. Op Pinterest is een pin van 2:3 de standaard; langere pins bestaan maar kunnen in de feed worden afgekapt, zoals behandeld in Pinterest-pinformaat.

Voor alles wat op een televisie of laptop wordt bekeken is 16:9 de veilige keuze, daarom gebruiken YouTube-thumbnails en slides het. Voor alles wat op een telefoon schermvullend wordt bekeken is 9:16 de enige vorm die het vult. Ontwerp bij twijfel eerst de verticale en de breedbeeldversie: het vierkant en het staande formaat zitten daar comfortabel tussenin.

Beeldverhouding in CSS

Op het web houdt de CSS-eigenschap aspect-ratio een vak in vorm bij elke breedte, zodat layouts niet springen terwijl afbeeldingen en video's laden. Alle huidige browsers ondersteunen het; zie de aspect-ratio-referentie van MDN.

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

Verhoudingen doen er ook toe voor print en video, met eigen conventies. Voor videoformaten zie socialvideoformaten, en voor hoe pixelaantallen zich verhouden tot fysiek formaat DPI versus PPI.