Image stretching unexpectedly...

First post: please be gentle! I have run into a most perplexing image size problem.

I have created a template with a feature/banner area that contains a feature image of 510px wide x 170px high.

When the template is formatted so that the image is not editable, everything works fine and the image displays in proportion. However, the client wants the ability to change this feature image so I've made it editable. Unfortunately, this is breaking things in Outlook 2007, causing the image to display as a distorted 510px square. Rather horrible!

Initially, I just followed the recommended practice of specifying only a width, but I've now tried throwing all sorts of styling at the image. Specifying height with a class in the header, height attributes in the img tag, as an inline style, even tried specifying the height of the enclosing table cell... nothing would stop this problem!

The problem appears to be that when the image is editable, CM strips out the height attribute, but surely I'm not the first to strike the problem - there must be a workaround.

I've just noticed that the tracking image CM inserts uses !important styles - is that the answer?

woowoowoo, 6 years ago

OK, I know it's a bit sad, but I'm going to reply to my own post. I seem to have confirmed the source of the problem and I figure I'll put my experiences down for the benefit of others and in the hope of finding a solution.

It is as I suspected. When I make the image 'editable' CM strips out the height attribute, leaving the email client to 'guess' the table layout. If the image takes too long to load, it guesses 'square' and screws the layout. I know this is related to the delay in loading the image because I thought I'd fixed the problem with !important styles, only to have the problem return when I went back to view the *same test email*. That's right! the same message displayed differently in Outlook 2007 on two different occasions because one time the image loaded fast enough and another time it didn't.

So, really, this is a shared bug between Outlook and Campaign Monitor. Outlook is too stupid to obey the CSS styles that define the image height, but it wouldn't be a problem if CM hadn't stripped out the height attribute in the first place.

My solution: CM dynamically inserts and adjusts lots of code. I know you strip out the height attribute to keep things flexible, but by the time an email is sent, you know the image height. Why don't you just dynamically insert it into the layout? That would fix everything.

Anyway, I'm off to tell my client the bad news.

davidaf davidaf, 6 years ago

Hi woowoowoo,

Well, I'm not sure you've found the source of the problem there, because we actually do dynamically grab the new height and define it in the image tag once you've replaced it with a different image. I just tested this on my end to make extra sure. I'd like to see exactly what's going on, if you contact us at support with the specific campaign and template information we can try to see what is actually going on with it.

The Campaign Monitor Blog – HTML email smarts to go with your good looks
woowoowoo, 6 years ago

thanks for the reply - I swear I'm not making this up! However, it's obviously not as simple as it seems. Let me explain.

I have already explained the form of the template above. The replaceable image had a height attribute of 170. When the default image was left in place, this height attribute was removed from the source of the message (resulting in the problem). At the time, I did not try replacing the image with a new one - I had only ever tested with the default... never even thought of replacing the image.

Anyway, after reading your reply I tried replacing the image in the client interface to see what would get inserted, lo and behold! there was a height attribute in the code! At this point I noticed a slight error in my code. I had been building at 170px high, when the image was actually 172px - dunno how I missed that, but I fixed that, and now the height attribute remains intact whether I replace the image or not. Success! I don't quite know why, but it now works as you describe!

Intrigued by this, I tried to 'roll back' my template to the wrong height I had before, but even with the same template as I had been having problems, I now correctly have a height attribute... *suspicious look*!

So, thanks for your help - you just prompted me to look again and I found what I needed.

woowoowoo, 6 years ago

Oh dear, I've just managed to reproduce the problem! It only happens when the default image is in place. I'll email further details!

Stig Stig, 6 years ago

Hi woowoowoo,

Thanks for all the details, and for the email you sent in. We've replied to your email, and logged this as a bug. As you say, this only affects editable images where the default image has not been replaced.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.

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