Een logo in je Outlook-handtekening zetten zonder dat het breekt

Het logo is het onderdeel van een handtekening dat het vaakst breekt, en bijna altijd om dezelfde redenen. Vooral in Outlook vergroten de verschillen tussen de versies voor Windows, Mac, web en mobiel elke slordigheid in het bestand of de code. Dit zijn de vier echte oorzaken, en wat je in plaats daarvan doet.

Oorzaak 1: een afbeelding geplakt uit een lokaal bestand

De meest voorkomende. Een medewerker opent zijn logo in Word of in Verkenner, kopieert het en plakt het in het handtekeningvenster. Outlook sluit het dan in als lokale bijlage, met een verwijzing van het type cid: of een pad file://.

Bij de afzender lijkt alles normaal. Bij de ontvanger ontbreekt de afbeelding — vervangen door een leeg kader of een rood kruis — omdat de bron waarnaar wordt verwezen alleen op de oorspronkelijke computer bestaat. Hetzelfde probleem krijg je met een logo op een interne netwerkschijf of een intranet achter een login.

De regel is eenvoudig: het logo moet op een openbare URL staan, via HTTPS, bereikbaar zonder in te loggen. Een CDN, een opslagbucket of de hosting die je handtekeningtool biedt.

Oorzaak 2: de grootte in CSS in plaats van in HTML-attributen

Outlook voor Windows gebruikt de weergave-engine van Microsoft Word, die een groot deel van de CSS negeert — waaronder heel vaak width en height in een style-attribuut. De afbeelding verschijnt dan op haar oorspronkelijke grootte: een bestand van 1200 px breed vult de hele breedte van het bericht.

De oplossing is de afmeting in de HTML-attributen van de tag te zetten, niet alleen in de CSS:

<img src="https://cdn.voorbeeld.nl/logo.png"
     width="180" height="48"
     alt="Bedrijfsnaam"
     style="display:block;border:0;width:180px;height:48px" />

Beide zijn nuttig: de attributen voor Outlook, de CSS voor moderne clients. display:block voorkomt de ongewenste ruimte onder de afbeelding in sommige clients, en border:0 verwijdert het blauwe randje als het logo klikbaar is.

Oorzaak 3: een bestand geëxporteerd op weergavegrootte

Op een scherm met hoge pixeldichtheid — vrijwel alle recente laptops en alle telefoons — ziet een afbeelding op haar oorspronkelijke grootte er wazig uit. Het logo moet op het dubbele van de weergavegrootte worden geëxporteerd en daarna met de attributen worden begrensd.

Voor een logo dat op 180 × 48 px wordt getoond, exporteer je een bestand van 360 × 96 px. Het blijft licht als je het formaat goed kiest: PNG-24 met transparantie voor een logo met egale vlakken, of SVG omgezet naar PNG als je tool geen vectoren ondersteunt. Bestandsgrootte en formaat komen uitgebreid aan bod in het artikel over het formaat van het logo in een handtekening.

Oorzaak 4: een handtekening die volledig uit een afbeelding bestaat

Sommige organisaties exporteren de hele handtekening — naam, functie, contactgegevens, logo — als één afbeelding. Dat is om drie redenen tegelijk een slecht idee.

Ten eerste blokkeert Outlook standaard het laden van externe afbeeldingen voor onbekende afzenders: de ontvanger ziet een lege rechthoek in plaats van je gegevens. Ten tweede is geen enkele tekst te selecteren of te kopiëren: een telefoonnummer overnemen is onmogelijk. Ten slotte hebben schermlezers niets om voor te lezen, afgezien van het alt-attribuut.

Naam, functie, telefoon en adres moeten HTML-tekst blijven. Alleen het logo, de social-media-iconen en de campagnebanner zijn afbeeldingen. De algemene beperkingen van HTML in e-mail, waar dit gedrag van afhangt, staan in HTML-e-mailhandtekening.

Goed om te weten: geef het logo altijd een alt-attribuut met de bedrijfsnaam. Dat verschijnt als de afbeelding wordt geblokkeerd en wordt voorgelezen door hulptechnologie.

De methode die op schaal werkt

Op één computer volstaat het om bovenstaande regels toe te passen. Bij tientallen mailboxen is het probleem niet meer technisch maar organisatorisch: elke medewerker die zijn logo zelf opnieuw plakt, introduceert de vier fouten weer.

Dat is precies wat een centraal sjabloon oplost. Het logo wordt één keer geüpload, op een stabiele URL gehost, correct gedimensioneerd in het sjabloon en vergrendeld: de medewerker kan het niet vervangen en niet herschalen. Verandert de huisstijl, dan vervang je het bestand en volgen alle handtekeningen. Dat is de rol van de handtekeningeditor van Signally, die HTML genereert die al voldoet aan de beperkingen van Outlook.

Test vóór elke uitrol de weergave in minstens Outlook voor Windows, Outlook op het web en Outlook mobiel: dat zijn de drie omgevingen waar de verschillen het eerst opduiken.