Embed Images using CID

Today, we're announcing support for inline image attachments using CID (or Content-ID).

Inlining an image embeds the image itself in the email (instead of hosting it somewhere else) and shows it inside the email body instead of an attachment.

How to embed images

Embedding images requires two steps:

1. Add the CID in the email HTML

Use the prefix cid: to reference the ID in the src attribute of an image tag in the HTML body of the email.

<img src="cid:logo-image">

2. Reference the CID in the attachment

Include the content_id parameter in the attachment object (e.g. content_id: "logo-image").

"attachments": [
    {
      "path": "https://resend.com/static/sample/logo.png",
      "filename": "logo.png",
      "content_id": "logo-image"
    }
  ]

The ID is an arbitrary string set by you, and must be less than 128 characters.

How it works

As with all our features, inline images are available across all our SDKs. All attachment requirements, options, and limitations apply to inline images as well.

Both remote and local attachments are supported, but here is an example of inlining remote images.

await resend.emails.send({
  from: 'Acme <onboarding@resend.dev>',
  to: ['delivered@resend.dev'],
  subject: 'Thank you for contacting us',
  html: '<p>Here is our <img src="cid:logo-image"/> inline logo</p>',
  attachments: [
    {
      path: 'https://resend.com/static/sample/logo.png',
      filename: 'logo.png',
      contentId: 'logo-image',
    },
  ],
});

Other considerations

Before adding inline images, consider the following.

• As these images are sent as attachments, you need to encode your image as Base64 when sending the raw content via the API. There is no need to do this when passing the path of a remote image (the API handles this for you).
• Inline images increase the size of the email.
• Inline images may be rejected by some clients (especially webmail).
• As with all attachments, we recommend adding a content_type (e.g. image/png) or filename (e.g. logo.png) parameter to the attachment object, as this often helps email clients render the attachment correctly.

For more information on how to use inline images, check out our documentation.

Conclusion

Embedded images are a powerful tool for enhancing the visual appeal of your emails. By following best practices and understanding the potential issues, you can effectively use inline images to improve the user experience of your emails.

Let us know if you have any questions or feedback.