Afbeelding aanpassen formaten en resolutie

Maak altijd afbeeldingen en foto’s op het juiste formaat voordat je ze in je WordPress website zet.

Afbeelding aanpassen formaten en resolutie

We adviseren je altijd de foto’s op het juiste formaat te maken alvorens je ze in WordPress zet. Lees hier hou je dit doet.

Originele foto’s en afbeeldingen vaak te groot

Je originele foto’s en afbeeldingen van een camera of telefoon zijn vaak veel te groot, bv 3000 of 4000 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 WordPress website langzamer wordt.
We adviseren je daarom de foto’s op het juiste formaat te maken voordat je ze in WordPress zet. Je WordPress mediabibliotheek blijft dan mooi op orde en je website blijft optimaal en snel draaien. Het is ook beter voor je vindbaarheid in Google en zoekmachines.

Tip voor gratis afbeeldingen

Je kan uiteraard de afbeeldingen in de templates vervangen door je eigen afbeeldingen en foto’s. We hebben een overzicht gemaakt met de beste websites voor gratis foto’s en afbeeldingen om rechtenvrij te gebruiken.

Afbeeldingen vervangen in de templates

Je kan uiteraard de afbeeldingen vervangen in de templates.

  • Ga naar de mediabibliotheek en open de afbeelding die in de template gebruikt wordt.
  • Bekijk in het rode kader de resolutie van de afbeelding.
  • Maak met behulp van een ondergenoemd beeldbewerkingsprogramma de afbeelding op dezelfde resolutiegrootte. Dan weet je zeker dat je goed zit. Je kan uiteraard een andere verhouding of resolutie nemen maar dan verandert de layout.
  • Upload de afbeelding in je mediabibliotheek of ga direct naar de pagina om daar de afbeelding te wijzigen.
    afbeelding te wijzigen

Resolutie en pixels WordPress afbeeldingen

Grootte en resolutie van foto’s voor webshop

Ik raadt aan vierkant afbeeldingen te gebruiken voor al je producten en het liefst allemaal dezelfde afmeting. Bijvoorbeeld:
1000 x 1000 pixels (onze voorkeur), of
800 x 800 pixels

Maximum grootte en resolutie van 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 kader waarin het geplaatst wordt. De hoogte maakt dus niet uit. De verhouding 4 x 3 of 16 x 9 is welaanbevolen.

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 resolutie.


Gratis programma’s om afbeeldingen kleiner te 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 Adobe Photoshop 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

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 Apple-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.

Een extra tip voor het verkleinen van je 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. 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



Betaalde programma’s beeldbewerking

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


Online programma’s (Croppola)

Online programma’s om foto’s en afbeeldingen bij te snijden

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

Croppola | aanbevolen!

Croppola werkt echt fantastisch. Het is simpeler dan photoshop. Handig voor iedere cursist.

Tip van Arthur: Kies bij voorkeur een vaste verhouding, 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’.

Ga naar Croppola
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


Voorbeeld foto met verhouding 9×16

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

Voorbeeld template afbeelding 9x16 cursus 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 inspiratie de reviews:

Bekijk reviews

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 bestanden 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


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 kun je vinden op CursusWP.com:

Meer WordPress handleidingen voor templates

Gratis afbeeldingen rechtenvrije foto’s

Je kan de afbeeldingen vervangen door je eigen gratis afbeeldingen en foto’s. Waar gratis foto's vinden?

Zelf content toevoegen elementen en modules

Je kan zelf veel elementen toevoegen in WordPress zoals, tekst, afbeeldingen, foto's, buttons.

Tekst aanpassen WordPress templates

Je kan zelf makkelijk de teksten aanpassen van je gekozen templates. Bekijk de onderstaande video.
WEB-DESIGNERS INTRODUCEERT

WordPress templates

Wil je weten hoe de templates werken? Lees meer of neem contact op!