Skip to content

Embedding Images in Emails

Jump to bottom
Andrew Theken edited this page Aug 12, 2015 · 2 revisions

Generally speaking, there are two major ways to include images in the html body of an email. We'll cover both below. (These examples also demonstrate using sending via our Template API, but the techniques work the same way for normal emails):

Option 1 - Link directly to the image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <center><img src="http://example.com/logo.png"/></center><br/>
    Hello {{name}}!
  </body>
</html>

This option is convenient, and doesn't require you to send the image attachment with each request, but it does require that you upload your logo to a publicly accessible web server before sending emails that reference the logo.png file.

Option 2 - Attach the image:

Step 1: Create a template that references cid:logo.png in the html markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <center><img src="cid:logo.png"/></center><br/>
    Hello {{name}}!
  </body>
</html>
Step 2: Include the image as an attachment when using the template:
// Example request
var message = new TemplatedPostmarkMessage
{
    From = "sender@example.com",
    To = "recipient@example.com",
    TemplateId = <template-id>,
    TemplateModel = new Dictionary<string, object> {
        { "name", "John Smith" },
    },
    Attachments = new[]
    {
        new PostmarkMessageAttachment()
        {
             Content = Convert.ToBase64String(File.ReadAllBytes("./logo.png")),
             ContentId = "cid:logo.png",
             ContentType = "image/png",
             Name = "logo.png"
        }
    }
};

var client = new PostmarkClient(<token>);

var response = await client.SendMessageAsync(message);

if (response.Status != PostmarkStatus.Success)
{
    Console.WriteLine("Response was: " + response.Message);
}

This allows you to include the logo in the body of the content, and does not require an external webserver to host your logo, but it will increase the message payload size when sending your emails.

The Postmark.Net client can be installed from NuGet.

For additional information about the capabilities of the Postmark API, see http://developer.postmarkapp.com/.

General Information

Version 2.0 Documentation

Version 1.x Documentation

Clone this wiki locally