Beeldverhoudingscalculator

Beeldverhoudingen begrijpen

Een beeldverhouding is de proportionele relatie tussen de breedte en hoogte van een afbeelding of video, geschreven als twee getallen gescheiden door een dubbele punt. 16:9 betekent dat er voor elke 16 pixels breedte 9 pixels hoogte zijn. Beeldverhoudingen zijn dimensieloos — 1920×1080 en 1280×720 zijn beide 16:9 omdat ze dezelfde proportie delen.

Gangbare verhoudingen en hun toepassingen

• 16:9 (1,78:1) — De universele standaard voor breedbeeldvideo: YouTube, Netflix, Vimeo, Twitch, tv-uitzendingen, desktopmonitoren en laptopschermen.
• 4:3 (1,33:1) — Oudere tv- en monitorstandaard. Nog steeds gebruikt voor presentaties, sommige iPad-apps en standaard-definitievideo.
• 1:1 — Vierkant formaat. Instagram-feed, profielfoto's en albumhoezen. Sterk visueel effect, even breed als hoog.
• 9:16 (0,56:1) — Verticale video voor TikTok, Instagram Reels en Stories, YouTube Shorts. Het formaat voor mobiel volledig scherm.
• 4:5 (0,8:1) — Instagram portretfeed-berichten. Hoger dan vierkant, toont meer inhoud zonder volledig verticaal te gaan.
• 21:9 (2,33:1) — Cinematisch ultrabreed. Gebruikt in bioscopen (2,39:1 scope-formaat) en ultrabreedbeeldmonitoren.
• 3:2 (1,5:1) — Traditionele 35mm-filmfotografie en veel digitale camera's. Standaard fotoafdrukproporties.

Hoe bewaar je de beeldverhouding bij het wijzigen van de grootte?

Om een afbeelding te schalen met behoud van de verhouding, vermenigvuldig je beide afmetingen met dezelfde schaalfactor. Proportionele hoogte voor een nieuwe breedte: nieuwe hoogte = (nieuwe breedte / originele breedte) × originele hoogte.

Voorbeeld: schaal 1920×1080 naar 1280 pixels breed: 1080 × (1280 / 1920) = 1080 × 0,667 = 720 pixels. Het resultaat, 1280×720, behoudt de 16:9-verhouding.

CSS-eigenschap aspect-ratio

De CSS-eigenschap aspect-ratio (ondersteund in alle moderne browsers sinds 2021) laat je de bedoelde verhouding van een element declareren zonder beide afmetingen te kennen. Door aspect-ratio: 16 / 9 op een container in te stellen en alleen een width op te geven, berekent de browser automatisch de juiste hoogte. Dit vervangt oudere technieken met opvultricks via padding-percentages.

Veelgestelde vragen

• Wat is een beeldverhouding?
  Een beeldverhouding beschrijft de proportionele relatie tussen de breedte en hoogte van een afbeelding of video, uitgedrukt als twee getallen (bijv. 16:9). Een 16:9-verhouding betekent dat de breedte 16 eenheden is voor elke 9 eenheden hoogte.
• Wat is de standaard beeldverhouding voor YouTube-video's?
  De standaardverhouding van YouTube is 16:9. Aanbevolen resolutie: 1920×1080 (Full HD). Miniaturen moeten minimaal 1280×720 zijn, aanbevolen 1920×1080.
• Welke beeldverhouding gebruikt Instagram?
  Instagram ondersteunt 1:1 (vierkant, 1080×1080), 4:5 (portretfeed, 1080×1350) en 9:16 (Stories/Reels, 1080×1920).
• Hoe bewaar ik de beeldverhouding bij het wijzigen van de grootte?
  Nieuwe hoogte = (nieuwe breedte / originele breedte) × originele hoogte. Voor CSS: gebruik aspect-ratio: 16 / 9 en stel slechts één afmeting in — de browser berekent de andere automatisch.
• Hoeveel pixels is 16:9?
  Gangbare 16:9-resoluties: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD), 7680×4320 (8K UHD). Elke afmeting waarbij breedte ÷ hoogte = 1,778 is 16:9.
• Wat doet CSS aspect-ratio?
  De CSS-eigenschap aspect-ratio declareert de gewenste verhouding van een element. Door aspect-ratio: 16 / 9 en alleen een breedte in te stellen, berekent de browser de hoogte automatisch. Ondersteund in alle moderne browsers sinds 2021.