Building HTML emails using your own design tools on your own machine is a popular part of using Campaign Monitor. Being stuck with ugly, hard to customize templates was one of the big motivators for building Campaign Monitor in the first place. Once your email is design and coded, you just zip your images up and import them into your account with a single click.
While the upload is a simple process, there are a number of fancy things happening behind the scenes. Things like automatically grabbing any externally referenced CSS files, moving that CSS inline, uploading your images to our own servers and changing any image references.
We recently made a few further improvements to the import process that I’d like to share with you today.
Checking all your images exist
Previously, if an image referenced in your HTML wasn’t included in the zip, you’d end up with a broken image in your email. Now we double check all image references and ensure you never have any broken images in your email content.
If you do have an image missing, we let you know the exact file that’s not there and let you re-import your campaign with the image present. Here’s a screenshot of the alert you’ll see when images are missing.
Forget about folder structure
Previously, the folder structure in your zip file had to be an exact match with the way those images were references in your HTML file. So, if your images were all referenced in a folder called
/img/, you’d need to make sure you zipped that actual folder, instead of just zipping the images within that folder.
This was a bit of gotcha for some of you, so we’ve re-written our approach to search the entire zip for corresponding images. If it’s referenced in the HTML file and it exists somewhere in the zip, we’ll match it up for you.
Reducing your HTML footprint
When some of you build your emails, you like to go crazy with complex folder structures. The images in your email might be sitting in the folder
https://www.campaignmonitor.com/assets/uploads/header.gif (this is nothing, we’ve seen image references and folder names hundreds of characters long). When you have lots of images in your HTML email, the image references along can add significant file size to the email itself. It can also result in very long lines of text, which some email clients can choke on.
We now automatically move all your images into an “images” folder, so instead of the image reference above, you’d just have
https://www.campaignmonitor.com/assets/uploads/header.gif. If you have duplicate file names across multiple folders, we’ll automatically rename them for you and adjust the reference in your HTML accordingly.
Removing spaces automatically
Most browsers are forgiving enough with spaces in image file names. Unfortunately some email clients are not. We now remove all spaces in you image file names automatically, and update your HTML to ensure you get the best results possible in all email clients.