Sende HTML-mails med billeder

October 17, 2008 · Posted in Udvikling 

At sende HTML-mails er nemt. Man skal bare sætte Content-Type til text/html. Skal man inkludere billeder i ens mail linker man bare til den på en server (<img src="http://www ..." alt=""/>). Alternativt kan man vedhæfte billederne.

Om man gør det ene eller det andet har nogle fordele og ulemper.

Når man linker til billeder

1) Man kan se om brugeren har åbnet ens mail ved at indsætte noget uniks i adressen til billederne.

2) Ens e-mails fylder mindre.

3) Man kan ændre billederne efter man har sendt e-mailen.

Når man vedhæfter billeder

1) Brugeren bliver typisk spurgt om mail-klienten skal vise billederne.

2) Ens e-mails fylder mere.

3) Brugeren har ikke fysisk modtaget hele mailen og visningen afhænger af mange ting. Er brugeren online, er serveren oppe, ligger billederne der stadig osv.

Jeg vil typisk være fortaler for at vedhæfte billederne. Det er dog lidt mere kompliceret. Fremgangsmåden er i grove træk følgende:

Fælgende headere skal sættes:

1
2
Content-Type: multipart/mixed;
	boundary="-----boundary-123"

Hvor man selv vælger hvad boundary skal være. Det skal bare være unikt.

Efterfølgende skal indholdet af ens mail splittes op i stykker der adskilles af det man har valgt som boundary. Bemærk at der tilføjes to ekstra -- til starten af ens boundary, og at der tilføjes endnu to til slutningen af den sidste.

Føste stump er HTML-dokumentet. Bemærk værdien i src.

1
2
3
4
-------boundary-123
Content-Type: text/html
 
<img src="cid:img123.png">

Sidste del af e-mailen er en base64-encodet version af billedet. For at kæde billedet sammen med img-tag’et skal Content-ID matche. Dog uden < og >.

5
6
7
8
9
10
11
12
-------boundary-123
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-ID: <img123.png>
 
[DATA]
 
-------boundary-123--

Ovenstående er lidt simplificeret. Normalt ville jeg inkludere nogle flere ting. Charset m.m. Men det illustrerer godt den overordnede fremgangsmåde.

Comments

One Response to “Sende HTML-mails med billeder”

  1. Hasse R. Hansen on October 17th, 2008 9:20 pm

    Dette er bestemt en fin intro til hvordan man behandler dette topic, men for ikke at opfinde den dybe tallerken endnu engang.
    Så kan jeg varmt anbefale Swiftmailer som virker med både det hedengangne php4 men også med php5.

Leave a Reply





  • Om websmed.dk

    Jeg hedder Morten, og jeg har udviklet webapplikationer siden slutningen af 90'erne.

    Jeg vil her dele ud af min erfaring, og med jævne mellemrum poste nogle tips og tricks, samt løsningsforslag på generelle dagligdags problemstillinger.

    Jeg har en forkærlighed for PHP og MySQL, hvorfor I nok vil se flest indlæg der vedrører den gren af webudvikling.

    Jeg har en anden blog af mere personlig karakter på mbn.dk, hvor I kan finde kontaktmuligheder m.m.

    Mine indlæg vil tit være baseret på problemstillinger i mit daglige virke, eller i mit eget firma MRLYTICS, hvor jeg sælger kundeundersøgelser samt kundedatabaser.

    Denne side er hostet hos slicehost.

  • Skrevet på Twitter