Verhouding en resolutie foto afbeelding 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 foto afbeelding 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:


Wil je meer details over Verhouding en resolutie foto afbeelding voor webdesignof info?

Wil je meer weten? Veel lezers met interesse in Verhouding en resolutie foto afbeelding voor webdesign bekeken ook de onderstaande artikelen:


Scroll naar boven