Hoe groot moet een logo in een e-mailhandtekening zijn?

Tussen 140 en 200 px breed in weergave voor een liggend logo, 40 tot 60 px hoog voor een vierkant logo of monogram. Het bestand zelf exporteer je op het dubbele van die afmetingen.

Heb je een ander logo nodig voor de donkere modus?

Dat is wenselijk als je logo zwart is op een transparante achtergrond: het wordt onzichtbaar op een donkere achtergrond. De eenvoudigste en betrouwbaarste oplossing blijft een logo op een licht afgeronde witte achtergrond, in plaats van transparantie.

Bestandsgrootte, afmetingen en formaat van het logo in een e-mailhandtekening

De afmetingen, bestandsgrootte en het bestandsformaat voor een logo in je e-mailhandtekening: dubbel exporteren voor schermen met hoge resolutie, PNG of JPEG, en een realistisch gewichtsbudget.

Het logo is het enige verplichte grafische element van een bedrijfshandtekening, en het element waarvan de technische kenmerken het vaakst aan het toeval worden overgelaten. Drie parameters bepalen het resultaat: de afmetingen, de pixeldichtheid en het bestandsformaat.

De weergaveafmetingen

Het uitgangspunt is de totale breedte van de handtekening, die tussen 500 en 600 px moet blijven om op mobiel te werken. Het logo mag dus niet breder worden dan een derde daarvan zonder de rest te verdringen.

In de praktijk:

Type logo	Weergavebreedte	Weergavehoogte
Liggend logo (woord + beeldmerk)	140 – 200 px	32 – 56 px
Vierkant logo of monogram	48 – 64 px	48 – 64 px
Concernhandtekening (twee logo’s)	120 px per logo	32 – 40 px

Een groter logo versterkt het merk niet: het brengt het blok uit balans en duwt de contactgegevens buiten de eerste blik.

De pixeldichtheid: dubbel exporteren

Dit is het technische punt dat het vaakst wordt gemist. Vrijwel alle recente schermen — laptops, tablets, telefoons — tonen twee of meer fysieke pixels per logische pixel. Een afbeelding die op weergavegrootte is geëxporteerd, ziet er daar wazig uit.

De regel is dus: exporteer dubbel, toon op de helft.

Voor een logo dat op 180 × 48 px wordt getoond, maak je een bestand van 360 × 96 px en leg je de afmetingen vast in de HTML:

<img src="logo@2x.png" width="180" height="48" alt="Bedrijfsnaam"
     style="display:block;border:0;width:180px;height:48px" />

De HTML-attributen zijn onmisbaar: Outlook negeert vaak afmetingen die alleen in CSS staan, en zou de afbeelding dan op haar oorspronkelijke 360 px tonen. Het mechanisme staat in HTML-e-mailhandtekening, en de andere oorzaken van een kapot logo in een logo in je Outlook-handtekening zetten.

Het bestandsformaat

PNG-24 voor een logo met egale vlakken, met transparantie. De standaardkeuze: scherpe randen, nette transparantie en universele ondersteuning.

PNG-8 als je logo weinig kleuren heeft. Het bestand is duidelijk lichter, maar verlopen en anti-aliased randen gaan achteruit.

JPEG alleen voor een foto — een portret bijvoorbeeld. Nooit voor een logo met egale vlakken: de compressie geeft zichtbare artefacten rond scherpe randen.

Geen SVG. Vector zou in theorie ideaal zijn — scherp bij elke dichtheid, heel licht — maar de meeste e-mailclients tonen het niet, en sommige blokkeren het om veiligheidsredenen. Zet je vectorbron om naar PNG.

GIF alleen voor een geanimeerde banner, nooit voor een logo. Het palet van maximaal 256 kleuren maakt verlopen lelijk.

Het gewichtsbudget

Blijf onder de 30 kB voor het logo en onder de 100 kB voor alle afbeeldingen van de handtekening samen, banner inbegrepen.

Dat is geen kwestie van bandbreedte: niemand maakt zich vandaag zorgen over 200 kB. Het is een kwestie van beleving. De afbeeldingen van een handtekening laden na de tekst van het bericht; als ze op zich laten wachten, ziet de ontvanger eerst een ontwricht blok, met lege kaders die langzaam vollopen. Het lijkt een kapot bericht.

Eén ronde verliesvrije compressie halveert het gewicht van een PNG meestal, zonder zichtbaar verschil.

Goed om te weten: controleer het gewicht van het bestand dat echt wordt geserveerd, niet dat van je export. Het komt voor dat een logo van 8 kB bij een huisstijlupdate wordt vervangen door een versie van 1.200 px en 400 kB, zonder dat iemand het merkt.

De donkere modus

Steeds meer e-mailclients bieden een donker thema, dat de achtergrond van het bericht omkeert. Een zwart logo op een transparante achtergrond wordt daar onzichtbaar.

Drie aanpakken, in volgorde van betrouwbaarheid:

Het logo op een wit vlak. Het bestand heeft een licht afgeronde witte achtergrond. In theorie lelijk, in de praktijk robuust, en het werkt overal.

Een tweekleurig logo dat op beide achtergronden werkt. Als je huisstijl het toelaat — een logo met een accentkleur die zowel op licht als op donker genoeg contrast heeft — is dit de beste oplossing.

Omschakelen met een media query. prefers-color-scheme werkt maar in sommige clients, en niet in Outlook voor Windows. Behandel het als progressieve verbetering, nooit als hoofdoplossing.

Waar het echt om gaat: overal het juiste bestand

Al deze regels zijn één keer makkelijk toe te passen. Het probleem ontstaat als veertig mensen elk hun eigen versie van het logo plakken: de een pakt het bestand van de gedrukte brochure, de ander een screenshot van de website, een derde de oude huisstijl.

Een centraal sjabloon lost dat op: het logo wordt één keer geüpload, op een stabiele URL gehost, correct gedimensioneerd en vergrendeld. Verandert de huisstijl, dan vervang je het bestand en volgen alle handtekeningen. Dat is de rol van de editor van Signally.