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

Looking to alter the CSS of an ID element when hovering over a link on your website?

Irrespective of the positioning of the links in the html, a simple hover effect can trigger changes like switching images or altering backgrounds anywhere on the website. The ideal solution would involve a straightforward method without the need for Javas ...

javascripthtmlcss

Convert the 'value' attribute in HTML into a clickable link

Is there a way to make the output value of an HTML input field into a clickable link? Right now, it appears as follows: <input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactD ...

javascriptphphtml

As soon as I insert an image, the text on the right automatically moves to the bottom

I'm going crazy over this issue. My navigation bar has three div elements, each with text aligned both vertically and horizontally at the center. However, when I insert an image (an SVG icon of a zoom lens) before the "search" text, it shifts the tex ...

htmlcssimageflexboxvertical-alignment

Can a mobile device be programmed to automatically bring up the keyboard for the autofocus element?

Currently utilizing Meteor for my project and facing an issue with a "Add new" button. When clicked, the button disappears and is replaced by a text box. The toggle logic between the button and input is complex and not relevant here. Check out the HTML co ...

htmlmeteorautofocus

Troubleshooting an Issue with MediaStreamRecorder in TypeScript: Dealing with

I've been working on an audio recorder that utilizes the user's PC microphone, and everything seems to be functioning correctly. However, I've encountered an error when attempting to record the audio: audioHandler.ts:45 Uncaught TypeError ...

javascripthtmlaudiotypescriptmedia

Center text within a dropdown using Bootstrap styling

In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using: text-alig ...

htmlcsstwitter-bootstrapbootstrap-4

how to dynamically update a button's text using Vue.js

I have a challenge where I need to dynamically change the text of a button based on whether a value is true or false. Below is the code snippet that I have been working on: <button class="btn btn-primary table-button" type="button&quo ...

javascripthtmlvue.jsbuttonwatch

The sub menu in IE 8 does not stay open while hovering over it

My website has a navigation menu with a sub-menu that appears when hovering over the parent element. While this works smoothly on modern browsers, Internet Explorer 8 presents an issue. When hovering over the parent li element in IE 8, the sub-menu is disp ...

cssdrop-down-menuinternet-explorer-8submenu

Angular 10 Reactive Form - Controlling character limit in user input field

I'm currently developing an Angular 10 reactive form and I am looking for a way to restrict the maximum number of characters that a user can input into a specific field. Using the maxLength Validator doesn't prevent users from entering more chara ...

htmlangulartypescriptangular-forms

Leveraging jQuery's Append functionality

Struggling with using jQuery's .append() method. Check out my code: $('#all ul li').each(function() { if ($(this).children('.material-icons').hasClass('offline-icon') == false) { $('#online ul').append ...

javascriptjqueryhtml

Leverage CSS styling for database values within a PHP framework

How can I style MYSQL database values in HTML using CSS? My vegetarian database row has 'Y' for yes and 'N' for no. I want to apply different styles to these values using CSS as I display them on my PHP-based page. if ($result1->num_ ...

phphtmlcssmysqldatabase

"Hey, do you need a see-through background for your

Currently, I am implementing the JS library found at . Unfortunately, I am struggling to make the background transparent or any other color. It appears that the issue lies in the fact that the tab styles are being overridden by the JS library whenever the ...

javascriptjquerycsstwitter-bootstrap

Converting from CAPS lock to using the capitalize property in CSS

Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices! I have come across similar ...

htmlsentencecss

Challenge with Express Helmet: CSS fails to load properly on iOS Safari browser

After successfully adding Helmet to my Node/Express/EJS project and configuring my CSP to allow inline scripts, styles, and certain external sources on my Windows laptop in Opera, Chrome & Edge, I encountered a problem when connecting via iOS Safari on mob ...

cssnode.jsexpresshelmet.js

Why is applying CSS on an li element using .css() in JQuery not functioning?

Hey there! Could you please review my code? I'm attempting to add a top position to the <li> element using a variable in jQuery, but I'm not sure how to do it. Here's the code: <script> $(document).ready(function(){ ...

javascriptjquerycss

Unexpectedly, the jQuery get function retrieves the entire webpage

I'm encountering difficulties when using .get requests to update elements through page load or button press. Here is the code snippet... $(document).ready(function() { //updateVariable(); $('#dannychoolink').html('<?php dan ...

jqueryhtmlajaxget

Facing challenges with parsing JSON files in an Angular 2+ application

Utilizing the Angular CLI, I have configured this project with the standard folder layout. My goal is to practice reading a JSON file from src/app/assets/items.json and then using it to display these items in the HTML. items.json: { "results": [ ...

htmlangularweb-applicationsdependency-injectionsingle-page-application

Is it possible to verify the absence of an error icon when valid data is provided in Angular testing?

Currently, I am utilizing the Selenium webdriver for Angular Automated testing. My scenario involves displaying a tooltip icon with an error message if the data provided is invalid. If the data is valid, the tooltip icon does not show up. Although, I have ...

htmlangularselenium-webdriverautomated-teststooltip

"Enhance your web development skills by mastering jQuery alongside the

It's curious that jQuery doesn't support the use of the "+" sign. You can see how it functions with "1" and "3", but not with "2+". Just hover your mouse over each div to experience it. <div id="div-2+"></div> JSFiddle $('a. ...

javascriptjqueryhtmljquery-selectors

There appears to be an empty void on the website

If you could kindly click on this link & use CTRL + F to search for the text "Info", you will see a visual representation similar to the image below. There seems to be quite a bit of empty space below these texts. I experimented with padding, display: ...

htmlcss