Adding Images to HTML Email Without CID Attachments
Learn the best practices for including images in your HTML emails using Piisend, focusing on hosted image URLs for better deliverability and compatibility. Avoid the complexities of CID inline images by leveraging external hosting.
Section 1
Why Hosted Images are Best for HTML Emails
When sending HTML emails, including images is crucial for engaging content. Historically, developers might have used CID (Content-ID) to embed images directly within the email payload. However, this method often leads to larger email sizes, potential deliverability issues, and inconsistent rendering across different email clients. Modern email clients and transactional email APIs like Piisend strongly recommend using externally hosted images via HTTPS URLs. This approach ensures your images load reliably, are cached efficiently, and contribute to a smoother user experience.
Section 2
Embedding Images Using HTTPS URLs with Piisend
The most straightforward way to include an image in your HTML email is to host it on a publicly accessible server and reference its URL in an <img> tag. Ensure your images are hosted securely over HTTPS to prevent mixed content warnings and improve trust. Piisend will simply send the HTML content, and the email client will fetch the image from your specified URL. This method is robust and widely supported.
1curl -X POST https://api.piisend.com/api/v1/emails \2 -H "Authorization: Bearer YOUR_API_KEY" \3 -H "Content-Type: application/json" \4 -d '{5 "to": ["recipient@example.com"],6 "subject": "Your Order Confirmation",7 "html": "<p>Thank you for your order!</p><img src=\"https://yourdomain.com/images/logo.png\" alt=\"Company Logo\" style=\"width:100px;\">",8 "text": "Thank you for your order!"9 }'Section 3
Dynamic Images in Email Templates
For emails that require dynamic image content, such as user avatars, product images, or personalized banners, Piisend's templating feature is incredibly powerful. You can define placeholders in your HTML templates for image URLs, then pass the actual URLs as template_vars when sending the email. This keeps your email logic clean and allows for highly personalized visual content without modifying the template itself.
1import requests2 3api_key = "YOUR_API_KEY"4api_url = "https://api.piisend.com/api/v1/emails"5 6headers = {7 "Authorization": f"Bearer {api_key}",8 "Content-Type": "application/json"9}10 11data = {12 "to": ["user@example.com"],13 "template_id": "tpl_your_image_template_id",14 "template_vars": {15 "user_name": "Alice",16 "product_image_url": "https://yourdomain.com/images/product-xyz.jpg",17 "product_name": "Awesome Widget"18 }19}20 21response = requests.post(api_url, headers=headers, json=data)22 23print(response.status_code)24print(response.json())Section 4
When to Use Regular Attachments (Non-Inline)
While Piisend does not support cid: inline images, it fully supports sending regular file attachments. If you need to send documents, PDFs, or other files alongside your email, you can use the attachments array in your API request. This is distinct from embedding images directly into the HTML body. Attachments are typically displayed as separate files that the recipient can download, rather than being rendered directly within the email content.
1const fetch = require('node-fetch');2 3const apiKey = 'YOUR_API_KEY';4const apiUrl = 'https://api.piisend.com/api/v1/emails';5 6async function sendEmailWithAttachment() {7 const response = await fetch(apiUrl, {8 method: 'POST',9 headers: {10 'Authorization': `Bearer ${apiKey}`,11 'Content-Type': 'application/json'12 },13 body: JSON.stringify({14 to: ['recipient@example.com'],15 subject: 'Your Invoice and Report',16 html: '<p>Please find your invoice and report attached.</p>',17 text: 'Please find your invoice and report attached.',18 attachments: [19 {20 filename: 'invoice.pdf',21 content: 'JVBERi0xLjQKJdPr6eEKMSAwIG9iagogICAgPDwvVHlwZSAvUGFnZS9Db250ZW50cyAyIDAgUi9NZWRpYUJveCBbMCAwIDU5NS4yOCAzODQuMTldL1BhcmVudCAzIDAgUi9SZXNvdXJjZXMgPDwvUHJvY2Vzcy9QREYvRm9udCA8PC9GMSAzIDAgUi9GMiA0IDAgUi9GMyA1IDAgUi9GNC...' // Base64 encoded content22 }23 ]24 })25 });26 27 const data = await response.json();28 console.log(data);29}30 31sendEmailWithAttachment();
