De grootte van afbeeldingen in WordPress is ingewikkelder dan je op het eerste gezicht zou denken. Het is belangrijk om te begrijpen hoe afbeeldingsgroottes en afmetingen werken binnen WordPress, wat de standaardafmetingen zijn, en hoe je custom afbeeldingsgroottes kan definiëren om je website effectiever te kunnen beheren.

Met deze kennis op zak kan je vervolgens  je ervoor zorgen dat je altijd de juiste afbeeldingen in de juiste grootte op de juiste plek hebt, zodat je maximaal kan profiteren van je visuele content strategie.

Deze tactieken zullen er ook voor zorgen dat je artikelen leuker zijn om te delen, wat natuurlijk weer zorgt voor betere zichtbaarheid en meer verkeer. Onderzoek laat zien dat lezers zich slechts 10% van de tekstuele content kunnen herinneren na drie dagen, maar dit percentage springt naar 65% als je interessante afbeeldingen toevoegt.

In deze uitgebreide gids lees je alles wat je moet weten over WordPress afbeeldingsafmetingen.

Al nieuwsgierig? Aan de slag dan!

Kijk je liever de videoversie?

Hoe WordPress je afbeeldingen beheert

Het uploaden van afbeeldingen naar WordPress is vrij eenvoudig, maar er gebeurt nog een hoop binnen de WordPress back-end om ze op de juiste manier te verwerken.

Het eerste dat WordPress doet wanneer je een afbeelding uploadt, is drie extra versies in verschillende afmetingen van je afbeeldingen maken. Hierdoor heb je dus uiteindelijk vier afbeeldingen op je website voor elke afbeelding die je uploadt:

  • Thumbnail
  • Medium
  • Large
  • Originele grootte

WordPress maakt al deze verschillende afmetingen om je afbeeldingen aan elke bezoeker op de beste grootte aan te kunnen bieden. Je website zal automatisch de juiste afbeeldingen aan je lezers tonen op basis van het apparaat dat ze gebruiken, waardoor hun ervaring van je website verbetert.

Je kan je afbeelding ook nog altijd handmatig aanpassen om deze extra afmetingen te maken, maar dat is zelfs in een tool als Photoshop nog een hoop werk. Het is ook niet heel leuk werk, vandaar dat WordPress dit voor je oplost.

WordPress afbeeldingsafmetingen: belangrijke dingen om te onthouden

Voordat we naar de meer technische aspecten van WordPress afbeeldingsafmetingen gaan kijken, moet je een paar andere dingen weten.

We hebben al genoemd dat WordPress drie standaard afbeeldingsafmetingen voor je maakt, maar wat moet je doen als je een ander afmeting nodig hebt dan de standaarden van WordPress? Wat als je gewoon meer afmetingen wil?

Goed nieuws! Dat kan je eenvoudig regelen. WordPress biedt namelijk de mogelijkheid om de standaard afbeeldingsafmetingen te wijzigen, en zoveel afmetingen toe te voegen als je wil. Verderop leggen we dit in detail uit.

Maar voordat we daarmee bezig gaan, moet je weten dat er wel een paar vereisten zijn om dat goed voor je te laten werken.

Het eerste dat je moet proberen is je afbeelding te uploaden in de grootste afmeting dat je nodig hebt WordPress zal deze afbeelding vervolgens kleiner maken voor kleinere apparaten, maar het zal de afbeelding op volledige grootte (dus de originele grootte) gebruiken op plekken waar de afbeelding zo groot mogelijk moet zijn.

Stel dat je dus een afbeelding uploadt die kleiner is dan de grootste afmetingen die je hebt opgegeven in WordPress. In dat geval zal WordPress die afbeelding niet correct weergeven in de grootste afmeting. Daarnaast zal je ook zichtbaar kwaliteit verliezen.

Aan de andere kant moet je ook weer geen afbeeldingen uploaden die aanzienlijk groter zijn dan de grootste afmeting die je gaat gebruiken. WordPress zal die originele afbeeldingen immers nooit gebruiken, maar ze kosten wel onnodige schijfruimte op je server.

Daarom moet je altijd eerst de afmetingen van je afbeelding controleren voordat je gaat uploaden, en ervoor zorgen dat het in de grootste afmeting staat waarin je deze gaat gebruiken, maar ook niet groter dan dat.

Waar en hoe slaat WordPress je afbeeldingen op?

Wat betreft je Admin panel, slaat WordPress de afbeeldingen die je uploadt op in de Media Library. Je kan alle geüploade afbeeldingen zien door met je muis boven de Media optie te hoveren, en op Library te klikken.

De WordPress Media Library.
De WordPress Media Library.

Vervolgens kan je de afbeeldingen sorteren op type (afbeelding, video, audio) en datum. Je kan afbeeldingen alleen sorteren op datum als je deze functie niet uitgeschakeld hebt binnen de Settings.

Er zit ook een zoekveld aan de rechterkant om je te helpen een bepaalde afbeelding te vinden. Typ hierin een woord dat je gebruikt hebt in de titel, beschrijving of het bijschrift van je afbeelding.

Je afbeeldingen worden opgeslagen in de uploads map van je site (wp-content/uploads/). Om deze map te openen, zal je een FTP/SFTP client moeten gebruiken Er zijn verschillende submappen binnen de uploads map van je site, die je afbeeldingen per uploaddatum opslaan (aangenomen dat je de sort by date optie aan hebt laten staan in de Settings).

Je kan ook eigen mappen aanmaken voor je mediabestanden, maar we zouden dit alleen aanraden voor gevorderde gebruikers.

Wat zijn de standaard WordPress afbeeldingsafmetingen?

Als het gaat om WordPress en afbeeldingsafmetingen, kijken we altijd naar vier verschillende afmetingen, namelijk je originele mediabestanden en de drie extra afmetingen die WordPress standaard aanmaakt:

  • Thumbnail: 150px (vierkant)
  • Medium: Maximale breedte en hoogte van 300px
  • Large: Maximale breedte en hoogte van 1024px
  • Volledige grootte: De originele afmetingen van je afbeelding

Zoals eerder gezegd is het optimaal om je afbeeldingen in 1024px te uploaden als je van plan bent om dit standaardafmeting te gaan gebruiken. Hierdoor worden je afbeeldingen zelfs op bij grootste afmeting goed weergegeven, wat niet altijd lukt als je afbeelding kleiner is dan de grootste afmeting dat WordPress gebruikt (dat standaard op 1024px staat).

Wat is de ideale grootte van een uitgelichte afbeelding in WordPress?

Uitgelichte afbeeldingen in WordPress zijn cruciaal voor de betrokkenheid van lezers. Net als de omslag van een boek biedt de uitgelichte afbeelding een voorproefje van wat er in de content te zien is.

Ze verschijnen meestal bij WordPress berichten, maar ze kunnen ook worden opgenomen bij pagina’s en aangepaste berichttypen. En omdat de uitgelichte afbeelding uiteindelijk door zoekmachines en sociale media websites kan worden getoond, is het cruciaal om de juiste grootte te kiezen.

Er zijn verschillende meningen over dit onderwerp, maar de algemene consensus is dat de ideale grootte van een WordPress uitgelichte afbeelding ongeveer 1200 × 630 pixels is. Een afbeelding met deze afmetingen zou goed op je site moeten passen, ongeacht de grootte van het scherm van je lezer.

Het is ook de moeite waard om op te merken dat, om je pagina’s in aanmerking te laten komen voor de Google Discover feed (een geweldige bron van extra verkeer van Google), Google benadrukt dat je WordPress uitgelichte afbeelding minstens 1200 pixels breed moet zijn.

Maar is dit de standaardgrootte van een uitgelichte afbeelding in WordPress?

Het komt misschien als een verrassing, maar WordPress heeft geen standaard uitgelichte afbeelding. In plaats daarvan hebben uitgelichte afbeeldingen standaard hun oorspronkelijke uploadgrootte, tenzij het ontwerp van de site beperkingen oplegt, of tenzij je een van de andere standaardgroottes van WordPress selecteert (zoals “Medium” of ” Large”).

Veel WordPress thema’s – waaronder het standaardthema van WordPress, Twenty Twenty-One – stellen echter hun eigen aangepaste afbeeldingsformaten in voor uitgelichte afbeeldingen, dus controleer eerst de instellingen van je thema.

Wat is de ideale grootte van een WordPress headerafbeelding?

Net als uitgelichte afbeeldingen kunnen headerafbeeldingen je lezers een voorproefje geven van het thema en de sfeer van de pagina. Hoewel ze niet zo snel worden gedeeld op zoekresultatenpagina’s of socialmediafeeds, is het toch belangrijk voor de snelheid en integriteit van je site dat ze het juiste formaat hebben.

Omdat headerafbeeldingen vaak afhankelijk zijn van het ontwerp van een site, kunnen de afmetingen ervan sterk uiteenlopen. Er is geen “one size fits all” scenario, dus kun je het beste rekening houden met het ontwerp en de responsiviteit van je site voordat je de grootte van je WordPress headerafbeelding kiest.

Dat gezegd hebbende, raden themadevelopers aan om WordPress headerafbeeldingen te houden aan een 16:9 verhouding, zoals:

  • 1920 × 1080 pixels
  • 1280 × 720 pixels
  • 1152 × 648 pixels

Net als bij uitgelichte afbeeldingen stelt WordPress geen standaardgrootte in voor headerafbeeldingen. Je thema kan echter een optie hebben om de headergrootte aan te passen via de instellingen van het thema, onder het menu Appearance.

Als het door jou gekozen thema je geen optie geeft om de grootte van de WordPress headerafbeelding te veranderen, kun je die nog steeds zelf aanpassen. We zullen hierna behandelen hoe.

Zo verander je de standaard afbeeldingsafmetingen (en wanneer dat nodig is)

Alhoewel de standaard afbeeldingsafmetingen van WordPress voor de meeste gebruikers prima werken, kan je ook andere vereisten hebben. Zo kan je bijvoorbeeld een net wat groter afmeting willen voor je thumbnails of juist kleinere afmetingen voor je grote afbeeldingen.

Het veranderen van de standaard afbeeldingsafmetingen in WordPress is een goed idee wanneer je merkt dat je vaak de afbeeldingen die je uploadt nog bewerkt, omdat de standaardafmetingen die WordPress niet goed uitpakken voor jouw toepassing.

Voordat je nieuwe custom afmetingen toevoegt aan de standaard afbeeldingsafmetingen, moet je hierbij bedenken dat je daardoor veel meer afbeeldingen in de database van je site gaat opslaan dan waarschijnlijk nodig is. Hierdoor kunnen de prestaties van je website verminderen, en verbruikt de site meer schijfruimte dan nodig.

Hetzelfde geldt voor websites met veel afbeeldingen, die specifieke afmetingen gebruiken. Fotografen, ontwerpers en andere beroepen met veel afbeeldingen willen graag dezelfde afmetingen op de hele website, om een uniforme weergave van hun afbeeldingen te hebben.

Ook landingspagina’s moeten soms bepaalde afmetingen voor afbeeldingen gebruiken, en dan kunnen de standaardafmetingen van WordPress net niet goed werken. Ook een e-commerce webshop wil vaak grotere thumbnails gebruiken, die meer van het product laten zien.

Je kan nog allerlei andere redenen bedenken waarom je de standaardafmetingen van afbeeldingen wil wijzigen, maar het idee is duidelijk.

WordPress begrijpt dit ook, en daarom kan je de standaardafmetingen wijzigen.

Stappen om de standaardafmetingen van afbeeldingen in WordPress te wijzigen

Dit is het stapsgewijze proces voor het veranderen van de standaard afbeeldingsafmetingen in WordPress.

Stap 1: Hover met je muis boven Settings en klik op de Media optie die dan verschijnt.

WordPress Media Settings waar je de standaard afbeeldingsafmetingen kan wijzigen.
WordPress Media Settings waar je de standaard afbeeldingsafmetingen kan wijzigen.

Stap 2: Verander de afmetingen naar iets dat je wil door de cijfers aan te passen, zoals hieronder te zien:

Voorbeeld van aangepaste afbeeldingsafmetingen binnen Media Settings.
Voorbeeld van aangepaste afbeeldingsafmetingen binnen Media Settings.

Stap 3: Klik op Save Changes onderaan de pagina.

Voortaan worden alle afbeeldingen die je uploadt naar deze nieuwe standaardafmetingen omgezet.

Er zijn tutorials te vinden die zeggen dat je “0” moet gebruiken als standaard afbeeldingsafmeting. We raden dit sterk af, zelfs al kan het je schijfruimte besparen.

Wanneer je de waarden naar “0” zet, zal WordPress op alle plekken en bij alle apparaten de originele afbeelding op volledige grootte gebruiken, wat juist veel hoger verbruik van bandbreedte op je site oplevert. Daarnaast maakt dit je website ook aanzienlijk langzamer voor pagina’s met veel afbeeldingen.

Zo voeg je custom afbeeldingsafmetingen toe aan WordPress

Wanneer je alle WordPress afbeeldingen die je in het verleden geüpload hebt wil wijzigen naar deze nieuwe afmetingen, dan kan je diverse goede plugins gebruiken, die we hieronder uitgebreid behandelen.

Voor gebruikers die veel verschillende afbeeldingen gebruiken, kan het handig zijn om meer afbeeldingsafmetingen te hebben dan de standaard 3 afmetingen van WordPress.

De standaard afbeeldingsafmetingen zijn prima voor de normale toepassingen, maar voor bijvoorbeeld pop-up graphics, widgets of afbeeldingen in sliders, heb je meestal andere afmetingen nodig.

Custom afbeeldingsafmetingen bieden je de flexibiliteit om de functionaliteit van je WordPress website te verbeteren, en besparen een hoop tijd op het bewerken van de afzonderlijke afbeeldingen.

Nu we weten wat het beginpunt is, kunnen we verder gaan kijken naar het proces voor het toevoegen van deze custom afbeeldingsafmetingen aan je WordPress website.

Hier heb je twee mogelijkheden. Je kan een plugin gebruiken die alles voor je regelt. Of je kan kiezen voor de handmatige manier, door een aantal regels code toe te voegen aan de bestanden van je website.

We beginnen met de plugins.

Custom afbeeldingsafmetingen toevoegen via “Image Regenerate & Select Crop”

De Image Regenerate & Select Crop plugin gaat nog een stapje verder dan de Regenerate Thumbnails plugin die we hieronder behandelen, door ook ruimte te bieden aan customization en extra functionaliteit.

Naast dat je de standaard afbeeldingsafmetingen kan veranderen, kan je met deze plugin ook alle bestaanden afbeeldingen aanpassen aan je gewenste afmetingen, opties instellen voor het standaard bijsnijden van afbeeldingen, en thumbnails opnieuw laden.

Opties voor custom afbeeldingsafmetingen via de Image Regenerate & Select Crop plugin.
Opties voor custom afbeeldingsafmetingen via de Image Regenerate & Select Crop plugin.

Nadat je de plugin hebt geïnstalleerd en geactiveerd, kan je zoveel nieuwe afbeeldingsafmetingen maken als je wil, via de normale WordPress Settings > Media pagina.

Handmatig custom afbeeldingsafmetingen toevoegen

Alhoewel dit een vrij eenvoudig en helder proces is, moet je altijd eerst een back-up maken van je website voor het geval er toch iets misgaat. Na het maken van de back-up ga je naar het admin dashboard van je WordPress website.

Daar hover je met de muis boven het Appearance menu, en kies je Editor (soms Theme Editor genoemd).

Vervolgens zoek je het bestand functions.php en controleer je of de volgende code daar al staat (gebruik de zoekfunctie). Mocht deze regel er al staan, dan hoef je niks te doen.

Staat de regel er nog niet, voeg het dan toe aan het bestand:

add_theme_support( 'post-thumbnails' );
Toevoegen van de hook voor custom afbeeldingsafmetingen aan functions.php.
Toevoegen van de hook voor custom afbeeldingsafmetingen aan functions.php.

Na het toevoegen van de code klik je op Update file onderaan om de functie voor het maken van custom afbeeldingsafmetingen te activeren.

Nu kan je de code toevoegen voor de specifieke afbeeldingsafmetingen die je graag wil hebben. Zoek op “add_image_size” in je functions.php bestand, aangezien je daar de code moet bewerken:

add_image_size( 'my-custom-image-size', 800, 640 );

Specifieker moet je aanpassen wat er in de aanhalingstekens staat, met de naam die je je nieuwe custom afmeting wil geven. We raden je aan dit simpel en duidelijk te houden (bijvoorbeeld “main-post-image”).

Nadat je de naam hebt toegevoegd, moet je de daadwerkelijke afmetingen toevoegen. De eerste numerieke waarde is de breedte van de afbeelding, en de tweede waarde de hoogte.

Hier een screenshot van de voorbeeldcode die we toegevoegd hebben aan het functions.php bestand.

Toevoegen van custom afbeeldingsafmetingen aan functions.php.
Toevoegen van custom afbeeldingsafmetingen aan functions.php.

Begrijpen hoe bijsnijden werkt

Wanneer een afbeelding kleiner wordt gemaakt zonder bij te snijden, is het gewoon een gekrompen versie van de originele afbeelding. Maar wanneer er wel bijgesneden (“cropped”) wordt, zal een deel van de afbeelding verdwijnen.

Het werkt dus precies zoals het fysiek afknippen van een foto. Wanneer je een schaar pakt en iemands hoofd uitknipt, heb je die foto ook bijgesneden. De digitale versie werkt net zo.

Het doel hiervan is vaak het beperken van de bestandsgrootte van de afbeelding, maar dan is bijsnijden niet de beste keuze. Je verwijdert immers een deel van je afbeelding, terwijl de bestandsgrootte nauwelijks vermindert. Aan de andere kant kan bijsnijden wel werken bij afbeeldingsafmetingen die precies aan bepaalde afmetingen of eisen moeten voldoen, bijvoorbeeld uitgelichte afbeeldingen of profielfoto’s.

Het belangrijkste onderwerp kan dan te klein worden bij een uitgelichte afbeelding Ze moeten nog genoeg ruimte krijgen bij de nieuwe afmetingen. Bekijk dus rustig wat het beste werkt voor de verschillende soorten afbeeldingen die je gebruikt, en stel de functie voor bijsnijden in zoals het beste uitkomt.

Wanneer je custom afbeeldingsafmetingen toevoegt, kan je WordPress automatisch de afbeeldingen laten bijsnijden op basis van jouw instellingen en de originele grootte. Je moet dan “true” toevoegen aan het einde van de regel code.

Ons voorbeeld van hierboven weer, maar nu met de ingeschakelde functie voor bijsnijden.

add_image_size( 'name-for-your-custom-image', 800, 640, true );

Wanneer je de afbeeldingen niet wil bijsnijden, kan je “false” in plaats van “true” gebruiken, of dit deel gewoon helemaal weglaten. Als er niks staat zal de code automatisch aannemen dat “false” bedoeld wordt. Daardoor zal WordPress dus geen afbeeldingen bijsnijden.

Toevoegen van een custom afbeeldingsafmeting aan je thema

Nadat je de gewenste custom afbeeldingsafmetingen hebt toegevoegd, kan je ook de code van je thema bijwerken. Hierdoor zal je thema de nieuwe afbeeldingsafmetingen precies zo tonen zoals jij dat wil.

Ben je een absolute beginner in het bewerken van code, maak dan eerst weer een back-up van je website voordat je dit doet.

Vervolgens zoek je in het thema-bestand naar de “post loop” en voeg je de volgende code toe:

the_post_thumbnail( 'your-specified-image-size' );

Dit bestand kan je vinden door op Theme Editor te klikken onder de instelling Appearance. Zoek hier naar het bestand index.php, dit is het thema-bestand waarin je de “post loop” kan vinden die je moet bewerken.

Nadat je deze gevonden hebt, kan je bovenstaande code toevoegen, zoals ook hieronder te zien is:

Toevoegen van de hook voor custom afbeeldingsafmetingen aan functions.php.
Toevoegen van de hook voor custom afbeeldingsafmetingen aan functions.php.

Hierbij vervang je het stukje “new-homepage-feature” met de naam die je aan je eigen afmeting hebt gegeven.

Nadat je deze code hebt toegevoegd en het bestand hebt bijgewerkt, zal je het custom afbeeldingsafmeting in je mediabibliotheek zien staan. Upload een nieuwe afbeelding om alles uit te proberen.

Updaten van oude thumbnails

Alhoewel het erg handig is om je eigen afbeeldingsafmetingen toegevoegd te hebben, blijf je dan nog wel met de oude afbeeldingen zitten.

Gelukkig is ook daar een oplossing voor, er zijn namelijk meerdere goede WordPress plugins die je daarmee helpen. Tijd dus om te kijken hoe je de oude thumbnails kan bijwerken.

Regenerate Thumbnails Plugin

Regenerate Thumbnails maakt het mogelijk om automatisch alle afbeeldingen opnieuw te uploaden in de nieuwe afmetingen, waaronder custom afbeeldingsafmetingen die je zelf hebt toegevoegd.

Om de plugin te installeren hover je met de muis boven de Plugins optie en klik je op Add New. Typ vervolgens “Regenerate Thumbnails” in bij het zoekveld.

Installeer de Regenerate Thumbnails plugin door op Install Now te klikken.

Installeren van de Regenerate Thumbnails plugin.
Installeren van de Regenerate Thumbnails plugin.

Na het installeren klik je op Activate.

Vervolgens hou je de muis boven het Tools menu aan de linkerkant en klik je daar op Regenerate Thumbnails:

De pagina met instellingen voor de Regenerate Thumbnails plugin.
De pagina met instellingen voor de Regenerate Thumbnails plugin.

Klik op Regenerate Thumbnails for All [#] Attachments om afbeeldingen in de nieuwe afmetingen aan te maken voor alle bestaande afbeeldingen.

Zoals je in bovenstaande afbeelding kan zien, laat Regenerate Thumbnails ook een lijst met huidige actieve afbeeldingsafmetingen zien.

Wellicht zie je er nog wat afmetingen bij staan die je nog niet kende. Deze worden vaak aangemaakt door plugins, om het ontwerp, uiterlijk of functionaliteit van je website te verbeteren.

De ingebouwde WordPress editor voor afbeeldingen gebruiken

Zoals eerder gezegd kan je het beste alleen custom afbeeldingsafmetingen maken die je echt vaak gebruikt. Voor afmetingen die je slechts af en toe gebruikt, kan je beter de afbeelding handmatig aanpassen via de ingebouwde WordPress editor voor afbeeldingen.

We laten je kort zien hoe je de ingebouwde editor kan gebruiken om de afmeting van een afbeelding snel en makkelijk aan te passen.

Klik hiervoor eerst op het Media menu om naar de Media Library te gaan. Vervolgens klik je op de afbeelding waarvan je de afmeting wil aanpassen.

Daarna klik je op Edit Image onder de afbeelding:

De knop Edit Image.
De knop Edit Image.

Je krijgt de huidige afmeting te zien, en kan het ook meteen aanpassen. Je voert hiervoor gewoon de gewenste afmeting voor de afbeelding in, en klikt op Scale, en klaar alweer.

Instellen van de afmetingen van de afbeelding
Instellen van de afmetingen van de afbeelding

De aanpassing wordt automatisch opgeslagen zodra je op Scale klikt. Wanneer je de nieuwe afmetingen toch niet goed vindt, kan je de afbeelding altijd terugzetten naar de originele grootte, via Restore Original Image (direct onder het veld voor de afmetingen).

Bewerken van afbeeldingen in WordPress Gutenberg

Wanneer je Gutenberg gebruikt, kan je de afbeeldingsafmeting snel wijzigen bij het toevoegen van de afbeelding aan je artikel.

Veranderen van de afbeeldingsafmeting via Gutenberg.
Veranderen van de afbeeldingsafmeting via Gutenberg.

Zoals je in bovenstaande afbeelding kan zien, kan je bij het uploaden van een afbeelding naar een artikel in Gutenberg, kiezen uit de bestaande afmetingen, of de afmeting aanpassen.

Wanneer je nieuwe custom afbeeldingsafmetingen toegevoegd hebt aan je thema-bestand, kan je die allemaal vinden in het Image size dropdownmenu.

Je kan ook de afmetingen wijzigen via het veld er direct onder. Het enige dat je hoeft te doen is de gewenste afmetingen invoeren, en de afbeelding zal automatisch de gewenste afmetingen krijgen.

Optimaliseren van je afbeeldingen

Een gids over afbeeldingen is natuurlijk nooit af zolang er niks gezegd is over het optimaliseren van afbeeldingen. Alhoewel we het optimaliseren van afbeeldingen ook veel uitgebreider bespreken, kunnen een paar korte tips nooit kwaad.

Wanneer je custom afbeeldingsafmetingen toevoegt, moet je immers ook weten hoe je je afbeeldingen kan optimaliseren zodat ze de prestaties van je site niet verminderen, of meer server resources gebruiken dan noodzakelijk.

Daarom enkele korte tips om aan de slag te gaan met afbeeldingsoptimalisatie.

Bepaal het bestandstype

Het kiezen van het optimale bestandstype voor je afbeeldingen kan een hoop ruimte besparen. Alhoewel er allerlei verschillende soorten afbeeldingstypen te vinden zijn, is de meerderheid JPEG of PNG.

JPEG wint met voorsprong als het gaat om kleurrijke afbeeldingen. Je kan JPEG bestanden ook verder comprimeren om de bestandsgrootte verder te beperken, met minimaal verlies aan kwaliteit.

Aan de andere kant is PNG meestal beter voor tekeningen, tekst, screenshots en graphics.

Resizen van afbeeldingen

Het resizen van afbeeldingen is een snelle manier om de bestandsgrootte te verminderen. Als richtlijn moet je aanhouden dat je afbeeldingen altijd maximaal zo groot zijn als dat je zo nodig hebt.

Gebruik je op je website 1200px als maximale breedte, dan slaat het nergens op om ook maar één afbeelding te hebben met een breedte boven die 1200px.

We hebben eerder al gezegd dat het belangrijk is om custom afmetingen alleen te maken wanneer echt nodig, dus dat is ook een belangrijke tip.

Doe je voordeel met lossy compressie

Lossy compressie is een mooie manier om de bestandsgrootte verder te verminderen, wanneer je je afbeeldingen al hebt geoptimaliseerd op de andere manieren.

Deze methode verwijdert wat data van je afbeelding, maar alleen die data die de kwaliteit niet beïnvloedt.

Gebruik lazy loading

Lazy loading helpt bij het prioritiseren van het laden van afbeeldingen op de pagina’s van je site. Met deze aanpak worden afbeeldingen precies geladen wanneer de bezoeker ernaartoe scrollt, en niet eerder. De afbeeldingen bovenaan worden dus direct geladen, maar alles buiten het scherm wordt pas geladen wanneer nodig.

Er zijn nog een hoop meer tips over afbeeldingsoptimalisatie, maar die kan je het beste lezen in onze uitgebreide gids voor het optimaliseren van afbeeldingen. We houden het hier dus alleen nog bij een paar plugins die je kan gebruiken.

Plugins voor het bewerken van afbeeldingen in WordPress

Het mooie van deze plugins is dat je geavanceerde afbeeldingsoptimalisatie kan toepassen met slechts een paar klikken, zonder ingewikkelde tools of code. Daarnaast zijn deze plugins meestal gratis, zeker wanneer je een beperkt aantal afbeeldingen moet optimaliseren, of alleen de basisfuncties nodig hebt.

  • Imagify: Indrukwekkend nauwkeurig niveau van compressie, en biedt andere functies voor afbeeldingsoptimalisatie
  • Kraken: Handige lossless compressie plugin, maar heeft eigenlijk wel de premium versie nodig
  • TinyPNG: Ondersteunt lossy compressie en werkt met allerlei afbeeldingstypen
  • Optimole: Voor CDN en lazy loading, beide erg handige technieken voor het optimaliseren van je afbeeldingen

Samenvatting

Je weet nu alles wat je moet weten over afbeeldingsafmetingen in WordPress, en hoe je maximaal kan profiteren van de features die WordPress daarvoor te bieden heeft. Het optimaliseren van de prestaties van je website en de functionaliteit ervan zal makkelijker worden, nu je perfect overweg kan met je WordPress afbeeldingen.

Je kan nu custom afbeeldingsafmetingen maken en ze beheren via de code van je thema of via een specifieke plugin. Onthoud dat je ook altijd je oude thumbnails moeten updaten wanneer je een afbeelding verandert, wat ook erg eenvoudig te doen is met de handige plugins die we hierboven genoemd hebben.

Zijn we nog iets vergeten? Laat een reactie achter als je nog meer wil weten over afbeeldingsafmetingen in WordPress.

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.