Verhouding en resolutie van foto's afbeeldingen voor webdesign

Bekijk dit uitgebreide overzicht van verhoudingen voor afbeeldingen en foto's. Het is belangrijk om dit te begrijpen hoe ze werken voor WordPress webdesign.

Logo cursus traing wordpress

Verhouding en resolutie van foto’s afbeeldingen voor webdesign

Het is handig als je een vaste voor al je kiest. Bekijk hieronder een aantal standaard verhoudingen. Onder de afbeeldingen staan de pixels vermeld voor kleine en grote afbeeldingen.

Evenwichtige formaten en verhoudingen WordPress afbeeldingen

Een vaste verhouding zorgt ervoor dat niet al je foto's verspringen. Je moet je dus je afbeeldingen bewerken in Adobe Photoshop (handleiding) of een ander fotobewerkingsprograma, maar het komt de kwaliteit van je WordPress webdesign ten goede.
Het zorgt voor meer continuiteit in je website en je website oogt rustiger en uitgebalanceerder. Je kan ook twee vaste maten kiezen, dus bijvoorbeeld 4×3 voor al je staande foto's en 3×5 voor al je liggende afbeeldingen.

Staande en liggende formaten van afbeeldingen

Bekijk hieronder de voorbeelden van verhoudingen van liggende formaten die ik voor je op een rijtje heb gezet. Voor staande foto's kun je je hoofd 90 graden kantelen en de afmetingen die onder de afbeeldingen staan omdraaien. 🙂

Meer handleidingen formaten en afmetingen van afbeeldingen

De verhoudingen 3×4 en 9×16 scoren het best in Google is gebleken. Meer hierover en hoe je foto's en afbeeldingen aanpassen leer je met deze handleidingen:

Literatuur over verhoudingen

Ik heb het onderstaande boekwerk sinds de jaren 90 in de buurt van mijn nachtkastje liggen 🙂

Geschiedenis van het oblong formaat (PDF)

Liggende formaten | oblong

Liggende oblong formaten komen verreweg het meeste voor op websites. Simpelweg omdat beeldschermen liggend zijn en de afbeelding dus beter zichtbaar is, tenzij je staande afbeeldingen kleiner gebruikt. Daarnaast is de bestandsgrootte van een liggende afbeelding kleiner omdat deze minder hoog is en minder pixels bevat.
Ik geef een rekenvoorbeeld met verschillende hoogtes.

  • 900 pixels breed x 600 pixels hoog = 540000 pixels
  • 900 pixels breed x 450 pixels hoog = 405000 pixels

De bovenste afbeelding (600 pixels hoog) is 33% zwaarder dan de onderste:
540000/405000 = 1,333333333333333


Verhouding 4 x 5

Defensief model, zie bloemen en het pentagon.

verhouding 4x5

verhouding 4x5
verhouding 4×5

320x400px
720x900px
960x1200px
1280x1600px

Verhouding 3 x 4 (TV)

Verhouding

verhouding 3x4

verhouding 3x4
verhouding 3×4

320x400px
720x900px
960x1200px
1280x1600px

Verhouding 1 x 1,618 (gulden snede)

De meest klassieke maat. Meer over de Gulden Snede en webdesign
Bereken gulden snede

verhouding 3x4

verhouding 3x4
gulden snede verhouding

247x400px
556x900px
742x1200px
989x1600px

Verhouding 3 x 5 (1,66666)

Bijna gelijk aan de Gulden Snede. Handig.

verhouding 3x5

verhouding 3x4
verhouding 3×5

240x400px
540x900px
720x1200px
960x1600px

Verhouding 16 x 9 (1,77777)

Prachtige verhouding. Oud filmformaat.

Lees meer hierover op de handleiding “foto's en afbeeldingen geschikt maken voor WordPress”:


Verhouding 1×2

Precies een rechthoek. Dit is bijvoorbeeld precies het formaat van een Linked-In profiel header foto. Zie Linked-In afbeeldingen en afmetingen. Ook steeds meer gebruikt in verhoudingen voor films.

verhouding 1x2

verhouding 3x4
verhouding 1×2

200x400px
450x900px
600x1200px
800x1600px

Verhouding 1 x 2,33 of 9 x 21 (cinema/film)

De standaard maat en verhouding voor films en cinema.

verhouding 9x21

verhouding 9x21
cinema verhouding

171x400px
386x900px
514x1200px
685x1600px

Verhouding 1 x 3

Mooi voor sliders.

verhouding 1x3

verhouding 1x3
verhouding 1×2

133x400px
300x900px
400x1200px
533x1600px

Meer informatie over afbeeldingen en fotografie

Wil je weten hoe je je afbeeldingen op het juiste formaat krijgt? Bekijk dan één van de onderstaande handleidingen:


Meer weten over Verhouding en resolutie van foto's afbeeldingen voor webdesignof info?

Wil je meer weten? Veel web-designers met interesse in Verhouding en resolutie van foto's afbeeldingen voor webdesign bekeken ook de onderstaande veel gelezen handleidingen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress website beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Verhouding en resolutie van foto's afbeeldingen voor webdesign

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Verhouding en resolutie van foto's afbeeldingen voor webdesign en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven