Passing inline logos in email templates without triggering Gmail attachment warnings in SvelteKit

API & SMTP Integration
1

When sending transactional HTML emails from SvelteKit endpoints, inline image URLs (<img src="https://...">) sometimes fail to load or trigger Gmail clipped/attachment warnings. What is the clean way to embed logos and assets?

2

Why Image Embedding Fails in HTML Email

Gmail and Outlook treat remote images differently:

  • External URLs (https://...): Subject to image proxy caching and user image-blocking defaults.
  • Base64 Data URIs (data:image/png;base64,...): Blocked outright by Gmail and Outlook Desktop for security reasons.
  • CID (Content-ID) Inline Attachments: The industry-standard approach where images are attached with a unique Content-ID header and referenced as <img src="cid:logo_id">.

CID Embedding with AutoSend API:

Pass inline attachments in the attachments array with disposition: "inline" and a content_id:

const res = await fetch('https://api.autosend.com/v1/mails/send', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.AUTOSEND_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    from: { email: 'auth@yourdomain.com', name: 'App Name' },
    to: { email: recipientEmail },
    subject: 'Verify your account',
    html: '<div><img src="cid:company_logo" alt="Logo" width="120"/><p>Welcome!</p></div>',
    attachments: [
      {
        filename: 'logo.png',
        content: base64EncodedImageString,
        type: 'image/png',
        disposition: 'inline',
        content_id: 'company_logo'
      }
    ]
  })
});

Key Rules for Email Logo Deliverability:

  • Use PNG or JPEG format (SVG is not supported by Gmail or Outlook).
  • Set explicit width and height HTML attributes to prevent layout shifts.
  • Host fallback copies on a high-availability CDN with proper CORS headers.

Relevant Documentation