5

I'm currently working on some custom responsive email templates that will be used in my clients Mailchimp. (yes, the struggle is real..) The passed week I've been trying to figure out why Outlook shows my images at their original sizes.

As you can see in my code snippet below I've set a width to my img, td and tr. Also tried to add it to the table, didn't make any difference. So even I've set a fixed with to it, in Outlook the images still shows at their original size which causes the layout to go to sh*t. 

    <body bgcolor="#e8ebee"> 

<!-- wrapper table -->
<table cellpadding="0" cellspacing="0" width="650" border="0" class="container" bgcolor="#e8ebee">
<tr>
<td>
    <!-- content1 -->
    <table mc:repeatable mc:variant="Section: item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table"  style="width:650px;">
        <tr>
            <td bgcolor="#FFFFFF">
                <table>
                    <tr width="650" style="width:650px;">
                        <td style="padding-bottom: 15px; width:650px; max-width:650px;" width="650">
                            <img mc:edit="article_image" src="my_larger_image.png" alt="" style="width:650px; max-width:650px;" width="650">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- end content1 -->
</td>
</tr>
</table>
<!-- end wrapper table -->
</body>

I also have a Litmus account which shows no errors concerning the images when I use the previews.

If I were to use images with the size I define in the attribute and the style, there would no problem. But since this is for a client who will use Mailchimp I want to make sure that even when he uploads a bigger image, everything is still as it's supposed to be.

A second problem is that I use some images as icons, which are double the size for retina screens. Here is the full code for the email at jsfiddle And on top of that it should also be responsive. So the images should scale nicely for each device/screen.

Does anyone has an idea or solution that gives me back the power over my images in Outlook? I'm also willing to forget about the fluid email, and have just 2 widths one for mobile and one for desktop.

Oh and last but not least, Yes, I did google it and I think I've been through almost every blog/article about responsive email design the past week.

Thanks in advance for any help!

Kevincore
  • 494
  • 1
  • 4
  • 16

3 Answers3

4

The solution for this is to use HTML height and width attributes without pixels.

So 

<img src="..." height="200" width="600" />

Then for mobile you can use a media query. This will mean you can use retina images or anything else you want. I would recommend you use srcset for retina images as Outlook etc will simply ignore them and download your email without downloading loads of extra images.

You can find more info here:

https://litmus.com/community/discussions/1007-outlook-image-sizes

Eoin
  • 1,413
  • 2
  • 17
  • 32
2

This will solve your issue:

<img alt="" src="yourimage.png" width="650" style="display: block; width: 100%; max-width: 100%;" />

Without display: block; sometimes it happens that there will be a 1px gap below your images.

max-width: 100%; prevents your image to be larger than your container. The width: 100% is useful, because the image will get your container's width.

You should set the width attribute to the exact width in pixels.

I observed that if I use the width attribute together with max-width: 100%; then it will be rendered correctly on Word based Outlooks. Without max-width, the original width will be applied. (On Word based Outlooks.)

gyula.nemeth
  • 847
  • 10
  • 9
  • 1
    I hope it's better now. – gyula.nemeth Jan 23 '17 at 09:54
  • Hi @gyula.nemeth, thank you very much for your input! Unfortunately i've already tried it (also did it again after your post) but still my images that are bigger than the size I allow them to be, are shown at full width in Outlook. – Kevincore Jan 23 '17 at 19:09
  • I usually define the width of the content in a container table. Let's say width="600". Then I add width="100%" to the inner tables. I also add width="100" to the tds. If I put the images within in the way I mentioned, their size is perfect. – gyula.nemeth Jan 24 '17 at 09:55
  • – gyula.nemeth Jan 24 '17 at 09:59
1

Outlook uses the MS Word rendering engine, so it's going to give you problems. Im Mailchimp you have the option of not only doing inline styles, but you can create a header css sheet as well, complete with @media-screen responsive rules.

As far as Outlook is concerned, you should add two things to the html email template:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

this tells the email that "Hey, use the MS Office Schema where necessary.

then all of this in your header CSS:

#outlook a{
        padding:0;
    }
    .ReadMsgBody{
        width:100%;
    }
    body{
        width:100% !important;
        min-width:100%;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
    }
    .ExternalClass{
        width:100%;
    }
    .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
        line-height:100%;
    }
    a img{
        border:none;
    }
    img{
        display:block;
    }

The ExternalClass will help show Outlook that you mean to reference use the Microsoft rendering engine. There is a really nice guide from Mailchimp regarding this very subject available here.

Good luck!

edit: many things are going to break in your template. I started a basic Mailchimp Template for you and fixed a few things. Check the snippet.

Codepen

Note that this is still not responsive. Because you have not included any code to make it so. You want to add full body styles to your tables, TD widths and images.

scoopzilla
  • 887
  • 5
  • 15
  • Hey @scoopzilla thank you for your help, very useful information! I've added the above but without any difference. So sadly my images are still shown at full size. But I'm gonna keep this in my template anyway, it's probably gonna do some good in some clients. – Kevincore Jan 24 '17 at 07:00
  • 1
    Look at my revised answer in the Codepen. If you have more troubles send me a message or tag me. I have a full sized template that you can use. – scoopzilla Jan 24 '17 at 17:02
  • Thanks for the codepen, I'm going to check it out as soon as possible! But I do need it to be responsive. Would you mind to share your template? Thanks a lot for your help so far! Much appreciated. – Kevincore Jan 26 '17 at 08:08
  • I did a quick copy paste from your codepen, used my images and did a test mail with MailChimp, but unfortunately it didn't work in the Outlook WebApp. I'm going to do a test later today with a proper Outlook client. – Kevincore Jan 26 '17 at 08:27
  • @Kevincore Yeah let me find out how to get you one. – scoopzilla Jan 26 '17 at 16:38