Limit image size in Outlook when using Mailchimp

I'm currently working on coding a Mailchimp template for a client and I've run into an issue with image dimensions.

The problem arises when images exceed the width of the template (usually 600px), as they are displayed at their original size in Outlook. Unfortunately, I cannot rely on my users to handle this flaw gracefully.

One workaround that somewhat works is hard coding the image dimensions into the img tag. However, changing the image in Mailchimp overrides these hardcoded attributes - so Microsoft isn't entirely to blame.

I've searched for a solution and found some helpful information here: How to retain image dimensions in Mailchimp templates - though the accepted answer there lacks completeness.

Does anyone have any clever suggestions? I've spent countless days on this now and am losing faith.

I even tried a supposedly foolproof method, but it ended up breaking in Outlook 2010 and older versions during Litmus testing:

<!-- content1 -->
    <table mc:repeatable mc:variant="Section: item with image top and CTA" width="300" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:300px;">
        <tr>
            <td bgcolor="#FFFFFF" width="100%">
                <table width="100%">
                    <tr>
                        <td width="100%">
                            <img mc:edit="article_image" src="https://gallery.mailchimp.com/3517b92e77c79cf5a2a6072a3/images/c37645eb-f76b-44e9-88ab-f01b1929dda2.jpg" id="contact-photo" alt="" style="width:100%; max-width:100%;" width="300">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table> 
<!-- end content1 -->
htmlcssimageoutlookmailchimp

Answer №1

Your question seems to be quite similar to another one I came across on Mailchimp affecting Outlook-specific conditional comments in HTML

I faced the same issue as you did. Despite spending hours debugging and searching online, I stumbled upon information from a MailChimp post that explained:

Outlook doesn’t recognize certain HTML elements related to images, causing problems with resizing. To avoid image display issues in Outlook, resize your images before uploading them to MailChimp or use the platform's built-in image editor.

source: MailChimp Knowledge Base

Even though it was hard to believe, I kept trying to constrain the images by setting fixed widths on various HTML elements like img, td, tr, table... but nothing worked.

While I can't explain the technical details, I recommend setting max-width & width for your images and td elements. It's also important to inform clients about resizing images properly. Setting these attributes will display the dimensions when hovering over the editable image in MailChimp editor. Moreover, uploading larger images triggers a warning message in MailChimp.

If it helps, below is a snippet of code I used in my templates to create fluid layouts:

<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
  <td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="padding-bottom:15px;max-width:610px;">
          <img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
        </td>
      </tr>
    </tr>
  </table>
</td>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify if any choices are available before displaying the div block

I need to determine if there is a specific option selected in a dropdown menu, and then display a div if the option exists, otherwise hide it. I'm not just checking the currently selected option, but all available options. if (jQuery(".sd select opti ...

javascriptjqueryhtmlcss

Utilizing a custom font to emphasize the extended phrase in the following sentence

I've been trying to use word-wrap to break long words into the next line, but unfortunately it's not working as expected. You can view my JsFiddle code for reference. The divs on my page are generated dynamically, and here is an overview of what ...

javascriptjquerycsshtml

When using Angular 8 with RxJs, triggering API calls on click events will automatically detach if the API server is offline

I have an Angular 8 application with a form containing a save button that triggers a call to a Spring Boot microservice using RxJs. I decided to test what would happen if the Rest API server were down. When the Rest API is running, clicking the button wor ...

htmlangularspring-bootrxjs

Ways to send a list with dictionaries in an HTML template and retrieve their data

Within my Django project, I am dealing with a specific list: my_list=[{'id':1,'username':'sometext'},{'id':2,'username':'someothertext'}] I have passed this list to the template using the followi ...

pythonhtmlpython-3.xdjango

Maintain form activity post submission using jQuery's addClass and removeClass methods

There is a button on my website that, when clicked, reveals a form. The code I am using for this functionality is: $('#theform').addClass('hidden') $('#theform').removeClass('hidden'); <div id="theform" c ...

javascriptjqueryhtmlforms

Retrieve a time stamp value from a database and showcase it using jQuery

My database query is retrieving the timestamp of when an item was entered, which I am then echoing back to my main page using PHP. The timestamp is in the format YYYY-MM-DD HH:MM:SS:MS and is displayed correctly in an HTML table. However, when I click on a ...

phpjqueryhtmltimestamp

Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for eq ...

cssreactjsmaterial-ui

Solving the Angular form glitch: error message not displaying

I am facing an issue with my simple form where I am not able to display errors related to the fields. <html lang="en" ng-app="MyApp"> <head></head> <body ng-controller="AppCtrl"> <form name="myForm" id="myForm"& ...

javascripthtmlangularjs

What methods can be used to incorporate animation when the display attribute transitions to none?

Is there a way to add animation in a Vue app when replacing elements? I would like the transition from, for example, clicking on a div with 'Num 1' to the divs with class 'showing' not disappear abruptly but smoothly, such as moving to ...

javascriptcssvue.js

Using Flexbox for laying out content in both columns and rows

Hey there, I'm looking for a little help. It's been quite some time since I last built a website from scratch and I want to keep things simple this time around. I've used breakpoints before, but I'm curious if Flexbox could be a better ...

htmlcssflexboxmultiple-columns

Pressing the HTML button will reveal the cart details in a fresh display box

I have been working on setting up a button to display the items in the shopping cart. I have successfully created the cart itself, but now I am facing the challenge of creating a button called showYourCart that will reveal a box containing the cart detai ...

javascripthtml

Calculate the quantity of rows within a specific div container

Looking at the image provided, there are multiple divs inside a main div. I am trying to figure out how many rows the main div contains. For instance, in this particular scenario, there are 5 rows. It is important to mention that the inner div is floated ...

javascriptjqueryhtmlcss

Tips for preventing text from breaking onto a new line in Safari

I have cforms plugin installed on a WordPress page. Interestingly, the word "required" in Russian appears to consist of two words as per the translation office. While it displays correctly in Firefox, in Safari it breaks and aligns to the bottom left of ...

csswordpress

Image Animation Using a Rotational Control (HTML/JavaScript/...)

I am interested in achieving a specific effect with a series of images that transition from dark to light. My idea is to have a dial or slider underneath or over the frame so that when it is moved to the left, the black image is displayed, and when moved t ...

javascripthtmlcss

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

htmlcssbordercss-tables

Issue with creating a new jstree node

I recently put together a basic jstree. When I click on a link, it triggers the createNode() function. This function utilizes the create feature from the API to generate a new node. It appears to be a common issue with jQuery that I am encountering. Any ...

javascriptjqueryhtmlcssjstree

Enhancing Bootstrap project with personalized CSS styling

Utilizing SCSS to create my CSS has been the approach I've taken. The content of my main.scss file remains consistent even after it is compiled into css. .my-custom-row { background-color: bisque; } Contained within my index.html file is everythi ...

htmlcsssass

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

javascriptcsstwitter-bootstrapgruntjs

Ar.js results in objects experiencing deformation or modification when manipulated

Recently, I started experimenting with Ar.js and encountered an issue where the objects displayed on the screen seemed distorted. To illustrate this problem, let me share a basic A-Frame example featuring a perfectly round sphere: <!DOCTYPE> <html ...

javascripthtmlthree.jsaframear.js

Adjusting text alignment to span the entire width with consistent automatic spacing

Imagine if I have a collection of N words. To illustrate, consider the following: Dog Peanut Oranges Lemon Disciplinary All these words vary in length. Let's assume there is a container with a variable width X (the container may adjust its size ac ...

htmlcss