Welk formaat moet een uitgelichte afbeelding in WordPress hebben?

Het getal dat de meesten zoeken is 1200 x 630 pixels. Dat is de verhouding die Facebook, LinkedIn en X gebruiken voor linkvoorbeelden (1.91:1), en het is wat een Open Graph-afbeelding zou moeten zijn. Stel je een uitgelichte afbeelding vooral in zodat gedeelde links er goed uitzien, gebruik dan 1200 x 630 en laat het daarbij.

Maar dat getal is niet wat je thema daadwerkelijk op het bericht toont. WordPress laat je uitgelichte afbeelding zelden op het originele formaat zien. Het thema vraagt om een specifiek geregistreerd afbeeldingsformaat, en WordPress serveert de vooraf gegenereerde uitsnede die daarbij past. Daarom kan een afbeelding die er op Facebook perfect uitziet, er in je single-post-template onscherp, uitgerekt of verkeerd uitgesneden uitzien. Het “juiste” formaat hangt af van het thema, niet van een universele regel.

Waarom het thema het getal overschrijft

Wanneer je een afbeelding uploadt, slaat WordPress niet één bestand op. Het draait wp_generate_attachment_metadata() en maakt een afgeleide voor elk geregistreerd afbeeldingsformaat: de drie standaardformaten (thumbnail, medium, large), de medium_large van de blok-editor (768px breed), plus elk formaat dat het thema of een plugin met add_image_size() heeft geregistreerd.

Een thema dat een brede 16:9-hero wil, doet iets als dit in functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

Het vierde argument, true, betekent hard croppen. WordPress snijdt je afbeelding uit tot precies 1200 x 675 en gooit alles weg wat niet in het 16:9-kader past. Zit je onderwerp bovenaan of onderaan het kader, dan wordt het afgesneden. Op false gezet (of weggelaten) schaalt het proportioneel en kunnen de uiteindelijke afmetingen afwijken van wat je opgaf.

Vervolgens bepaalt de template welk formaat er wordt opgehaald:

the_post_thumbnail( 'hero-featured' );

Welke naam je ook aan the_post_thumbnail() doorgeeft, dat is de uitsnede die wordt weergegeven. Het echte formaat van de uitgelichte afbeelding op je site wordt dus op twee plekken bepaald die je niet zelf hebt geschreven: de add_image_size()-aanroep en de the_post_thumbnail()-aanroep in het thema. Een groter bestand uploaden verandert geen van beide.

Er is nog een laag. WordPress serveert een srcset, dus op kleinere schermen laadt de browser mogelijk de medium- of large-afgeleide in plaats van de volledige uitsnede. De afmeting die je in DevTools ziet, is vaak niet degene die je hebt geüpload.

Hoe je het oplost, op volgorde

1. Zoek uit waar je thema daadwerkelijk om vraagt. Voordat je gaat gokken: bekijk elk formaat dat WordPress van je afbeelding genereert en welke de uitgesneden hero is. Sleep je afbeelding in de WordPress-afbeeldingsformaten-tool — die toont elke afgeleide die WP zou aanmaken, op exacte pixelafmetingen, zodat je je bronbestand op het echte doel afstemt in plaats van op de mythische 1200x630.

2. Upload groot genoeg om de grootste uitsnede te dekken. Is de hero van het thema 1200 x 675, upload dan minstens dat, en idealiter 2x voor retina (2400 x 1350). WordPress schaalt netjes naar beneden; het schaalt nooit op. Een te klein bronbestand is verreweg de meest voorkomende oorzaak van een wazige uitgelichte afbeelding.

3. Stem je beeldverhouding af op de uitsnede van het thema. Cropt het thema hard naar 16:9, geef het dan 16:9. Componeer met het onderwerp gecentreerd, zodat een harde crop niemand onthoofdt.

4. Klopt het geregistreerde formaat niet, pas het aan en genereer opnieuw. Bewerk de add_image_size()-waarden in een child-thema en bouw daarna de bestaande thumbnails opnieuw op — nieuwe afmetingen gelden pas voor toekomstige uploads totdat je dat doet:

wp media regenerate --yes

Geen WP-CLI? De plugin Regenerate Thumbnails doet hetzelfde vanuit het dashboard.

Wat je niet moet doen

Upload niet zomaar een 1200x630-afbeelding en ga ervan uit dat het geregeld is. Is het geregistreerde formaat van het thema 16:9, dan cropt WordPress je 1.91:1-afbeelding hard en verlies je de boven- en onderkant. Het Open Graph-getal en het weergavegetal zijn twee verschillende taken.

Schakel de afbeeldingsformaten van WordPress niet uit om “het origineel te behouden”. Mensen komen advies tegen om de tussenformaten op 0 te zetten of the_post_thumbnail los te koppelen. Dan valt het thema terug op het serveren van het bestand op volledig formaat, in de browser verkleind — een JPEG van 4000px die naar een telefoon wordt gestuurd. Dat verpest je laadtijd en Core Web Vitals. Die afgeleiden bestaan niet voor niets.

Vertrouw de “aanbevolen maat” van een plugin niet boven het daadwerkelijk geregistreerde formaat van je thema. SEO-plugins raden 1200x630 aan voor de OG-tag, wat voor die tag klopt. Het zegt niets over waarnaar je single-post-template cropt.

Sla wp media regenerate niet over na het wijzigen van formaten. add_image_size() bewerken doet niets aan afbeeldingen die al geüpload zijn. Dit is de stap die mensen vergeten, waarna ze concluderen dat de code niet werkte.

Kom je er nog niet uit?

Is de afbeelding na het afstemmen van de afmetingen en het opnieuw genereren nog steeds verkeerd, dan zit het probleem meestal in de crop-modus (true vs false) of in een srcset die een kleinere afgeleide serveert dan je verwacht. Sleep het bestand in de afbeeldingsformaten-tool om precies te zien welke uitsnedes jouw setup produceert, en vergelijk dat met wat de browser in DevTools laadt. Stem die twee op elkaar af en het gokwerk is voorbij.