Home Resources Blog

In our latest update, it’s now possible to add 1.5x or 2x images to email templates via our email editor. This is completely automatic – all you have to do is upload a bigger image and let our editor do the rest. This means less coding, faster uploading and of course, sharper images on high-resolution displays.

For the longest time, optimizing images for maximum crispness on high-resolution displays involved a considerable amount of manual coding… And testing. As uploading images with a greater width than an editable region in an email template resulted in them being resized and downsampled, our recommendation was generally to use media queries to substitute images when the email is viewed on these displays exclusively. This had the downside of forcing designers to export and manually edit their template, say, whenever they wanted to use a new header image.

Those fiddly days are now over. If you upload an image that’s up to twice the width of an editable image region in a template, our email editor will recognize that this has been done for the benefit of high-resolution displays and will adjust its width and height accordingly:

High-resolution image, as viewed in Inspector

While subscribers reading their email on standard displays may not see much of a difference, hi-res displays will most certainly benefit from double-density images. In an upcoming blog post, we’re going to fully explain the benefits of this technique, plus how you can upload images that look great on both high and low-res displays, without the large file sizes. Stay tuned – image optimization is a real rabbit’s hole of a topic.

Now that high-resolution displays are the norm on newer MacBooks, iPads, iPhones and Android devices, serving your email campaigns with a side of super-crisp images is a really lovely gesture – and now, doesn’t take any extra effort to do. In comparison to your Retina-ready creations, you can be sure that the rest of your subscribers’ emails will look veritably fuzzy, for one.

  • Karl

    Lovely addition :) I was wondering why my 2x images uploaded to the editor were being downsampled. Thanks for doing all the hard work for us!

  • Jeremy

    Does your template builder do the same thing with the image header?

    I use template builder for all my clients; I’d like to see 2x image and 1x image headers.

  • Ros Hodgekiss

    Hi Jeremy, our template builder doesn’t automatically resize header images at present for high-resolution displays, but it’s a great idea – thanks! At present, you will have to edit the campaign in the email editor, as described above. I’ll add your vote internally though and keep you posted if this is something we change at a later date.

  • Mark Lanham

    I have herd that high resolution images in emails contributes to a high spam score, is this correct?

  • Ros Hodgekiss

    Hi there Mark, I haven’t heard anything personally to this effect, I’m sorry to say. This is the case with embedded images, but in many instances, a high spam score is due to a number of factors, not just one large, or embedded image.

    We’ll dig around further and will be sure to post here if we hear anything that backs up this observation. In the time being, feel free to post any links to blog posts or similar which mention any downsides to high-res images :)

  • Jacob Pritchard

    You wrote “This had the downside of forcing designers to export and manually edit their template, say, whenever they wanted to use a new header image.”

    But then in the comments you wrote “our template builder doesn’t automatically resize header images at present for high-resolution displays”

    These statements confuse me? I’m trying to get a high res image into my header and am not sure if it’s possible or not….

  • Ros Hodgekiss

    Hi there Jacob, it’s now possible to upload hi-res images and have them resized on import – sorry about the confusion there. Since this article was written, we have replaced the aforementioned template builder with a new and improved one called Canvas, which I highly recommend you check out. Thanks for writing in!

  • Jacob Pritchard

    Hi Ros,

    My hi res images in the body are being resized on import for me. However the header is NOT being resized. :(

    I looked at Canvas. Nice templates there, However, I’m very happy with the ones that I’m currently using. Am I missing something, or is there no way to get a retina header into a template that was built from scratch….

  • Ros Hodgekiss

    Hi Jacob, that’s certainly very strange – could you kindly contact our team with campaign details and a link to the original image, so we can take a look on our end? Sorry for the trouble, but we’d love to get to the bottom of this.

  • Adam Green

    Hi Ros,
    I’m trying out the new canvas templates which look lovely but after uploading a high res retina quality logo (https://www.campaignmonitor.com/assets/uploads/mylogo@2x.png) to the logo box in the header, it still looks blurry on a retina display. It’s scaled to fit in the box but isn’t as sharp as I would expect! The photos / images within the body of the email look great but not the logo. Any tips to get the logo crisp?

  • Balthazar Simoes

    Hey Adam! Hmm, that’s odd. There was a bug with retina images in Canvas templates early on, but that was fixed a while back. Let me send you an email to get some more details and see if we can figure out what’s going on.

  • Scott Rod

    I’ve found a serious problem when trying to upload retina pngs to Campaign Monitor when using image template tags. Transparent pngs which are not sized to the exact width show up without transparency. Is this due to Campaign Monitor’s downsampling process? The work around is to export pngs as 2x the resolution instead of 2x the size. However, that doesn’t always work. Otherwise, the alternative – retina gifs resize poorly, and are not antialiased.

  • Balthazar Simões

    Hi Scott! Yes, if you have a png with transparency or a gif with animation you’ll want to make sure that you upload it at the exact size or exactly 1.5x or 2x the size. Otherwise, when we resize they will lose transparency/animation.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free