2

I work in Marketing Cloud on email template and I have a problem with full-width images in Outlook 2010, 2013 and 2016. I know the solution is to set width and height properties in the <img> tag and then it works fine. A customer doesn't want to look at the code, he wants to put an image on content block into this content area and have a good image in every email client. In the template code I have a commented part ( <!--[if (gte mso 9)|(IE)]> ) with a placeholder image (620x400) for Outlook and it works fine as well (in other clients there is a full-width content area for an image 1920x800). But the question is - is it possible that customer put in this content area an image and it will work fine in mso (it shows a smaller image, not necessarily full-width) and this bigger one for other clients?

Here's a part of code from a template with this full-width-content-area:

<!-- start of FULL-WIDTH IMAGE-->
<!--[if (gte mso 9)|(IE)]>
</table>
</td>
</tr>
<tr>
   <td align="center" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" height=30 width=620>
      </table>
   </td>
</tr>
<tr>
   <td align="center" valign="top" style="line-height:0px">
      <img src="http://via.placeholder.com/620x400" style="display:block;width:100%">
   </td>
</tr>
<tr>
   <td align="center" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" height=30 width=620>
      </table>
   </td>
</tr>
<tr>
   <td class="body-table-spacing" align="center" valign="top">
      <table class="container-frame" border="0" cellpadding="0" cellspacing="0" align="center">
         <![endif]-->
         <!--[if !((gte mso 9)|(IE))]><!-->
      </table>
   </td>
</tr>
<tr>
   <td align="center" valign="top" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
      <table class="full-width-spacer" border="0" cellpadding="0" cellspacing="0" height="30" style="font-weight: bold;font-size: 12px;width: 620px;background-color: #e5e5e5;overflow-x: hidden;font-family: Helvetica, sans-serif !important;border-spacing: 0 !important;border-collapse: collapse !important;mso-table-lspace: 0pt !important;mso-table-rspace: 0pt !important;">
      </table>
   </td>
</tr>
<tr>
   <td width="900" align="center" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
      <div data-type="slot" data-key="xhkwbds5tth" data-allowed-blocks="" data-max-blocks="" data-label="Drop blocks or content here"></div>
   </td>
</tr>
<tr>
   <td align="center" valign="top" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
      <table align="center" class="full-width-spacer" border="0" cellpadding="0" cellspacing="0" height="30" style="font-weight: bold;font-size: 12px;width: 620px;background-color: #e5e5e5;overflow-x: hidden;font-family: Helvetica, sans-serif !important;border-spacing: 0 !important;border-collapse: collapse !important;mso-table-lspace: 0pt !important;mso-table-rspace: 0pt !important;">
      </table>
   </td>
</tr>
<tr>
   <td class="body-table-spacing" align="center" valign="top" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
      <table class="container-frame" border="0" cellpadding="0" cellspacing="0" align="center" style="font-weight: bold;font-size: 12px;width: 620px;background-color: #e5e5e5;overflow-x: hidden;font-family: Helvetica, sans-serif !important;border-spacing: 0 !important;border-collapse: collapse !important;mso-table-lspace: 0pt !important;mso-table-rspace: 0pt !important;">
      <!--<![endif]-->
      <!-- end of FULL WIDTH IMAGE-->
Improve this question

2 Answers 2

Reset to default
2

The best and simplest way I have found to handle this (outside code edits) is to force the actual image dimensions to be the maximum width you desire. E.g. only insert images that are actually 600px wide.

It will cause issues with the 125% DPI as that will increase the image size due to the increased DPI, but that is a whole other issue in itself.

Improve this answer
2

It looks like the issue is with 100% width images in Outlook clients.

There is a work around to this.

Step 1: Set a class to the cell containing the image that will change the height to auto in mobile devices. The reason why we set on cell <td> is because sfmc content builder resets the attributes in ` and you will eventually lose your class.

Step 2: Set that class in your media query which is for mobile clients.

Step 3: Within the content builder you have an option to untick the scale to fit option. The reason is some Outlooks will fall back to the natural width of the image which is - if an image is 900px then it will fallback to 900px if set to 100% despite of its containing table which is 600px. enter image description here

Step 4: The last thing client has to do it always make sure they have unticked the Scale to fit option and set a specific width and not the natural width.

Here is an example of the code for the reference:

In media Query

.banner img { 
          height: auto !important;
          width: 100% !important;
        }

In the body of the email

<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;">
    <tr>
        <td class="banner" align="center"><img src="your_banner_image.jpg" border="0" alt="banner" style="display:block;" width="600" style="height:auto;width:600px" /></td>
    </tr>
</table>

Here is the code specific to your problem I have also noticed you had width="900" in your main <td>. Could you please add the .banner class suggested in your media query, this class helps in adjusting the image to viewport in mobile devices.

Also the table inside the comment <!-- Here is the image content --> and <!-- end of image content --> is the content block which you can save for future reference. And within the UI you could Edit image properties and untick the scale to fit option and the image won't overflow on any clients. I have tested myself and been using in email. No issues.

<tr>
   <td align="center" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
      <!-- Here is the image content  -->
      <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width:620px;">
          <tr>
              <td class="banner" align="center"><img src="your_banner_image.jpg" border="0" alt="banner" style="display:block;" width="620" style="height:auto;width:620px" /></td>
          </tr>
      </table>
      <!-- end of image content  -->
   </td>
</tr>
Improve this answer
7
  • 1
    It doesn't solve a problem, just making a bigger mess :(
    – Kitka92
    Commented Aug 10, 2017 at 7:26
  • This seems to involve more coding than the OP wanted. He was looking for a solution that did not require the EU to add code and your body HTML would be required in every instance of image, which would require the EU to code.
    – Gortonington
    Commented Aug 10, 2017 at 13:08
  • ALSO simpler solution with code would be to set the image HTML width attribute to 600 and then in css add in width:100% - as outlook puts the HTML attribute above the CSS, it would render at 600 and all other major clients would adhere to the 100% in CSS.
    – Gortonington
    Commented Aug 10, 2017 at 13:10
  • The solution I have suggested takes coding skills to setup. Once you have setup the classes in your templates - a non-technical person can easily replace images with sfmc content builder UI and not have to worry about outlook issues.
    – Brad Sapkota - altus.digital
    Commented Aug 10, 2017 at 13:18
  • @Kitka92 so did you add the banner class to your media query?
    – Brad Sapkota - altus.digital
    Commented Aug 10, 2017 at 13:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .