Resolutie foto's afbeeldingen geschikt maken voor WordPress

Het juiste formaat van afbeeldingen in pixels voor WordPress. Leer hoe je originele foto’s het beste kunt aanpassen zodat je website zo snel mogelijk draait.

Logo cursus traing wordpress

Resolutie foto’s afbeeldingen geschikt maken voor WordPress

Ik adviseer je altijd de foto’s op het juiste formaat te maken alvorens je ze in WordPress plaatst. Je WordPress blijft dan mooi op orde en je website blijft optimaal en snel draaien.

Originele foto’s en afbeeldingen voor WordPress vaak te groot

Je originele foto’s en van een of telefoon zijn vaak veel te groot, bijvoorbeeld 3000 pixels breed. Je website is doorgaans niet breder dan 1200 pixels. Alles groter dan dit is dus te groot waardoor je website onnodig belast wordt en je website trager wordt.
Zorg dat de foto’s en afbeeldingen het juiste formaat hebben voordat je ze in WordPress zet.

Resolutie, pixels en afmetingen voor WordPress afbeeldingen

Maximum grootte en resolutie foto’s en afbeeldingen

Voor standaard afbeeldingen in berichten en pagina’s:

  • Breedte:
    900-1000px

  • Bestandsgrootte:
    Max. 150kb

Maximum grootte voor beeldvullende afbeeldingen

Voor achtergrondafbeeldingen en beeldvullende (parallax) afbeeldingen en sliders:

  • Breedte:
    1500-1800px

  • Bestandsgrootte:
    Max. 300kb

De hoogte van de afbeeldingen is minder van belang. WordPress zal de afbeelding alleen maar in de breedte aanpassen aan het waarin het geplaatst wordt. De hoogte maakt dus niet uit.

Tip voor bewerken foto’s en afbeeldingen voor WordPress

Maak je afbeeldingen geschikt voor WordPress en hanteer hiervoor de bovengenoemde resoluties als richtlijn. Vrijwel alle afbeeldingen kun je bewaren als JPG-bestand. Bewaar naast dit bestand altijd je origineel op een hogere .


Gratis programma’s afbeeldingen kleiner maken (Mac/Windows)

Welke programma’s kun je het beste gebruiken om je afbeeldingen en photo’s kleiner te maken? Het mooiste is als je gebruikt. Het gebruik van Photoshop voor WordPress heb ik hier uitgelegd. Helaas is Photoshop nogal prijzig. Als alternatief kun je ook prima de onderstaande programma’s gebruiken:

Gratis fotobewerkingsprogramma voor Apple Mac

Ik adviseer het volgende programma:

iResize (gratis programma)

Je kan iResize hier gratis downloaden:
https://www.macupdate.com/app/mac/13039/iresize

Als je het op je mac wilt installeren geeft je Mac de melding dat je een programma wilt downloaden dat niet via de -store aangeschaft is. Ga na de systeemvoorkeuren en dan naar Privacy en klik op accoord dat je toch het programma wilt installeren. Tijdens de cursus kan ik uitleggen hoe iResize werkt.

Extra tip verkleinen bestandsgrootte

Als je je foto’s hebt bewaard op de juiste resolutie kun je de bestandsgrootte van de afbeeldingen ook nog eens verkleinen met het gratis programma ImageOptim (Mac Download) of Pinga (PC/Windows download), Alle technische gegevens (metadata), bijvoorbeeld welke camera en sluitertijd worden dan verwijderd. Je afbeeldingen worden dan doorgaans nog eens 5-20% kleiner waardoor je site sneller wordt.
Download ImageOptim
Je kan de metadata ook online verwijderen op verexif.com: www.verexif.com

Gratis fotobewerkingsprogramma voor PC Windows

Ik adviseer het volgende programma:

Irfanview (Windows)

Het programma is heel old-school maar werkt prima. Gebruik voor het exporteren altijd de functie ‘Bestand > Opslaan voor het web’. Je krijgt dan de melding dat een plugin vereist is. Installeer deze plugin ook.
Download Irfanview

Paint (Windows)

Je kan je afbeeldingen ook opslaan met Paint. De is alleen wat minder.

Betaalde programma’s beeldbewerking en foto’s

Dit zijn de 2 beste maar betaalde programma’s om afbeeldingen mee te bewerken:


Online programma’s foto’s verkleinen (Croppola)

Online programma’s bijsnijden foto’s en afbeeldingen

Geen Photoshop of een ander programma? Geen nood. Je kan ook andere online programma’s gebruiken. Croppola is mijn favoriet, maar je kan ook de andere online tools proberen.

Croppola | aanbevolen voor cursisten!

Croppola werkt echt fantastisch. Simpeler dan photoshop. Handig voor iedere cursist.

Tip van Arthur: Kies bij voorkeur een vaste , bijvoorbeeld 4×3 of 9×16, of voor grote liggende afbeeldingen 24×9. Dit zorgt voor een evenwichtig beeld in je WordPress website. De verhoudingen vind je in Croppola terug onder het kopje ‘auto’.


afbeelding foto croppen of bijsnijden

Afbeelding of foto uitsnijden met Croppola

Vul de verhouding van je afbeelding in under de button ‘auto’ en vul onder het kopje ‘crop’ de maximale breedte in voor je afbeelding. Alleen nog downloaden en klaar. Voor de liefhebbers heb ik een aardig artikel geschreven over beeldverhoudingen en welke beeldverhoudingen het beste scoren in zoekmachines en Google. Lees meer over verhoudingen in de onderstaande handleiding:
verhoudingen van afbeeldingen voor webdesign en WordPress

Blij met deze design tip?
Heb je een training gevolgd en tevreden over de handleidingen en tips? Laat dan een review achter. Je helpt Arthur dan zijn werk sustainabel te maken. Bekijk ter de reviews:


Verhouding afbeeldingen en foto’s (staand, liggend)

Het is handig om een vaste verhouding te kiezen voor je afbeeldingen. In de praktijk zijn de onderstaande verhoudingen het meest praktisch en esthetisch verantwoord.

Verhouding 16×9

BreedteHoogte
1600 pixels900 pixels
1200 pixels (aanbevolen)675 pixels (aanbevolen)
900 pixels506 pixels

Verhouding 4×3

BreedteHoogte
1600 pixels1200 pixels
1200 pixels900 pixels
900 pixels675 pixels

Verhouding 3×4 (staande afbeeldingen, portretten)

Voor staande afbeeldingen (niet liggend) is de verhouding 16×9 nogal erg langwerpig. Beter om dan altijd 3×4 te gebruiken.

BreedteHoogte
1200 pixels900 pixels
900 pixels675 pixels
600 pixels (aanbevolen)450 pixels (aanbevolen)

Voorbeeld foto met verhouding 16×9

Om een indruk te geven hoe een verhouding eruit ziet, geef ik hieronder een voorbeeld van een foto met de verhouding 16×9 (900×506 pixels):Voorbeeld template afbeelding 9x16 cursus WordPress

Meer online fotobewerkingsprogramma’s

Pixlr

Pixlr is een gratis online programma. Lijkt op Photoshop. Er is dus veel mogelijk qua fotobewerking. Ook croppen of verkleinen is eenvoudig. Er is een PRO-versie tegen betaling.
Pixlr

Canva

Canva is eigenlijk een online programma om ontwerpen mee te maken. Bijvoorbeeld voor instagram of voor een infographic. Zelf afmetingen invoeren kan ook. Het nadeel is dat grote uploaden vaak niet lukt, maar het is dan ook een gratis tool.
Canva

Picmonkey

Met Picmonkey kunnen gemakkelijk collages gemaakt worden. Eventueel met verschillende filters. Ook croppen of verkleinen is geen probleem. De tool Picmonkey was altijd gratis, maar biedt nu alleen nog maar een gratis proefperiode van zeven dagen.
Picmonkey

Ribbet

De online tool Ribbet lijkt op Picmonkey. Hiermee kunnen ook afbeeldingen verkleind en gecropt worden. Ook collages maken is geen probleem. De interface is zakelijker dan bijvoorbeeld Picmonkey. Het werkt helaas alleen met Flash.
Ribbet

Photopea

photopea.com


Afbeeldingen automatisch verkleinen upload WordPress

Je kan ook je foto’s of afbeeldingen automatisch laten verkleinen bij het uploaden in WordPress. Je dient dan een WordPress plugin te installeren. Je kan het beste de volgende WordPress plugin gebruiken uit de volgende handleiding over het automatisch kleiner maken bij uploaden in WordPress:
Handleiding Automatisch grote afbeeldingen verkleinen in WordPress met plugin


Meer handleidingen over afbeeldingen en foto’s voor WordPress

Meer tips en handleidingen over fotografie en afbeeldingen voor WordPress:


Meer informatie over Resolutie foto's afbeeldingen geschikt maken voor WordPressof info?

Wil je meer weten? Veel lezers met interesse in Resolutie foto's afbeeldingen geschikt maken voor WordPress bekeken ook de onderstaande artikelen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

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

WordPress Bootcamp

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

Info over Resolutie foto's afbeeldingen geschikt maken voor WordPress

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Resolutie foto's afbeeldingen geschikt maken voor WordPress en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar top