E-mailhandtekening uitbreiden met een afbeelding die meteen zichtbaar is

Je kent die e-mailberichten wel die aan het einde een logo hebben. Mijn e-mailhandtekening heb ik ook uitgebreid met het logo dat je linksboven op mijn website ziet staan. Dit logo wordt als een afbeelding extern ingeladen vanaf een server.

Nadeel alleen is dat deze afbeeldingen in e-mails (dit geldt ook voor nieuwsbrieven) standaard worden geblokkeerd door een e-mailprogramma. Je moet bovenin eerst klikken op “afbeelding inladen toegestaan” of iets vergelijkbaars.

Waarom worden externe afbeeldingen geblokkeerd:

Om het inladen van een e-mail sneller te maken
Omdat externe afbeeldingen onveilig kunnen zijn
Omdat externe afbeeldingen worden gebruikt om te zien of je de mail opent

Je kan dit voorkomen door je toe te laten voegen aan het adresboek van de ontvanger. Maar niet iedere ontvanger heeft daar behoefte aan.

Een afbeelding in een e-mail meesturen:

Als alternatieve oplossing kan je een afbeelding ook direct meesturen in de e-mail. Dan is het geen externe afbeelding meer en wordt deze ook niet meer geblokkeerd. Ik heb het dan over een bijlage die niet als bijlage wordt getoond.

Voor een computer is een afbeelding eigenlijk een lange rij alfanumerieke tekens. Wij mensen snappen dat niet, maar de computer begrijpt precies wat voor afbeelding hij moet tonen. Open maar eens een afbeelding met Kladblok, je snapt dan meteen wat ik bedoel.

Oplossing: een afbeelding omzetten naar HTML opmaak:

Helaas is het niet zo simpel dat je de inhoud van een bestand met knippen en plakken aan een e-mail toe kan voegen. Om ervoor te zorgen dat de afbeelding zichtbaar is en juist wordt verstuurd moet je deze base64 encoden.

Dit komt erop neer dat we hem omzetten naar een andere onleesbare brij tekst. Op de Base64 Wikipedia pagina lees je meer over dit onderwerp. Om dit blog compact te houden laat ik de details verder achterwege.

Op internet vind je een aantal websites waar je afbeeldingen kan uploaden en om kan zetten. De vraag is alleen of je die websites kan vertrouwen. Misschien voegen ze nog wel extra code toe aan het resultaat.

Je kan ook onderstaand PHP script gebruiken:

// Save this file to logo.php and upload it to a webserver.
echo '<h1>JPG omzetten naar base64 string voor in e-mail handtekening.</h1>';
echo '<br /><br />';

// Step 1: get the URL of the image.
if (!isset($_GET['url'])) {
    echo 'Sorry, geen geldige URL parameter opgegeven, voorbeeld www.domein.nl/logo.php?url=volledige URL naar afbeelding';
    exit;
}

// Step 2: get the contents of the supplied file.
$url = filter_var($_GET['url'], FILTER_SANITIZE_URL);
$base64image = base64_encode(file_get_contents($url));

// Step 3: generate the HTML code.
if ($base64image !== false){
    $html = '<img src="data:image/jpg;base64,' . $base64image . '" width="300">';
} else {
    echo 'Sorry, er is iets verkeerd gegaan tijdens het omzetten van de afbeelding.';
    exit;
}

// Step 4: output the result
echo '<strong>Resultaat:</strong><br /><br />';
echo '<textarea id="image" rows="5" cols="100">' . $html . '</textarea>';

Beperk de omvang van jouw afbeelding:

Gebruik voor deze oplossing een afbeelding die maximaal 500 pixels breed en hoog is. Hiermee voorkom je dat de onleesbare tekst meerdere MB’s groot wordt. Dit stuur je wel als onzichtbare bijlage mee met iedere e-mail. Mijn logo is 30 kb groot.

De HTML opmaak toevoegen aan de e-mail:

De onleesbare tekst die overblijft voeg je toe aan onderstaande HTML code. Deze voeg je weer toe aan jouw e-mailhandtekening.

<img src="data:image/jpg;base64,JOUW ONLEESBARE TEKST" width="300" />

Gebruik je een PNG afbeelding dan moet je image/jpeg vervangen door image/png. De hoogte van de afbeelding wordt bepaald op basis van het getal bij width=”300″.

Testen:

Heb je de HTML code toegevoegd aan jouw e-mailhandtekening? Test het dan door mails naar een aantal mensen te sturen en vraag of ze meteen jouw logo zien.

Timdehoog.nl

E-mailhandtekening uitbreiden met een afbeelding die meteen zichtbaar is