Prevent template editor from resizing images


I'm having a problem with the template editor.

As per Campaign Monitor's advice, I create my graphics at 200% so that they appear sharp when viewed on an iPhone 4 (40% of our users open our emails on an iPhone4).

The problem is that when I change an image using the template editor, it resizes the image back down to the size set in the HTML.

For example: I have set the template up so desktop clients will receive the 600px wide version (actual width 1200px) and this image is then resized for mobile devices using CSS media queries down to 320px wide and looks pin-sharp when viewed on the iPhone 4.

As you can see, the problem happens when the editor resizes the image from 1200px down to 600px and then the media query resizes it again to 320px - the image now looks poor on an iPhone 4.

Also, I notice that the resizing method used by the template editor produces images with very poor anti-aliasing?

I notice also that the editor adds a height attribute even when one has not been declared in the HTML - I understand that this is to prevent Outlook from destroying the email layout when the images are not displayed, however it prevents me from being able to JUST specify a width and allow the client to choose an image of any height and have it displayed proportionally. I would happily scarifice the no-images display issue in Outlook for the ability to allow clients to add an image of any height and have it scale proportionately AND look good when scaled for an iPhone 4.

Ideally, the template editor needs an image tag attribute or option in the editor that PREVENTS any resizing of  the images and to respect the size of the uploaded image and the image size attributes declared in the HTML. I understand why CM added the resizing functionality, I would just like the ability to control when it is used.

Anybody got any thoughts or fixes for this?

roshodgekiss roshodgekiss, 5 years ago

Hi matt, thank you so much for your feedback here. While the advice we gave in regards to resizing images works well when importing a design into the app, I can understand how it could be not so great when uploading images into the email editor. At present, we're looking at how we can better handle the resizing of images into the app, but in the meantime I'd recommend only uploading images that are the same width as the editable image region for optimal quality.

however it prevents me from being able to JUST specify a width and allow the client to choose an image of any height and have it displayed proportionally.

Sorry if I'm being a bit of a space-cadet, but do you mean, have any image scale proportionally when viewed on mobile devices? This is an issue that can be overcome with a little extra CSS in your email template, as I found out not so long ago. For example, lets say you're using a @media query to resize an image from 600px, to 320px. Add the following CSS and you should be good to go:

img[class=w600] { width: 320px; height: 53% !important; }

Thanks for your excellent suggestions - I've taken note of them internally. If we do change how we resize images in the editor, I'll be sure to let you know. All the best!

Get in touch with us on Twitter:
We're also on Facebook:

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