WPLounge
afbeeldingen aanpassen
Home » Developers » Grootte van afbeeldingen wijzigen in WordPress

Grootte van afbeeldingen wijzigen in WordPress

In WordPress wil  je vaak eerst het formaat van afbeeldingen bewerken tot het juiste formaat, voor bijvoorbeeld miniaturen en uitgelichte foto’s, voordat je ze plaatst in berichten of pagina’s. Dat kan sneller, in dit artikel laten we zien hoe je het beste afbeeldingsformaten kunt wijzigen met WordPress. Ook laten we zien hoe je in WordPress automatisch afbeeldingen kunt verkleinen.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

WordPress maakt standaard verschillende formaten afbeeldingen. Dus op het moment dat je een nieuwe afbeelding toevoegt, worden er extra afbeelding aangemaakt voor deze standaardformaten. Het is mogelijk om eigen aanpaste formaten toe te voegen aan WordPress en zo automatisch deze afmetingen te laten generen. Bewerken van foto’s buiten WordPress om is dan niet meer nodig en zo kan je veel tijd besparen.

Afbeeldingsgrootte aanpassen

Voordat we beginnen: deze tutorial is iets geavanceerder dan onze meeste tutorials, we gebruiken code snippets die we toevoegen aan de code van de website. De volgende stappen gaan we doorlopen om nieuwe afbeeldingsformaten toe te voegen:

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.
  • Bewerken van functions.php, van het child thema
  • Code snippets toevoegen aan functions.php om aangepaste formaten weer te geven.
  • Genereer miniaturen voor eerder geüploade afbeeldingen
  • Het gebruik van aangepaste formaten bij het invoegen van WordPress berichten.

Laten we beginnen!

Functions.php bewerken

Als eerste stap gaan we code snippets toevoegen aan het functions.php bestand van je thema. Gebruik hierbij een child theme, zodat de wijzigingen niet verloren gaan na een volgende thema update. Maak eerst een backup van je website voordat je enige wijzigingen in de code aanbrengt.
De snelste manier om de code toe te voegen is door naar het menu ‘Weergave > thema editor’  te gaan in je WordPress dashboard. Vervolgens voeg je de volgende code toe aan functions.php:

add_theme_support( 'post-thumbnails' );

Vergeet niet om op ‘bestand bijwerken’ te klikken. Het bovenstaande script schakelt de functie add_image_size () in, zodat je nieuwe WordPress afbeeldingsformaten kan toevoegen. Nu kan je een aantal formaten toevoegen aan je website door de volgende code snippet te gebruiken in functions.php:

add_image_size( 'post-thumbnail size', 600, 240 );
add_image_size( 'homepage-thumb size', 240, 160 );
add_image_size( 'fullpage-thumb size', 600, 2000 );

In deze voorbeelden voeg je formaten toe, met een naam naar keuze en afmetingen van de afbeeldingen in respectievelijk de breedte en hoogte.

Aangepaste afbeeldingen weergeven

Na het toevoegen van nieuwe afbeeldingsformaten, is de volgende stap om de aangepaste afbeeldingen weer te geven in het WordPress thema. Voeg de volgende code snippet toe aan het themabestand Deze code voeg je toe aan de ‘post loop‘ van het thema waar je de miniatuurafbeelding wilt weergeven.

<?php the_post_thumbnail( 'Jouw afbeeldingsformaat' ); ?>

In deze code wijzig je ‘jouw afbeeldingsformaat’  in de naam van de afbeelding die je in de vorige stap hebt ingesteld. (zoals ‘post-thumbnail size’). Gebruik deze code in je themabestanden om de aangepaste afbeeldingsformaten weer te geven.

Miniaturen genereren van eerder geüploade afbeeldingen

Eerder geüploade afbeeldingen zijn niet automatisch beschikbaar in de nieuwe afbeeldingsformaten die we in de vorige stap toegevoegd hebben. Deze miniaturen moet je vervolgens opnieuw genereren in WordPress, zodat bestaande afbeeldingen in de mediabibliotheek worden bijgewerkt naar de nieuwe formaten.
We raden aan om de plugin Regenerate Thumbnails te gebruiken. Deze plugin zal al je WordPress afbeeldingen bijwerken naar de aangepaste formaten uit te vorige stap.

Regenerate Thumbnails

Na het installeren en activeren van de plugin, staat er een nieuw menu item onder Gereedschap > Miniaturen opnieuw genereren. 

Miniaturen opnieuw genereren

Hiermee worden alle missende thumbnail bestanden aangemaakt.

Het gebruik van de aangepaste afbeeldingen

Om aangepaste afbeeldingen in je berichten te plaatsen, is het handig om de Simple Image Sizes plugin te installeren.

Simple Image Sizes plugin

Na het activeren van de plugin, ga je naar Instellingen > Media en vink je ‘In bericht-invoeging weergeven?‘ aan voor alle afmetingen van afbeeldingen die je wilt gebruiken in je WordPress berichten

afbeeldingsformaten toevoegen

Vergeet niet op ‘bijwerken‘ te klikken om de instellingen te bewaren. Hiermee kan je foto’s aan je content toevoegen aan de hand van de verschillende afbeeldingsformaten.

De grootte van afbeeldingen automatisch wijzigen

Wanneer je afbeeldingen op je WordPress website te groot zijn en het formaat niet wijzigt, kan de website erg traag worden. Om handmatig afbeeldingen te verkleinen kan een tijdrovende klus zijn, maar gelukkig is er een manier om dit proces te versnellen.

Resize Image after upload plugin

resize-image-plugin

Zoals de naam al doet vermoeden kan je met de plugin ‘Resize Image after upload‘ afbeeldingen automatisch verkleinen. We laten zien hoe het werkt.

Na het installeren en activeren van de plugin, kan je via Instellingen > Resize Image Upload de verschillende opties bekijken. De configuratie van de plugin is vrij eenvoudig, alle opties staan op één pagina. Zorg er wel voor dat je onderaan op de pagina op de knop “Update options” klikt om wijzigingen op te slaan.

Opties om het formaat van een afbeelding te wijzingen

In het gedeelte “Re-sizing options” bepalen we de maximale grootte van de afbeeldingen. Wanneer je website niet groter is dan 800 pixels, is het dus handig om de maximale grootte van afbeeldingen op 800 pixels te zetten. Vergeet hierbij niet om ook ‘enable re-sizing‘ op ‘yes‘ te zetten.

re-sizing opties

Afbeeldingen comprimeren

Het is ook mogelijk om met de plugin automatisch afbeeldingen te comprimeren. Hoe hoger de compressie-waarde van een afbeelding, hoe kleiner het bestand wordt. Echter gaat de beeldkwaliteit bij het comprimeren van een afbeeldingen achteruit. Je wilt dus altijd een balans vinden tussen kwaliteit en downloadsnelheid. We gebruiken voor de meeste websites een compressiewaarde van 70.

Afbeeldingen comprimeren

Opties voor het converteren van afbeeldingen

In het gedeelte “Image conversion options” is er de mogelijkheid om PNG-afbeeldingen te converteren naar het JPEG formaat. Foto’s in het PNG formaat zijn grote bestanden en kunnen altijd kleiner worden gemaakt door conversie naar JPEG zonder veel kwaliteitsverlies.

Echter wanneer je veel PNG-illustraties uploadt, wil je deze waarschijnlijk niet converteren dus sla dan deze optie over. Om PNG naar JPEG-conversie te activeren, selecteer je “YES – convert all uploaded png images“.

PNG naar JPEG

Laten we nu het formaat van een afbeelding automatisch aanpassen

Nu starten we met het uploaden van een PNG afbeelding met een bestandsgrootte van 850 KB. Laten we eens kijken wat er gebeurd na het uploaden van de afbeelding:

Afbeelding automatisch comprimeren

Zoals je ziet is de grootte van de afbeelding verkleint naar 36 KB, een compressie van meer dan 90%! Ook is het PNG formaat omgezet naar JPEG.

Let wel, de plugin zal geen bestaande afbeeldingen verkleinen, dus alleen nieuwe afbeeldingen die geüpload worden. Voor meer opties voor het optimaliseren van afbeeldingen lees dan het artikel “Afbeeldingen optimaliseren met verschillende plugins“.

Beoordeel dit artikel

Roger.Overdevest

Roger is een SEO specialist met veel passie voor WordPress

Reageer