Mailosaur logo
Mailosaur logo

Images and web beacons

Learn how to work with images, including web beacons, within a HTML email.

Before you begin
A hashtag icon

The examples shown below are based on two key assumptions:

  1. That you have already create a basic automated test using our getting started guides.
  2. You have a chosen assertion library that you will use to test the values shown below.

How many images
A hashtag icon

The html.images property of a message contains an array of images. The length of this array corresponds to the number of images found within an email.

console.log(message.html.images.length) // 2

Each attachment contains both a src attribute, which contains the location of the image, as well as an alt attribute holding the alternative, text description of the image.

Remotely-hosted images
A hashtag icon

Emails will often contain many images that are hosted elsewhere, such as on your website or product. It is recommended to check that these images are accessible by your recipients.

All images should have an alternative text description, which can be checked using the alt attribute.

const image = message.html.images[0]
console.log(image.alt) // "Hot air balloon"

In addition, to check that the image itself is accessible, you can use the src attribute to perform an HTTP request to that address.

const https = require('https')

// ...

const image = message.html.images[0]
console.log(image.src) // ""

// Make an HTTP call to trigger the web beacon
https.get(image.src, r => console.log(r.statusCode)) // 200

Web beacons
A hashtag icon

A web beacon is a small image that can be used to track whether an email has been opened by a recipient.

Because a web beacon is simply another form of remotely-hosted image, you can use the same code shown above to trigger an open email event.

Embedded images
A hashtag icon

When an image is embedded within the content of an email, its src attribute will contain a “content ID” (e.g. cid:ii_1435fadb31d523f6).

Where a content ID is present, the image itself will be attached to the email, and so can be access in the same way as any other attachment. Note that the contentId attribute of the attachment will match the value found in the src attribute, excluding the cid: prefix.

const embeddedImage = message.html.images[0]
console.log(embeddedImage.src) // "cid:ii_1435fadb31d523f6"
console.log(embeddedImage.alt) // "Hot air balloon"