Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

1 of 2
1
   
Outlook image sizes

danemailonacid

Newbie
Total Posts:  3
Posted: 25 May 2012 10:02 AM

Hi,

This is driving me insane now!  I have an HTML email which contains several images.  The images are sized correctly (to the size they need to appear in the email) and are saved for web in Photoshop.  In the HTML I’m hard-coding both CSS width and height and HTML width and height attributes on all images.  In every email client I’ve tried this is fine, except Outlook (only tried 2007 so far).  In Outlook, despite the hard-coded dimensions, the images appear much larger than they should do.

An example is my banner image.  When I view source in Outlook, the HTML looks like this:

<img 

src
="http://gallery.mailchimp.com/9ca8b69cf873c70ccd69a7faf/images/banner.gif" alt="" border="0" style="border: px none;border-color: ;border-style: 

none;border-width: px;height: 182px;width: 622px;margin: 0;padding: 0;font-size: 14px;font-weight: bold;line-height: 100%;outline: none;text-decoration: 

none;text-transform: capitalize;" 
width="622" height="182"

(I’ve changed the source there so the image won’t render - it’s a live client image which I don’t want to post in a forum.)

Actually, the size that image renders in Outlook is 829x243px.

I wondered if there’s anything I can do to get the images to render at the correct sizes in Outlook?

Any advice would be much appreciated!


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 25 May 2012 03:47 PM
[ # 1 ]

Dan,

Yeah Outlook 2007 and 2010 do not allow you to adjust the size of the images via HTML or CSS.  Instead, the actual images must be the exact same dimensions as are you declaring in HTML.  It sounds to me like your actual image is 829X243 and you should rescale that to 622X182 if you want it to render correctly in Outlook.

Also, when you right click in Outlook and select “View source?”  You are not getting the actual client interpreation, it’s showing you the source before it was converted by the Word rendering engine.

Without your actual image, nor your original source, I cannot confirm any of these assumptions.

Miki


 

danemailonacid

Newbie
Total Posts:  3
Posted: 25 May 2012 03:51 PM
[ # 2 ]

Thanks Michelle.  The images are the correct pixel sizes, for certain.  Regarding the source, what I pasted above was from a view source in Outlook.  How do I get the post-render source?


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 25 May 2012 04:06 PM
[ # 3 ]

If you run a test using our service, open your result in Outlook 2007 or 2010 and click on the tab that says “Client Interpretation.”  That might shed some light on the subject.

I can honestly say, in 5 years of testing I have never encountered this issue.  Any chance you could re-create the issue with an image you can share with us?


 

danemailonacid

Newbie
Total Posts:  3
Posted: 25 May 2012 04:45 PM
[ # 4 ]

Hmm, very strange.  I’ve just subscribed and tested with EmailOnAcid and the render is okay in Outlook 2007.  It’s odd because it really is not right on my own, native version.  There are a lot of HTML errors but most of those seem to be created by MailChimp rather than the code I’ve input e.g. my original MailChimp template has valid closing slashes on images but when the code is output - at least when I view source in Outlook - the closing slashes are stripped, so it fails badly on validation.

I’m still not convinced until I actually see it working on my machine, but it’s going to have to go to the client like it is, as it’s taken far too much time already.

Thanks for your help anyhow Michelle.


 

mrmca

Newbie
Total Posts:  1
Posted: 02 January 2013 08:44 AM
[ # 5 ]

Hi

I am having somewhat the same problem.
I am creating the email template using html
but, my image size is not getting rendered properly.

i have done something like
myimagesource

this height and width is what i need for my image to display in outlook email, but its not coming out to be correct. The image is coming out to be of original size only.
How to fix this issue ?
When i open the email on browser, its coming perfectly what i need.
Please help.


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 02 January 2013 06:22 PM
[ # 6 ]

Mrmca,

You are correct, Outlook 07+ only displays your images in the dimensions of the original image. If you want to use spacer images, you will have to create an instance for each dimension.


 

jsakas

Newbie
Total Posts:  1
Posted: 10 September 2013 06:18 PM
[ # 7 ]

We are having the same issue over here. Our client is seeing the images blown up at 133% of their actual width and height even though the code is correct.

My guess is that it has something to do with the DPI, as the ratio between 72 and 96 is the same as we are seeing in the image size differences. I’m just not sure how to fix it. I have tried saving out images as a different DPI from Photoshop with no luck.


 

X1Discovery

Newbie
Total Posts:  2
Posted: 14 November 2013 05:29 PM
[ # 8 ]

I can replicate this myself.  It appears to be related to the user’s DPI setting (right click on the Windows 7 desktop, select Personalize, select Display, and then change from Smaller - 100% default, to Medium - 125% or Larger - 150%)

Windows (Outlook 2010 and Word 2010 are what I tested) will automatically scale up the images and text and therefore break any tightly constructed tables by enlarging the image beyond the size of it’s cell and will wrap text that doesn’t wrap in 100% setting.

Note that this is only when you are using Outlook/Word to COMPOSE your email.  My tests show that the received email typically looks OK when it is sent by something other than Outlook.

The somewhat solution that I came up with was to use percentages for widths for my tables and td’s everywhere except for the overall table.  I still would need to manually adjust that width depending on what the DPI setting on the user’s computer is.  No idea yet how to tackle that.  But if I manually increase the overall table width, things look correct on the higher DPI setting.


 

design.retention

Newbie
Total Posts:  3
Posted: 26 May 2015 04:02 PM
[ # 9 ]

Hi,

I’m working on a campaign for all email clients. The main banner is 2X width because it has to display nicely for retina. Therefore I apply the following code to the image:

http://static.gamesys.co.uk/virgingames/responsive/promotions/Welcome-Ply-Content-Reminder.jpg

The actual width is 1,416px so it is not required to produce different sizes. However, Outlook.com is presenting issues displaying the image, it looks huge and it breaks the email.

I have been trying different ways to fix it. Even conditional comments but it does not work:

I add on the <style type=“text/css”>
body.outlook td.outlookemail {  width: 732px !important;}
body.outlook img.outlookemail {width:732px; max-width:732px;}

Then on the image…
<!—[if mso]>
<center>
<table width=“732”><tr><td width=“732” class=“outlookemail”>
<![endif]—>

http://static.gamesys.co.uk/virgingames/responsive/promotions/Welcome-Ply-Content-Reminder.jpg

<!—[if mso]>
</td></tr></table>
</center>
<![endif]—>

But nothing. Could someone help me?


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 26 May 2015 04:10 PM
[ # 10 ]

design.retention,
Hard to say for sure from your code, but you should start by removing

<!—[if mso]

Those conditionals don’t work with Outlook.com. They only work with Outlook for desktop.

If you’d like to post more of your code, I can try to help more. Please put the code sample in between [code] and [/code] tags.


 

design.retention

Newbie
Total Posts:  3
Posted: 26 May 2015 04:28 PM
[ # 11 ]

Thanks Geoff!

<head><style type="text/css">.ExternalClass {width:100%;.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height100%;} body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} body {margin:0padding:0;} table {border-collapse:collapse;}table td {border-collapse:collapse;}p {margin:0padding:0margin-bottom:0;} h1h2h3h4h5h6 { colorblackline-height100%; } aa:link { color:#2A5DB0; text-decoration: underline; } body, #body_style {background:#FFF;min-height:1000px;} span.yshortcuts { color:#000; background-color:none; border:none;} span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color:#000; background-color:none; border:none;} a:visited { color: #3c96e2; text-decoration: none} a:focus { color: #3c96e2; text-decoration: underline} a:hover { color: #3c96e2; text-decoration: underline} td .login{display:none;}.appleLinksPurple a {color: #502777 !important; text-decoration: none;} .appleLinksGrey a {color: #666 !important; text-decoration: none;}table.memberlogin { height:91px;}div.account {display:table; height:91px !important; width: 100%;}div.accountmember{display: table-cell; text-align: center; vertical-align: middle;}body.outlook td.outlookemail { width: 732px !important;}body.outlook img.outlookemail {width:732px;max-width:732px;}@media only screen and (max-device-width: 480px) { body[yahoo] #container1 {display:block !important}  body[yahoo] p {font-size: 10px}  }@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body[yahoo] #container1 {display:block !important}  body[yahoo] p {font-size: 10px} }@media (max-width: 500px) {table[class=contenttable] { width:100% !important; }table[id="main"]{width:100%!important;}* { -webkit-text-size-adjust:none; }table[id=wrapper] { width:100%!important; padding:10px 10px !important;}table[id=wrapper] #main, table[id=wrapper] .inner { width:100% !important; }td[class="hide"] {display:none;}img[class="corner"] {width: 278px !important;height: auto !important;display: block;}table[class="footer"] {float: none;display: block;margin-left: auto;margin-right: auto;}table[class="icons"] {float: none;display: block;margin-left: auto;margin-right: auto;width:278px;}td[class="login"]{display:block;}table[class="member"]{ float:none !important; width:100% !important; height:auto !important; overflow:visible !important; visibility:visible !important;} img[class="logo"] {margin:auto; display:block;}table[class="memberlogin"] {width:100% !important; margin-top:0; height:auto;}table[class="headerlogo"] {width:100% !important;}div[class="account"]{height:auto !important;}} </style></head><body style="background:#FFF; min-height:1000px;" alink="#FF0000" link="#FF0000" bgcolor="#FFF" yahoo="fix"> <div id="body_style"> <table id="wrapper" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin: 0pt; padding: 0pt;"> <tr> <td> <table width="732" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" id="main"> <tr> <td bgcolor="#cb0000">  <table align="left" border="0" cellpadding="0" cellspacing="0" width="300" class="headerlogo"> <tr> <td><a href="https://{partner-name}/"><img src="http://static.gamesys.co.uk/virgingames//unicorn/responsive/outlook/virgin-games-logo.gif" width="138" height="91" alt="Virgin Games" style="border:0; padding-left:30px;" class="logo" /></a> </td> </tr> </table> <table align="right" border="0" cellpadding="0" cellspacing="0" width="300" class="headerlogo" > <tr> <td class="hide" height="30px"></td> </tr> <tr> <td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#ffffff; text-align:center; padding-bottom:10px; padding-top:10px;">Account Details: {member-user-name}</td> </tr> </table> </td> </tr> <tr> <td> <!--[if mso]> <center> <table width="732"><tr><td width="732" class="outlookemail"><![endif]--><a href="https://{partner-site}/"><img width="732" style="-ms-interpolation-mode: bicubic; width:100%; max-width:732px; border:0; margin:0; padding:0; display:block; height:auto;" class="outlookemail" src="http://static.gamesys.co.uk/virgingames/responsive/promotions/Welcome-Ply-Content-Reminder.jpg" alt="Worth the wait" /></a><!--[if mso]> </td></tr></table> </center><![endif]--> </td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="20"> <tr> <td width="20" class="hide">&nbsp;</td> <td style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#666; line-height:30px; text-align:center;"><span style="color:#cb0000;">Hey {member-user-name},</span><br /><br />                    Forgetting s</td> <td width="20" class="hide">&nbsp;</td> </tr> </table></td> </tr> <tr> <td><center> <a href="https://{partner-site}/"><img src="http://static.gamesys.co.uk/virgingames//unicorn/responsive/outlook/play-now.gif" width="184" height="70" alt="Virgin Games - Play Now!" style="border:0; margin:0 auto; padding:0; display:block;" /></a> </center></td> </tr> <tr> <td><center> <a href="http://{partner-site}/responsiblegaming"><img src="http://static.gamesys.co.uk/virgingames//unicorn/responsive/outlook/play-responsibly.gif" width="173" height="38" alt="Virgin Games - Play Responsibly" style="border:0; margin:0 auto; padding-bottom:10px; padding-top:10px; display:block;" /></a> </center></td> </tr> </table></td> </tr> </table> </div> </body></html> 

 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 29 May 2015 02:28 PM
[ # 12 ]

design.retention,
I believe we took care of this through email. Please let me know if you need further assistance.


 

design.retention

Newbie
Total Posts:  3
Posted: 29 May 2015 02:53 PM
[ # 13 ]

Yes you did it!
Thank you very much Geoff!


 

icodesign

Newbie
Total Posts:  1
Posted: 18 June 2015 04:18 PM
[ # 14 ]

Hello Geoff - could you let us know how you dealt with 2x retina image resizing for Outlook 2007+?


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 18 June 2015 05:50 PM
[ # 15 ]

icodesign,
You can use retina (2x size) images with Outlook 2007+ if you define the height/width in html attributes. This will preserve your desired size in Outlook 2007+ and make use of the retina screen on iPhone (and other devices with high pixel density).

For example:

<img src="www.example.com/images/flower.jpg" width="300" height="252"

 
1 of 2
1