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:
- Affinity Photo Alternatief Photoshop en fotobewerking
- WordPress en Adobe Photoshop Afbeeldingen perfect maken
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’.
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):
| 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:
- Retina afbeeldingen voor scherpe weergave afbeeldingen tekst
- Cursus Photoshop & WordPress beeldbewerking
- Foto’s en resolutie afbeeldingen geschikt maken voor WordPress
- Formaten en afmetingen van afbeeldingen voor social media
- Verhouding en resolutie van foto’s en afbeeldingen voor webdesign
- Afbeeldingen SEO optimaliseren handleiding gevorderden
- Beste gratis betaalde afbeeldingen sliders WordPress
- Beste gratis rechtenvrije stockfoto’s, afbeeldingen, foto’s, fotografie
- Afbeeldingen kleiner maken met compressie Smush WordPress plugin
- Alt tekst tag afbeelding toevoegen automatisch wordpress plugin website
