1200 x 628 versus 1200 x 627: Welke maat is juist?

Als je ooit een link preview-afbeelding hebt proberen te maken, ben je waarschijnlijk hierop gestuit: één handleiding zegt 1200 x 628, een ander zegt 1200 x 627, Facebook's eigen documentatie zegt 1200 x 630, en je ontwerpsjabloon is ingesteld op iets heel anders. Ze zien er allemaal identiek uit. Welke is dan eigenlijk correct?

Kort antwoord: ze zijn allemaal prima. Ze zijn allemaal benaderingen van dezelfde beeldverhouding, en het verschil tussen hen is drie pixels op een afbeelding van 630 pixels hoog, ongeveer een half procent. Maar het is de moeite waard om te begrijpen waar de getallen vandaan komen, want als je dat weet, bespaar je jezelf van het vijf keer opnieuw exporteren van dezelfde banner.

Ze proberen allemaal 1.91:1 te raken

Het Open Graph-protocol, de set metasleutel-waardekaarten die Facebook, LinkedIn, Slack, iMessage en de meeste andere platforms lezen om een link preview te bouwen, beveelt een afbeelding met een 1.91:1 beeldverhouding aan. Dat is alles. 1.91 is al een afgerond getal, dus wanneer verschillende bedrijven het uitvermenigvuldigen, landen ze op iets verschillende plaatsen:

• 1200 ÷ 1.91 = 628,27 → afgerond naar 1200 x 628
• 1200 x 630 = exact 1.905:1 → Facebook's gedocumenteerde aanbeveling
• 1200 x 627 = 1.914:1 → LinkedIn's lange gestandaardiseerde gepubliceerde maat
• 1200 x 625 = exact 1.92:1 → verschijnt in oudere sjablonen

Gebruiker van deze is "onjuist". Het zijn afrondingsartefacten van dezelfde specificatie. Crawlers verwerpen een afbeelding niet omdat deze drie pixels afwijkt; ze hebben alleen nodig dat het bestand minstens 200 x 200 is en idealiter 1200px breed, zodat het scherp weergegeven wordt op schermen met hoge pixeldichtheid.

Maakt het 3-pixelverschil ooit uit?

In de praktijk alleen in één situatie: strak ingesneden afbeeldingen. Platforms geven je afbeelding niet weer in zijn oorspronkelijke formaat, ze passen het in wat voor kaartindeling zij die maand gebruiken, en de randen worden bijgesneden. Als je koptekst tot aan de bovenkant van het frame loopt, zal een 1200 x 628-afbeelding die is bijgesneden tot een 1.78:1-kaart het afsnijden, net als 1200 x 630.

De oplossing is niet het kiezen van het "correcte" pixelaantal. Het is het laten van een veilige marge: houd logo's en tekst in het midden van ongeveer 90% van het canvas en niets belangrijks binnen 60px van welke rand dan ook. Dan maakt het echt niet uit welke van de drie maten je exporteert.

Hoe maak je één afbeelding die overal werkt

Mijn aanbeveling: bouw op 1200 x 630. Het is Facebook's gedocumenteerde maat, het ligt een haartje van 1.91:1, en het is een even getal, wat vreemde halve pixelweergave in sommige editors voorkomt. Hergebruik vervolgens datzelfde bestand voor LinkedIn, Slack, Discord en Open Graph-sleutel-waardekaarten in het algemeen.

Als je al een afbeelding in de verkeerde afmetingen hebt, hier is de snelle manier om het op te lossen zonder iets te installeren:

1. Open het bijsnijdgereedschap en snij je bronafbeelding eerst ruw tot ongeveer een 1.91:1-vorm. Dit is de stap die mensen overslaan, als je direct naar het aanpassen gaat, wordt een 4:3-foto samengedrukt en gezichten zien er subtiel verkeerd uit.
2. Neem het bijgesneden bestand in het formaat wijzigen en stel het in op 1200 x 630 (of 628, of 627, kies er een en ga verder).
3. Exporteer als JPG voor foto's, PNG alleen als je scherpe tekst of transparantie achter een logo nodig hebt. De afbeeldingsomzetter verwerkt die switch als je bron een PNG, WebP of HEIC is.

Alles gebeurt in je browser op cutbg, het bestand verlaat je computer nooit, er is geen uploadwachtrij en geen account. Dat is belangrijker dan mensen zich realiseren voor niet-uitgebrachte productfoto's of werk van clients dat je nog niet hebt aangekondigd.

Let ook op de bestandsgrootte

Platforms hebben upload- en haalbaarheidslimieten, Facebook stelt Open Graph-afbeeldingen in op maximaal 8MB, en sommige crawlers geven stilzwijgend op voor alles wat traag kan worden gedownload. Een 1200 x 630 JPG zou comfortabel tussen 100KB en 300KB moeten landen. Als je export een JPG van meerdere megabytes is, voer het eerst door de compressor. Kleinere bestanden betekenen ook dat het voorbeeld eigenlijk verschijnt in plaats van een lege kaart te tonen terwijl de crawler een time-out krijgt.

Als het voorbeeld nog steeds de oude afbeelding toont

Dit is bijna nooit een maatprobleem. Facebook, LinkedIn en Twitter slaan gescrapte previews agressief in cache op. Nadat u het bestand hebt vervangen, voert u de URL uit via het eigen debugger van het platform (Facebook's Sharing Debugger, LinkedIn's Post Inspector) om een herhaalde scrape af te dwingen. Het wijzigen van uw afbeelding van 1200 x 627 naar 1200 x 628 zal een cachegeheugen preview niet repareren, alleen het wissen van de cache zal dat doen.

Dus: stop met je zorgen maken over de laatste pixel. Kies 1200 x 630, houd je tekst weg van de randen, houd het bestand onder een paar honderd KB, en je bent gedekt op elk platform dat Open Graph-sleutel-waardekaarten leest.