I've got a bug when sending email and then opening them in microsoft outlook.
The bug is that Outlook doesn't support the css max-width parameters and which is used to define an image size.
I try something with conditional rendering :
<td class="mcnImageContent" valign="top" style="text-align: <%= #booking.trip.theme.email_client_logo_position || 'left' %>; padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<% if email_logo_url %>
<!--[if mso]>
<table>
<tr>
<td width="<%= #booking.present? ?
(#booking.trip.theme.email_client_logo_zoom.to_f *
400.to_f).to_i.to_f :
((#resource.client.try(:theme).try(:email_client_logo_zoom) ||
1).to_f * 400.to_f).to_i.to_s %>">
<![endif]-->
<img alt="" src="<%= email_logo_url %>" style="max-width: <%=
#booking.present? ? (#booking.trip.theme.email_client_logo_zoom.to_f
* 400.to_f).to_i.to_f :
((#resource.client.try(:theme).try(:email_client_logo_zoom) ||
1).to_f * 400.to_f).to_i.to_s %>px;padding-bottom: 0;display: inline
!important;vertical-align: bottom;border: 0;line-height:
100%;outline: none;text-decoration: none;height: auto !important;"
class="mcnImage">
<!--[if mso]>
</td>
Can someone help me to set the correct size for the picture?
You're absolutely right that Outlook doesn't support max-width. The best way to code images for HTML emails is to use the width attribute on the img tag, along with some inline styles that allow for images to be responsive by default (without you having to target w/ a class and update via a media query).
Here's the code I use for all images. The width attribute covers problems w/ Outlook (and a few other clients) and the inline styles work everywhere else:
<img alt="" src="http://placehold.it/1200x600" width="600" border="0" style="display: block; max-width: 100%; min-width: 100px; width: 100%;">
The min-width property is there just to make sure that, when viewed on smaller screens, the image doesn't get too small.
Hopefully this helps!
Related
I'm currently building a new HTML-template.
In one section I want to display a different image size for MS-Outlook, as it doesn't react in the same way as other clients.
Original:
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" class="mso-size" src="https://xxx" width="100%">
</td>
I need to show the image with the size width="270";height="190" in Outlook. I would like to use a CSS-declaration in the head.
I was trying the approach below, however it doesn't work. Litmus is showing no change. What am I doing wrong?
Thanks and best,
This is what I tried:
The following structure works well, Litmus shows the expected result:
<!--[if mso]>
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" src="xxx" width="270" height="190">
</td>
<div style="display:none">
<![endif]-->
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" src="xxx" width="100%">
</td>
<!--[if mso]>
<div>
<![endif]-->
But, I don't want everyone to be forced to paste in the image-URL twice. I would like to use the CSS in the head instead.
I tried the following declaration (pasted it under the first -section:
<!--[if mso]>
<style>
img.mso-size {
width:270px!important;
height:190px!important;
}
</style>
<![endif]-->
Unfortunately, Outlook on Windows use Word as a rendering engine. While they do support width and height in CSS, they do not for <img> elements. The only way to size an image is to use the HTML width attribute or VML as you showed.
Usually, what I do is declare the width I want in Outlook in the HTML attribute. And then in an inline style on the same image, apply styles I want for other clients. Based on your example, that could give:
<img alt="" src="https://example.com" width="270" style="width:100%; max-width:270px;" />
Note that percentage values in the width attribute are also buggy in The Outlooks on Windows. (They’ll be based on the physical file size and not on the parent’s element size as you’d normally expect.) For more details on CSS support in email clients, you can refer to Can I email.
I am aware this type of question has been asked before, but the solutions given there are not giving the resolution for me.
I want the <td> to have 70% width, but the inserted image is pushing the widths for received emails in outlook (I use MS Outlook Pro 2013). I do not want to use unit px because that doesn't work to cover all screen widths. A solution could be to use <div> instead of <td>, but I was told that <div> isn't supported correctly everywhere. Please advise.
HTML
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #fee7f3; color: #ffffff; border-radius: 3px 3px 0 0;">
<tbody>
<tr>
<td style="width: 70%;"><img src="/example.jpg" style="width: auto; height: auto; float: left; box-sizing: border-box;"></td>
<td style="width: 30%;"><h1>Example txt</h1></td>
</tr>
</tbody>
</table>
My Attempts
I wrapped the <img> with a <p> tag
I added display: inline-block for <td>
I added attributes width and height for the <td> and <img>
I added width: 100% and height: auto for <img>
The good news is that Outlook doesn't support #media queries so you can override any set values you need to use in email.
Outlook tends to ignore inline styles for image width. Assuming you want 600px-wide email and your image is 400px, code the width like this:
<img src="example.jpg" width="400" style="width: 70%; height: auto;" />
Some other things you should be aware of is that box-sizing doesn't work in most email clients. border-radius does not work with Outlook.
https://www.campaignmonitor.com/css/box-model/box-sizing/
https://www.campaignmonitor.com/css/box-model/border-radius/
Good luck.
I am making an eBlast for a client (it can be found here)
Everything looks good except the bottom picture of of the gentleman, in Outlook it gets blown up to an enormous size.
I am running into issues in certain Outlook email services. The eBlast passed all Litmus test but Outlook 2010 and 2013, when I further researched the issue I found it was because Max-width and min-width just does not matter in Outlook as it does not read that code.
Can anyone please take a look at this code and suggest some fixes that I could apply to the image at the bottom of the eblast, it currently sits in this code block:
<table style="border-spacing: 0;border-collapse: collapse;vertical-align: top" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr style="vertical-align: top">
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;width: 100%;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px" align="center">
<div style="font-size:12px" align="center">
<img class="center" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block;border: none;height: auto;line-height: 100%;margin: 0 auto;float: none;max-width: 146px" align="center" border="0" src="http://www.lonebeacondevelopment.com/images/jfir.jpg" alt="Image" title="Image" style="max-width:146px !important; width:50%">
</div>
</td>
</tr>
I would be forever grateful, thanks.
If you're going to be setting a max-width either way why not go ahead and set the size of the image to be that or set it to be a pre-determined width from the get-go.
That way your fallback is that it loads the image at its largest since Outlook is going to ignore that max-width either way and display the full image.
Since you're not going to be going higher than 600px there really shouldn't be any issues with either hard-coding it or just adjusting the actual full size image instead of trying to adjust the size using css.
Part of your problem is that you've got two style attributes in the same element. One of them is going to be ignored. For Outlook, the best solution I've found is to add an old fashioned explicit width="146" before the style where you set a max-width. Outlook will only pay attention the old attribute, while more modern clients will interpret the max-width in the style.
You are correct, Outlook does not support min-width or max-width.
Since Outlook 2010 and 2013 are desktop-only and use Microsoft office to render email, we can use ghost tables and VML to make the image display only at 146 pixels wide in these email clients.
Something like this should do the trick:
<div style="max-width: 146px;">
<!--[if mso]>
/* Everything inside here is only read by Outlook 07/10/13 */
<table cellspacing="0" cellpadding="0" border="0" width="146" align="center">
<tr>
<td>
<![endif]-->
<img class="center" src="http://www.lonebeacondevelopment.com/images/jfir.jpg" alt="Image" title="Image" style="width: 100%;">
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
I have an HTML e-mail that is breaking on Outlook 2013. Between every row, there is a white space: Photo
Every image is set to display: block, I have added border-collapse: collapse to the table and page-break-before: always to table rows but nothing had effect...
set the cellpadding, spacing and border to 0
without seeing your code and knowing exactly what you have, below is sample of what I use and usually works in Outlook:
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td style="display:block; border-collapse:collapse;">
<img alt="Sample Image" src="http://placehold.it/230x150.png" width="230" style="display:block;" />
</td>
</tr>
</table>
Outlook ads a default font size of 13px. If you add a style of font-size: 1px and line height of 1px on the and the this might fix it.
This fixed it for me when I ran into this issue.
A pretty hacky way of fixing that is using margin-bottom: -10px; or w.e
Perhaps specifically set the padding/margin to 0px.
I am trying to send html emails with images. Images look good in all email clients but in outlook they are too wide. How to fix max-width of image?
<table id="cg-cmgxsgg" class="widget widget-image " width="580" data-widget-code="email-image">
<tbody>
<tr>
<td align="center">
<div><img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" alt="" style="float: none; margin-left: auto; margin-right: auto;"></div>
</td>
</tr>
</tbody>
</table>
Regardless of CSS support or HTML attributes, the main factor that is causing the issue in Outlook is the actual size of the image. Outlook usually ignores whatever HTML sizing (width= or height=) or CSS styling (width:, height:) and goes off of the embedded information in teh image. This is all based off DPI setting as well as the renderings of the Word HTML engine.
Mailchimp solutions
Below is snippet explaining the issue in more detail from here
"This issue usually happens when you are using a picture other than 96dpi.
When inserting a picture, Outlook will rescale the image as if it was a 96dpi image. This means that if you have a picture of 150dpi with a height of 88px, it will be displayed as an image of 56px high;
88px/150dpi * 96dpi = 56px
It even gets worse; upon sending, Outlook will convert and compress (re-render) the images to 96dpi with the new dimensions permanently! This means that all the "detailed" picture information is lost and you'll be sending an image of 96dpi which is 56px high. This is of course a severe and very visible quality loss.
If your picture is less than 96dpi, then the opposite happens. A picture of 88px high with a dpi of 32 would then result in a 96dpi image of 264px high. So the result will be a very large image (but this time you can resize it back without the image becoming blurry).
This is a long outstanding issue/function/design choice which goes back all the way to Word 6.0 from 1993."
For setting a max-width on images for Outlook I add a Width="600" attribute to the img tag. Note the lack of px on that size, with px it doesn't work and it must be on the img tag, not any parent element.
E.g.
<img width="600" src="http://www.myimage.co.nz/myimage.jpg" alt="My Image" />
On a side but related note I use a width of 280 for side by side images in a 600 width table. This is because Outlook adds padding (or maybe margin) and they would stack if you made them both 300.
Couple of things, I'd refrain from using floats etc in your emailer code and also would remove that wrapper div, with emailers you've really got to go with simple table markup. Also try to avoid things like p tags etc as they create additional space etc.
For your actual question I'd try something like this, I'd set a height on my image and ive it display:block
<table id="cg-cmgxsgg" class="widget widget-image" width="580" data-widget-code="email-image" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center">
<img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" height="200" alt="" style="display:block;">
</td>
</tr>
</tbody>
</table>
max-width is not a supported CSS style in Outlook 2007. (Neither is float, apparently.) Outlook is notorious for providing very limited CSS support.
Your best solution is to specify a smaller width (and height) in the HTML attributes:
<td align="center">
<div><img src="..." width="500" height="300" alt="" style="margin-left: auto; margin-right: auto;"></div>
</td>
I'm a bit late to the party (got here via Google). What works for me, and what I didn't see in the answers, is conditional comments for Outlook.
They work like this:
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tbody>
<tr>
<td>
<img align="center" alt="" src="[image source here]" width="[desired width here]">
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
What your're doing here is essentially wrapping your image table in another table with fixed width, but only for Outlook.
MailChimp has a nice reference you should check out if you run into problems with Outlook: https://templates.mailchimp.com/development/css/outlook-conditional-css/
Hope this helps some fellow Googlers!
I am using this with perfect success in Outlook 365 (2022):
<img src="https://picsum.photos/1000/1000" width="100%" style="width: 100%;">