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>
Jak odesílat ContentID obrázky pomocí Laravelu emailu je popsáno v samostantém článku.
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
K tomuto článku již není možné přidávat další komentáře
Komentáře
Ahoj, díky za článek. Právě řeším jak vložit obrázek do mailu a vůbec jsem netušil že ně tolik možností. Newslettery posíláme přes mailchimp a ten se zdá že CID nepodporuje.
Nemáš zač :) CID je trochu složitější na implementaci a možná proto jej Mailchimp nepodporuje. Mailchimp ale nepoužívám a nemám s ním ale žádné zkušenosti, tak neporadím.
Takže jediný způsob, jak docílit toho, aby vždy a všude byl obrázek zobrazován stejně je ho nezobrazovat?
Aktuálně řeším problém s podpisem. Zkouším pomocí css vyřešit problém tak, že obrázek překrývá textovou informaci. Chci docílit toho, že pokud logo nelze zobrazit, tak se místo něj zobrazí text. Bohužel, přes "alt" to nefunguje. Tak zkouším pomocí css, jenže tam mi například seznam z podpisu při přijetí vymaže position: relative . . . a obrázek tak nedostanu na své místo :(
Překrývání je podle mě úplně pasé. O tom jsem snad ani neslyšel, že by to někdo dělal. CSS je velmi omezené v emailových klientech.
Zkusil bych ještě místo alt i title. A pak se zaměřil na to, aby email byl podepsán DKIM a správně nastavené SPF.
Díky, je nějak možné zjistit v outloku název souboru/obrázku, který je vložen přímo do těla emailu? Když mi odesilatel takto pošle obrázky a je pro mne důležitý údaj, jak je pojmenoval? Zkusila jsem snad vše, ale nepřišla jsem na způsob, jak to zjistit.
Díky moc
Název tam vůbec být nemusí, často jsou generované náhodně. Takže si myslím, že původní název zjistit nejde.
Zdravím z Prostějova! mužete mi poradit jak se uloži obrázek v textu E-mailu?
Děkuji za radu.¨
Best Wishes.
Mr.Josef KRAMPOTA Senior/Prostějov/
Zdravím, nevím jestli rozumím otázce. V článku jsou popsány 3 způsoby jak to udělat. Pokud něco není jasné, potřebuji více informací, která část není jasná.
Článek se ale zabývá způsobem, jak to naprogramovat. Pokud chcete jen přidat obrázek do emailu v aplikací, přes kterou posíláte emaily, tak to je úplně jiné téma. Nevím jakou aplikaci používáte a ani jsem to nikdy nedělal. Obrázky posílám jako přílohy.