Skip to content

Embedding Images in Emails

Jump to bottom
Andrew Theken edited this page Oct 25, 2018 · 4 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:
var fs = require('fs');
var postmark = require("postmark");

// Example request
var client = new postmark.ServerClient("<token>");

client.sendEmailWithTemplate({
  "From": "sender@example.com",
  "To": "recipient@example.com",
  "TemplateId": <template-id>,
  "TemplateModel": {
    "name": "John Smith"
  },
  "Attachments": [{
      "Content": fs.readFileSync("./logo.png").toString('base64'),
      "Name": "logo.png",
      "ContentType": "image/png",
      // This is important, and matches the 
      // 'src' attribute in the email markup.
      "ContentID" : "cid:logo.png"
   }]
});

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.

Postmark Javascript Library.

For additional information about the capabilities of the Postmark API, see Postmark Developers Documentation.

General information

Clone this wiki locally