Možnosti vložení obrázků do emailů

Pavel Tipy & triky, PHP, HTML

Obrázky lze do těla emailů vkládat třemi způsoby. Každý má své výhody i nevýhody, některé fungují lépe než jiné. Největší problém ale stejně jsou emailoví klienti. Některé obrázky jsou zobrazeny ihned, jiné až na vyžádaní a některé vůbec.

Možnosti vložení obrázků do emailů

Emaily jsou vždy problém, každý klient je zobrazuje jinak. S obrázky to ale taky není žádná výhra. Ty se vždy vkládají do těla pomocí tagu <img>. Zdroj ale může být buď externí URL, inline pomocí kódování base64 nebo ContentID zkráceně CID.

Udělal jsem si test, jak si s každou metodou poradí nejčastější klienti, kteří používají čeští zákazníci. Testováno v GMailu (web, mobil a Inbox), Outlooku (web i desktop), Apple Mail (mobil, desktop a web) a také na emailu od Seznamu a Centrumu. Emaily jsem odesílal pomocí knihovny PHPMailer verze 5.2 a 6.0 a také pomocí služby Mailgun. Email vždy obsahoval 3 obrázky, pokaždé vložené jiným způsobem, viz šablona emailu níže.

<body>
    <h1>Testovací email s obrázky</h1>
    <h3>Obrázek na serveru</h3>
    <img src="http://mail.test.example.com/someImage.jpg" alt="Testovací obrázek">

    <h3>Obrázek jako base64</h3>
    <img src="data:image/png;base64,<?php echo base64_encode(file_get_contents("anotherImage.png")); ?>"
        alt="Jiný obrázek">

    <h3>Obrázek jako CID</h3>
    <img src="cid:ContentIDImage.png" alt="Testovací CID obrázek">
</body>

Zdrojem obrázku je URL na server

Nejčastější způsob vložení obrázku je pomocí URL adresy, odkud je obrázek stažen. Funguje to, jen někteří klienti stahují obrázky až na požádání. Pokud je status PASS u SPF i DKIM, GMail i Seznam obrázky stahuje automaticky. V opačném případě je nutné o stáhnutí požádat. Desktopový Outlook stažení požaduje vždy. Centrum.cz naopak všechny obrázky zobrazil při odeslání bez SPF a DKIM a při odeslání přes Mailgun (status SPF i DKIM je PASS), tak se stažení muselo vyžádat.

Vkládat obrázky pomocí URL je ideální v případě, kdy se všem zobrazují totožné obrázky, jako jsou loga, podpisy apod. Klienti si je navíc cachují, takže při další návštěvě jsou zobrazeny rychleji a nejsou stahovány znovu z webu.

Obrázek je vložen inline pomocí base64

Vložení obrázku je totožné jako v případě webu, jednoduše se obsah obrázku zakóduje pomocí base64 a vloží přímo do těla emailu. První nevýhodou je, že obrázek je přímo součástí každého jednotlivého emailu. Proto není tato technika příliš vhodná pro velké obrázky, protože celý email nabírá na velikosti.

Druhou, a tou větší nevýhodou je, že GMail ani desktopový Outlook tyto obrázky nezobrazí vůbec. Webový Outlook tento obrázek nezobrazil při odeslání pomocí PHPMaileru v5.2, v ostatních případech je již zobrazil. Všichni ostatní klienti obrázky zobrazili a Centrum.cz blokoval i tento obrázek při odeslání přes Mailgun, viz předchozí odstavec.

Obrázek vložen pomocí ContentID

Poslední možnost patří k nejstarším a často zavrhovaným. Z mého pohledu ale nabízí několik výhod. Obrázek je připojen jako příloha a následně pomocí ContentID (zkráceně CID) je vložen do těla emailu. Uživatel tedy může obrázek jednoduše stáhnout, a to i v případě, kdy nemá povolené zobrazení emailů v HTML formátu. Navíc jej správně zobrazili všichni testovaní klienti a je také zobrazován, i když jsou ostatní obrázky blokovány.

Nevýhodou, podobně jako v případě base64, je nutnost přiložit obrázek přímo do těla emailu. Osobně tuto techniku využívám v případě zasílání platebních QR kódu. Ten je vždy pro každého zákazníka individuální a ukládání na serveru je zbytečné. V ukázkách níže je ukázáno jak CID využívat s knihovnou PHPMailer a službou Mailgun.

// PHPMailer verze 6
$mailer = new \PHPMailer\PHPMailer\PHPMailer(true);
$mailer->addStringEmbeddedImage(
    file_get_contents("/path/to/image.png"),
    "customCidOfImage.png",
    "Název obrázku při stažení.png",
    'base64',
    'image/png'
);

// PHP Mailer s PHP API
$client = new \Mailgun\Mailgun(MAILGUN_KEY);
...
$mailgun_client->sendMessage($mg_domain, $mg_messageData, [
    'inline' => ["/path/to/imageWithCid.png"]
]);

V případě PHPMaileru lze si CID určit parametrem, Mailgun dosadí CID automaticky podle jména souboru. Proto výsledné HTML emailu bude vypadat takto

<!-- Pro PHPMailer -->
<img src="cid:customCidOfImage.png">

<!-- Pro Mailgun -->
<img src="imageWithCid.png">

Osobní zkušenosti s odesíláním obrázků v emailech můžete sdílet v komentářích

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Novinky z blogu

Zachycení událostí CSS animací v Javascriptu

CSS animace dokázaly na mnoha místech nahradit Javascript, který byl dříve jedinou schůdnou možností. Nejen pro svou jednoduchost jsou stále populárnější. Jenže co, když chci...

Další články