Thursday, September 27, 2018

Sending an email with many embedded images

I recently needed to send an email that needed to include many (~10) high-resolution images, and I wanted to have thumbnails of those images inline with the email text so that I could comment on them.

The images could not be embedded directly because they exceeded the email size limit of most email servers, and simply inserting links makes it difficult to understand the email.

So to draft an email with inline thumbnails linking to high-resolution images, I did the following:

 1. Create thumbnails of the images in the desired size for embedding in the email.
 2. Find a service with static link support to host all the images.
 3. Upload all the images (original and thumbnails) to the service.
 4. For each image in the email, insert an image tag sourcing the thumbnail surrounded by an anchor tag referencing the full sized image.


 Detailed Steps

Below you will find detailed steps of how I carried out the steps listed above.

1. Create Thumbnails

I used a handy node.js package that provide a command line interface. It's called node-thumbnail and works great.

Pre-Requisites: node.js
Steps:
  1. Install node-thumbnail: npm install --global node-thumbnail
  2. Ensure only images are in the directory containing your images; node-thumbnail can't handle other file types.
  3. Open the image directory in a command prompt
  4. Generate thumbnails for the current directory and put them in the current directory with _thumb append to the names, using 250 pixels for the width: thumb .\ .\ -w 250

 

 2. Setup Static Linking Host

For this I used Azure Blob Storage with the Static Website feature enabled. Here are the step to do that:
  1. Sign up or log in to https://portal.azure.com
  2. Click "Storage Accounts" on the left menu
  3. Click Add or select an existing account
  4. Use default settings for everything and pick a name that will be part of the domain where your files are accessible to the internet.
  5. After creating and opening the storage account, click on the "static website (preview)" setting.
  6. Enable it
  7. Open the $web Storage Container linked to on the same page
  8. This is where you'll upload your images
I wouldn't worry too much about cost here since blob storage costs on the order of cents per mb of data transfer. So likely it'll be covered by the free credits Azure offers to new signups.

 

3. Upload Images

I just used the Azure website for uploading the files but there are probably other ways.
  1. Open the $web Storage Container inside the Storage Account you set up earlier
  2. Click Upload
  3. blah blah blah

 

4. Embedding Images in an Email

This part should be pretty easy but varies wildly between email clients. Here's how to do it in Thunderbird:
  1. Start a new email
  2. Click into the body of the email
  3. Click the image icon in the upper right directly above the body
  4. Choose "image" from the drop-down menu
  5. Go into the Azure $web storage container
  6. Select the thumbnail image you'd like to insert into the email
  7. Click the copy url button
  8. Paste that into the Image Location box in Thunderbird
  9. Enter "alternate text" describing the image
  10. Open the Link tab
  11. Repeat steps 6-8 but select the full sized image instead
  12. Repeat steps 3-11 for each image you want to insert
This process can be quite a bit faster if you're not afraid of HTML:
  1. Start a new email
  2. Click into the body of the email
  3. Click Insert>HTML in the menus at the top of the window
  4. Insert a series of statements like the following but replacing the links with what you get from Azure:   
<a href="https://blobname.blob.core.windows.net/$web/imagename.jpg">
  <img src="https://blobname.blob.core.windows.net/$web/imagename_thumb.jpg" />
</a>