Welke bannermaat werkt het beste voor LinkedIn, Facebook en GitHub?

Een goede banner ziet er niet alleen mooi uit op desktop maar ook op mobiel en bij social previews. Ik leg eerst uit welke afmetingen in de praktijk het meest betrouwbaar werken. Daarna behandel ik veilige marges, bestandstypen en enkele voorbeelden zodat je meteen iets kunt maken of testen.

Concrete aanbevolen afmetingen

Platforms veranderen hun voorkeuren soms, maar deze maten werken goed in 2024 en zijn breed geadopteerd door ontwerpers omdat ze balans bieden tussen scherpte en compatibiliteit.

• LinkedIn persoonlijk profiel: 1584 x 396 pixels. Dit is een brede, lage banner met een 4:1 verhouding. Ontwerp scherp op dit formaat en test of belangrijke tekst in het midden staat.
• Facebook pagina cover: 820 x 360 pixels. Facebook toont de banner anders op mobiel en desktop. 820 x 360 geeft voldoende ruimte en voorkomt dat elementen teveel worden bijgesneden.
• GitHub (repository social preview): 1280 x 640 pixels. Dit is een veelgebruikte afmeting voor de afbeelding die verschijnt wanneer een repo wordt gedeeld. Voor profiel of organisatiebanners kun je een iets bredere variant gebruiken, bijvoorbeeld 1600 x 400, om scherpe beelden te krijgen.

Waarom exacte afmetingen niet alles zijn

Het aantal pixels is belangrijk, maar er zijn drie andere aspecten die vaak meer impact hebben op hoe je banner eruitziet voor bezoekers.

1. Safe area: houd tekst en logo's binnen het midden

Bij elke banner moet je rekening houden met bijsnijden. Zorg dat logo's, call to actions en korte teksten binnen een centrale veilige rechthoek blijven. Een goede vuistregel is om 10 tot 15 procent marge rondom vrij te houden. Dat voorkomt dat een belangrijk element op mobiel of wanneer de afbeelding geschaald wordt, buiten beeld valt.

2. Retina en exportgrootte

Voor schermen met hoge pixeldichtheid kun je ontwerp twee keer zo groot maken en vervolgens schalen. Bijvoorbeeld, ontwerp een LinkedIn-banner op 3168 x 792 px en exporteer op 2x als je wilt dat het extra scherp blijft. Let op bestandsgrootte. Social platforms compressen beelden, dus houd de uiteindelijke bestanden bij voorkeur onder 500 KB of optimaliseer met lichte compressie voor een goed balans tussen kwaliteit en laadtijd.

3. Bestandstype en kleurprofiel

Gebruik PNG voor grafische banners met scherpe lijnen en transparantie. Voor foto-rijke banners is JPEG vaak kleiner zonder zichtbaar kwaliteitsverlies. Gebruik het sRGB kleurprofiel zodat kleuren zo veel mogelijk gelijk blijven op verschillende apparaten.

Praktische workflow: ontwerp, test, publiceer

Ik raad deze stappen aan zodat je banner niet alleen op één scherm goed werkt maar betrouwbaar is in meerdere contexten.

• Ontwerp op de aanbevolen afmeting en zet belangrijke elementen in de safe area.
• Maak een 2x versie als je wilt dat het op retina-schermen scherp is.
• Exporteer een PNG voor grafiek of een JPEG met lichte compressie voor foto.
• Upload en bekijk op desktop en mobiel. Kijk ook naar de social preview bij delen op andere kanalen.

Voorbeelden uit de praktijk

Bij projecten die ik oplever controleer ik altijd of het logo niet te dicht bij de randen staat en test ik de banner op meerdere apparaten. Een klant merkte bijvoorbeeld dat hun tekst op LinkedIn persoonlijk profiel werd afgekapt. Door de tekst 12 procent naar binnen te schuiven bleef alles leesbaar zonder het ontwerp te veranderen.

Wanneer afwijkende maten wél nuttig zijn

Soms wil je een super-specifieke look, bijvoorbeeld voor campagnepagina's of hero-afbeeldingen die precies moeten aansluiten op je website. Dan kun je afwijken, maar test altijd of die aangepaste maat ook netjes schaalt naar de standaardformaten van social platforms.

Samengevat

Gebruik 1584 x 396 voor LinkedIn persoonlijk, 820 x 360 voor Facebook pagina covers en 1280 x 640 voor GitHub social previews. Houd logo's en tekst in de safe area, exporteer in sRGB en test op meerdere apparaten. Wil je het jezelf gemakkelijk maken? Probeer mijn banner generator om direct een geschikte afbeelding te maken en te downloaden.