CODEWITHSUNDEEP
htmloutlookmailchimpemail-templates
Kevincore
Kevincore

Reputation: 504

Display images in Outlook in custom size

I'm working on custom responsive email templates that will be used in Mailchimp.

I am trying to figure out why Outlook shows images at their original sizes.

In my code snippet below I set a width to my img, td and tr.
I also tried to add it to the table.
The images show at their original size which corrupts the layout.

    <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 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 is supposed to be.

A second problem is that I use some images as icons, which are double the size for retina screens. The full code for the email at jsfiddle.

On top of that it should also be responsive. The images should scale for each device/screen.

I'm willing to forget about the fluid email, and have just two widths one for mobile and one for desktop.

Upvotes: 6

Views: 14439

Answers (3)

Eoin
Eoin

Reputation: 1493

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

Upvotes: 5

scoopzilla
scoopzilla

Reputation: 883

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.

Upvotes: 1

gyula.nemeth
gyula.nemeth

Reputation: 867

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.)

Upvotes: 3

Related Questions