Inline Images

What are inline images?

Inline images (also called embedded images) are images that appear directly within your email content, rather than as attachments. They're referenced using a special cid: (Content-ID) URL scheme in your HTML, making them ideal for:

• Email signatures: Company logos and branding
• Transactional emails: Product images, receipts, invoices
• Branded templates: Headers, footers, and design elements
• Rich content: Diagrams, charts, and visual elements

How inline images work

1. Attach an image with a unique Content-ID
2. Reference the image in your HTML using cid:your-content-id
3. Email clients display the image inline when rendering the email

The Content-ID acts as a unique identifier linking your HTML image references to the actual image data.

Sending inline images via API

Basic example

Multiple inline images

You can embed multiple images by using different Content-IDs for each:

Sending inline images via SMTP

When using SMTP, the email library handles Content-ID headers automatically for inline attachments.

Nodemailer (Node.js)

Code
const nodemailer = require('nodemailer');
const fs = require('fs');

const transporter = nodemailer.createTransporter({
  host: 'smtp.lettermint.co',
  port: 587,
  auth: {
    user: 'lettermint',
    pass: 'your-api-token'
  }
});

await transporter.sendMail({
  from: 'sender@yourdomain.com',
  to: 'recipient@example.com',
  subject: 'Email with inline image',
  html: '<h1>Hello!</h1><img src="cid:unique-image-id" alt="Embedded Image">',
  attachments: [
    {
      filename: 'image.png',
      path: './path/to/image.png',
      cid: 'unique-image-id' // Content-ID reference
    }
  ]
});

PHPMailer (PHP)

Code
<?php
use PHPMailer\PHPMailer\PHPMailer;

$mail = new PHPMailer(true);

$mail->isSMTP();
$mail->Host = 'smtp.lettermint.co';
$mail->SMTPAuth = true;
$mail->Username = 'lettermint';
$mail->Password = 'your-api-token';
$mail->Port = 587;

$mail->setFrom('sender@yourdomain.com');
$mail->addAddress('recipient@example.com');
$mail->Subject = 'Email with inline image';
$mail->isHTML(true);
$mail->Body = '<h1>Hello!</h1><img src="cid:unique-image-id" alt="Embedded Image">';

// Add inline image
$mail->addEmbeddedImage('/path/to/image.png', 'unique-image-id', 'image.png');

$mail->send();

Python (smtplib)

Code
import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText
from email.mime.image import MIMEImage

msg = MIMEMultipart('related')
msg['From'] = 'sender@yourdomain.com'
msg['To'] = 'recipient@example.com'
msg['Subject'] = 'Email with inline image'

# HTML content
html = '<h1>Hello!</h1><img src="cid:unique-image-id" alt="Embedded Image">'
msg.attach(MIMEText(html, 'html'))

# Inline image
with open('image.png', 'rb') as img:
    image = MIMEImage(img.read())
    image.add_header('Content-ID', '<unique-image-id>')
    msg.attach(image)

# Send email
with smtplib.SMTP('smtp.lettermint.co', 587) as server:
    server.starttls()
    server.login('lettermint', 'your-api-token')
    server.send_message(msg)

Content-ID format requirements

Content-IDs must follow these rules:

• Allowed characters: Letters (a-z, A-Z), numbers (0-9), dots (.), underscores (_), hyphens (-), and at-signs (@)
• Pattern: Must match ^[a-zA-Z0-9._@-]+$
• Maximum length: 255 characters
• Automatic suffix: If your Content-ID doesn't include @, Lettermint automatically appends @lm to ensure RFC compliance

Valid Content-ID examples

• ✅ logo
• ✅ company-logo
• ✅ header_image
• ✅ product.image.v2
• ✅ banner@example.com
• ✅ invoice-2024-01

Invalid Content-ID examples

• ❌ logo image (spaces not allowed)
• ❌ product#123 (# symbol not allowed)
• ❌ header!image (! symbol not allowed)
• ❌ logo/banner (/ symbol not allowed)

Troubleshooting

Code
<!-- Correct -->
<img src="cid:logo" alt="Logo">

<!-- Incorrect -->
<img src="logo" alt="Logo">
<img src="cid:<logo>" alt="Logo">

Best practices

1. Use descriptive Content-IDs: Choose meaningful names that describe the image's purpose
2. Optimize image sizes: Keep images small to reduce email size and improve deliverability
3. Provide alt text: Always include alt attributes for accessibility and when images are blocked
4. Test across email clients: Different email clients handle inline images differently—test thoroughly
5. Consider fallbacks: Some email clients block images by default—design emails that work without them

Related

• Limitations — Email size limits (25MB) and blocked file types
• Tags — Organize and categorize your emails
• Webhook events — Track delivery and engagement for emails with inline images