Uitgelichte afbeelding WordPress: 1200×630 + vind je formaat

Kort antwoord: weet je het formaat van je thema nog niet, gebruik dan 1200 x 630 pixels (ongeveer 1.91:1). Dat is het formaat voor linkvoorbeelden dat Facebook aanraadt, en SEO-plugins gebruiken de uitgelichte afbeelding meestal als deelafbeelding.

In het bericht zelf telt het formaat dat je thema toont. WordPress slaat elke upload op in meerdere formaten en het thema kiest welk daarvan verschijnt. Klassieke thema’s stellen dat in met set_post_thumbnail_size() of add_image_size(); blokthema’s stellen het in via het blok Uitgelichte afbeelding. Snijdt het thema bij naar 16:9 of vierkant, dan kan een afbeelding van 1200 x 630 een stuk aan de linker- en rechterkant verliezen. Zoek het formaat van je thema op (hieronder staan vier manieren) en upload dan een afbeelding die minstens zo groot is, of ongeveer twee keer zo breed voor scherpe resultaten op schermen met een hoge pixeldichtheid.

Wil je zien welke formaten WordPress van een bepaalde afbeelding maakt, sleep die dan in de tool voor WordPress-afbeeldingsformaten.

Welk formaat je gebruikt, per plek waar de afbeelding verschijnt

Waar de afbeelding verschijnt	Uploadformaat	Opmerkingen
Je berichten, formaat van het thema nog onbekend	1200 x 630, of 2400 x 1260 voor scherpere resultaten	Werkt ook voor linkvoorbeelden terwijl je het formaat van je thema uitzoekt
Je berichten, formaat van het thema bekend	Ongeveer twee keer de breedte van de uitgelichte afbeelding in je thema, in dezelfde verhouding	WordPress maakt kleinere kopieën van een upload, nooit grotere
Linkvoorbeelden op Facebook	Minstens 1200 x 630 (ongeveer 1.91:1); 1200 x 628 heeft bijna dezelfde vorm	Uit de deelrichtlijnen van Facebook
Google Discover	Minstens 1200 px breed, 16:9 (bijvoorbeeld 1200 x 675)	Uit de Discover-richtlijnen van Google

WordPress-afbeeldingsformaten in één oogopslag

Elke afbeelding die je uploadt krijgt verkleinde kopieën voor elk geregistreerd formaat. Dit zijn de formaten die WordPress core registreert, met de standaardwaarden uit het Theme Handbook en de functiereferentie van core:

Naam van het formaat	Standaardafmetingen	Aan te passen in Instellingen > Media?	Opmerkingen
thumbnail	150 x 150, bijgesneden	Ja	Heeft een vinkje om bij te snijden tot exacte afmetingen
medium	300 x 300 max	Ja	In verhouding geschaald
medium_large	768 breed, geen hoogtelimiet	Nee	Vooral gebruikt in srcset
large	1024 x 1024 max	Ja	In verhouding geschaald
1536x1536	1536 x 1536 max	Nee	Toegevoegd in WordPress 5.3 voor schermen met een hoge pixeldichtheid
2048x2048	2048 x 2048 max	Nee	Toegevoegd in WordPress 5.3 voor schermen met een hoge pixeldichtheid
post-thumbnail	Ingesteld door het thema	Nee	Bestaat alleen als het thema set_post_thumbnail_size() aanroept
full	Je originele upload	Nee	Heel grote uploads worden eerst verkleind (zie hieronder)

“Max” betekent dat WordPress de afbeelding binnen dat vak laat passen en de verhoudingen behoudt. Een foto van 2000 x 1000 wordt 1024 x 512 voor large, niet 1024 x 1024.

Thema’s en plugins voegen vaak extra formaten toe met add_image_size(). WooCommerce voegt bijvoorbeeld eigen productformaten toe, die we behandelen in onze gids over het formaat van WooCommerce-productafbeeldingen.

Er is nog een regel die grote uploads raakt. Sinds WordPress 5.3 verkleint WordPress een afbeelding die breder of hoger is dan 2560 pixels, en gebruikt het die verkleinde kopie als grootst beschikbare formaat. Die drempel komt van het filter big_image_size_threshold, met als standaardwaarde 2560. Zie je -scaled in bestandsnamen en wil je weten of je dit moet uitzetten, lees dan hoe je scaled afbeeldingen in WordPress uitschakelt.

Waar het formaat van de uitgelichte afbeelding echt vandaan komt

Een uitgelichte afbeelding is elke afbeelding die je instelt in het paneel Uitgelichte afbeelding van de berichteditor. Wat bezoekers zien hangt af van hoe het thema die afbeelding toont.

Klassieke thema’s

Een klassiek thema zet uitgelichte afbeeldingen aan en registreert het formaat in zijn functions.php:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() registreert een formaat met de naam post-thumbnail. Het derde argument bepaalt het bijsnijden. Met false (de standaardwaarde) schaalt WordPress de afbeelding zodat die binnen 1200 x 675 past. Met true snijdt het de afbeelding vanuit het midden bij tot precies 1200 x 675, dus alles buiten een vak van 16:9 valt weg. Je kunt ook een array meegeven, zoals array( 'center', 'top' ), om te kiezen welk deel blijft staan.

Veel thema’s registreren extra benoemde formaten voor verschillende templates:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

De template kiest er dan een op naam:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Zonder naam gebruikt the_post_thumbnail() het formaat post-thumbnail. Het echte formaat van de uitgelichte afbeelding in een klassiek thema is dus het formaat dat in de template staat, en een blogarchief kan een ander formaat gebruiken dan de weergave van een los bericht.

Blokthema’s

Blokthema’s, waaronder de gratis thema’s op deze site, tonen de uitgelichte afbeelding met het blok Uitgelichte afbeelding. De referentie van de core-blokken noemt de instellingen ervan, waaronder sizeSlug (welk geregistreerd formaat geladen wordt), aspectRatio, width, height en scale.

Dat verandert waar je moet kijken. Open Weergave > Editor, bewerk de template Enkele berichten en selecteer het blok Uitgelichte afbeelding. De zijbalk laat zien welk afbeeldingsformaat het laadt en of er een beeldverhouding is ingesteld. De beeldverhouding wordt in de browser toegepast met CSS, dus het bestand blijft hetzelfde en alleen het zichtbare kader verandert. Vraagt het blok om een kader van 16:9 en is je afbeelding vierkant, dan valt er een deel weg. Archief- en hometemplates kunnen andere instellingen gebruiken dan de template voor losse berichten, dus controleer ze allemaal.

Zo vind je het formaat van de uitgelichte afbeelding in je thema

Probeer deze stappen op volgorde. De eerste die een antwoord geeft is genoeg.

1. Bekijk de documentatie van het thema. Goede thema’s vermelden het aanbevolen formaat voor de uitgelichte afbeelding. Staat het erin, gebruik dat dan.

2. Toon de geregistreerde formaten met WP-CLI. Heb je toegang tot de opdrachtregel, dan toont wp media image-size elk geregistreerd formaat met breedte, hoogte, bijsnij-instelling en verhouding:

   wp media image-size

3. Doorzoek de themabestanden. Zoek in een klassiek thema in functions.php (en de bestanden die het laadt) naar set_post_thumbnail_size en add_image_size, en kijk daarna in single.php of de templateonderdelen welke naam aan the_post_thumbnail() wordt meegegeven. Controleer in een blokthema het blok Uitgelichte afbeelding in de Site-editor, zoals hierboven beschreven.

4. Inspecteer een gepubliceerd bericht. Klik met rechts op de uitgelichte afbeelding, kies Inspecteren en lees de bestandsnaam in src. WordPress zet de afmetingen in de naam van verkleinde kopieën, dus my-photo-1200x675.jpg vertelt je dat het thema een kopie van 1200 x 675 heeft geladen. Kijk ook naar srcset, want de browser kan op smalle schermen een kleinere kopie kiezen. Staan er geen afmetingen in de naam, dan is het volledige bestand gebruikt.

Weet je het doel, haal dan een voorbeeldafbeelding door de tool voor afbeeldingsformaten om te zien hoe elke kopie eruitziet voordat je een hele reeks uploadt.

Het uploadformaat kiezen

Als je het formaat van het thema kent, bepalen vier keuzes of het resultaat goed uitpakt.

• Breedte. Upload minstens de breedte die het thema toont. Voor scherpe resultaten op telefoons en laptops met een hoge pixeldichtheid mik je op ongeveer twee keer die breedte. Voor een vak van 1200px breed betekent dat 2400px. WordPress maakt kleinere kopieën van je upload en nooit grotere, dus een te klein origineel is de meest voorkomende oorzaak van een onscherpe afbeelding na het uploaden.
• Beeldverhouding. Gebruik dezelfde verhouding als de uitsnede van het thema. Snijdt het bij naar 16:9, lever dan 16:9 aan en houd het onderwerp dicht bij het midden, zodat een harde uitsnede geen hoofden of tekst afsnijdt.
• Bestandsgrootte. Een foto van 2400px opgeslagen als JPEG met een redelijke kwaliteit is meestal een paar honderd kilobyte. Een camerabestand van 6000px uploaden levert alleen extra werk op: WordPress verkleint alles boven 2560px toch al, en de extra pixels bereiken je bezoekers nooit.
• Bestandstype. WordPress accepteert WebP-uploads sinds versie 5.8 en AVIF sinds 6.5, zolang de afbeeldingsbibliotheek van je server ze ondersteunt. Beide leveren meestal een kleiner bestand op dan JPEG bij vergelijkbare kwaliteit.

De afbeelding voor social media is een aparte taak

Als iemand je bericht deelt op Facebook, LinkedIn of andere netwerken, komt het voorbeeld uit de tag og:image, die SEO-plugins meestal vullen met de uitgelichte afbeelding. De deeldocumentatie van Facebook raadt afbeeldingen aan van minstens 1200 x 630 pixels, zo dicht mogelijk bij een verhouding van 1.91:1.

Je ziet ook 1200 x 628 als advies. Dat formaat zit bijna precies op 1.91:1, terwijl 1200 x 630 uitkomt op ongeveer 1.90:1. Het verschil is maar 2 pixels in de hoogte, dus beide werken.

Ligt het weergaveformaat van je thema ook dicht bij 1.91:1, dan werkt één upload van 1200 x 630 (of 2400 x 1260) voor allebei. Snijdt het thema bij naar 16:9 of vierkant, houd belangrijke inhoud dan weg van de linker- en rechterrand, of stel een aparte social-afbeelding in via je SEO-plugin.

Google Discover heeft eigen adviezen voor afbeeldingen. De Discover-richtlijnen van Google raden afbeeldingen aan van minstens 1200 px breed, met in totaal meer dan 300.000 pixels, in een verhouding van 16:9, zoals 1200 x 675. Grote afbeeldingen hebben ook de robots-instelling max-image-preview:large nodig, die WordPress sinds versie 5.7 standaard toevoegt, tenzij de site zo is ingesteld dat zoekmachines worden ontmoedigd om hem te indexeren.

Het formaat van de uitgelichte afbeelding wijzigen

Waar je de wijziging doet, hangt af van het formaat en van je thema.

Core-formaten (thumbnail, medium, large). Ga naar Instellingen > Media en wijzig breedte en hoogte. De documentatie van het scherm Media-instellingen beschrijft de velden, waaronder het vinkje voor bijsnijden bij miniaturen.

Themaformaten in een klassiek thema. Bewerk het hoofdthema niet, want een thema-update overschrijft je wijziging. Zet de nieuwe waarden in de functions.php van een childthema. Een formaat opnieuw registreren met dezelfde naam vervangt het, en de setup van het childthema moet na die van het hoofdthema draaien:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

De prioriteit 11 zorgt dat dit na een hoofdthema draait dat op de standaardprioriteit 10 is gekoppeld. Controleer de code van het hoofdthema en pas dit aan als het een latere prioriteit gebruikt.

Blokthema’s. Wijzig het afbeeldingsformaat en de beeldverhouding van het blok Uitgelichte afbeelding in de template in de Site-editor. Er is geen code nodig, en de wijziging geldt voor elk bericht dat die template gebruikt.

Eén afbeelding, zonder code. Wil je bij één afbeelding zelf kiezen wat een uitsnede behoudt, open die dan via Media > Bibliotheek en klik op Afbeelding bewerken. Snijd bij tot de verhouding van je thema (de bijsnijtool accepteert een beeldverhouding zoals 16:9) of schaal de afbeelding, en sla op. WordPress past de wijziging toe op alle formaten van die afbeelding en bewaart het originele bestand, zodat je het later kunt terugdraaien met Originele afbeelding herstellen.

Bestaande miniaturen opnieuw genereren

Een gewijzigd formaat geldt alleen voor nieuwe uploads. Afbeeldingen die al in je mediabibliotheek staan houden hun oude kopieën tot je ze opnieuw opbouwt. De opdracht wp media regenerate doet dat:

wp media regenerate --yes

Handige opties uit de WP-CLI-documentatie:

• --image_size=hero-wide bouwt alleen dat formaat opnieuw op. Herhaal de optie voor meerdere formaten.
• --only-missing maakt formaten aan die nog niet bestaan en laat bestaande bestanden met rust, wat sneller is na het toevoegen van een nieuw formaat.
• --skip-delete houdt de oude miniatuurbestanden. Gebruik dit als andere sites, nieuwsbrieven of feeds rechtstreeks naar die bestanden linken.

Zonder toegang tot de opdrachtregel doet de plugin Regenerate Thumbnails uit de WordPress.org-plugindirectory hetzelfde vanuit het dashboard. Maak bij een grote bibliotheek eerst een back-up, want regenereren herschrijft veel bestanden.

Veelgemaakte fouten

• Stoppen bij 1200 x 630. Het is een goed startpunt en past bij linkvoorbeelden, maar snijdt je thema bij naar 16:9 of vierkant, dan wordt een deel van de afbeelding afgesneden. Controleer het formaat van je thema voordat je een hele reeks uploadt.
• De gegenereerde formaten uitzetten om “het origineel te houden”. Heeft het thema geen kleinere kopieën, dan laadt het mogelijk op elk scherm het volledige bestand, wat de pagina op telefoons vertraagt. De verkleinde kopieën bestaan juist om dat te voorkomen.
• Code voor afbeeldingsformaten aanpassen en het opnieuw genereren overslaan. De code werkt, maar alleen voor nieuwe uploads. Daarom denken veel mensen dat een formaatwijziging “niets deed”.
• Het formaat wijzigen in het hoofdthema. De volgende thema-update haalt het weg. Gebruik een childthema of de Site-editor.

Ziet de afbeelding er nog steeds verkeerd uit nadat je formaat en verhouding hebt afgestemd en opnieuw hebt gegenereerd, vergelijk dan de bestandsnaam die de browser laadde met de formaten die WordPress volgens de tool voor afbeeldingsformaten zou moeten maken. Wijken ze af, dan levert vaak een optimalisatieplugin of een beeldverkleiner van een CDN tussen WordPress en de bezoeker een eigen versie.