HS
1
Outlook Image Sizes
To cater for retina displays, I am hosting my email images as double their intended size, but I've noticed that Outlook doesn't respect any size definitions and just loads them as their original. Any solutions for this?
You'll need to define the width and height of the image as HTML attributes to get them to work properly in Outlook
Wanted to chime in to say that when using HTML attributes, don't put the px after the value. So...
You just saved me from throwing my computer out the window. It's these little things that are going to make crazy :) Thanks!
You don't need to define heights - only widths.
Let your content define the height of the container :)
This is what I use, works great across the board.
Thank you thank you thank you thank you!!!!. I hate outlook with a passionate I been working on trying to figure out my image size problem across all clients for HOUURRRSSS so thank you again sooo much for this snippet of code. :D
I struggled quite a bit with having 100% width images for my fluid HTML email templates.
The trick I used was a combination of specific outlook rules and specific mobile rules.
When you have an image with width="100%", Outlook will display it at 100% size, regardless of any classes, !important marks, wrapping divs, tables or cells with finite widths defined. So when you add an image at double the size, it blows your email right out in Outlook.
However, mobile tends to respect !important a bit more, so in the HTML I'd give the image a width of 640px, then I'd set up media queries for smaller viewports with .image_class {width:100% !important}
I also throw in the following to constrain the email to the same width as the images (in this case, 640px wide) and centre the table for good measure (because you're building in tables, of course).
<!--[if gte mso 9]>
<center>
<table width="640">
<![endif]-->
Hope this helps someone out.
Hi Hiren Shah, I remember seen some discussions about this, try this thread https://litmus.com/community/discussions/345-designing-for-retina
This will help when the pictures are the same size between desktop and mobile, but for things like a banner across the width of the email (600px and 300px respectively) this wouldn't work as defining a fixed width wouldn't make them responsive. I guess for that I would just need to have two images.
You can just overwrite the image dimensions using CSS in the media query breakpoints - be sure to use
!importantto override inline HTML or CSS width attributes or swap the image if it's a background image.So I can specify that the banner is usually 600x200 but when the screen width is smaller than make it 300x100, but this then breaks my 100% width responsiveness :(
If you don't want to rely on media queries to make your images fluid, you can use the following (and it does work with retina images - the space will just appear taller in Outlook until you turn images on):
<img src="images/my-image.jpg" width="600" alt="This is my image" style="display: block; border: 0px; outline: none;width: 100%; height: auto; max-width: 600px;" />
The HTML height attribute is not included as it messes with the Gmail app from resizing the image properly on mobile.
You must use HTML attributes (width at minimum) for Outlook to not show the full size image.
Don't use fixed dimensions for mobile. Make the width and height relative so it is responsive. So your CSS would be:
What @Courtney-Fantinato said worked like charm to me
Outlook wasn't respecting the specified size, even the max-width setting. The image for 600x200 is 1200x400 to make it look nicer on retina displays, but Outlook just stretched the table to 1200 wide :(
Does this work in Outlook? The problem is that Outlook ignores the specified dimensions of the image and instead shows images at their actual, full dimensions. I thought it would ignore any specified dimensions, important or not.
Outlook respects HTML width and height attributes for images (even retina). I define the dimensions as HTML attributes for Outlook and then simply overwrite them with media queries for mobile.
Do you mean CSS attributes or HTML? I'm using width and height HTML attributes in my templates but Outlook 07+ doesn't respect it.
It wasn't respecting my HTML specified dimensions, I had the width and height specified as px just after the src="" and it was still showing the actual image size.
I have no issues with retina images in Outlook, it does respect the HTML attributes as Kevin said.
I would suggest inspecting the code that gets sent out (you can view the source in Outlook or other email clients) to see if something is getting messed up when sending the email.
I think you're only option is to serve a different image to Outlook
Serve 2 images to the subscriber instead of adding a width?! :O
Please don't do this ;_;
I have an EDITABLE Mailchimp template where I can replace the image with any other images(retina) and it will resize to 100% email width(620px). But Mailchimp discards the 'width' attribute(width="620") from the image which makes Outlook display the image at full size( even though I have an inline styling where I have set the width to 620px). Does anyone have a solution?
In MC go to the code view on the right side. You will probably see repetitive width and height attributes. Be sure to clean them up and discard the height otherwise Gmail will look weird.
As far as I can tell with my tests, MailChimp doesn't always toss the width attribute from code entered into the template editor. It seems it removes the width attribute from images with id's (i.e. my #headerImage looses its width attribute, but my class of .colImage does not.)
It doesn't look like it's the auto-inliner, especially since code entered in MailChimp's normal code interface and using the inliner doesn't have the same effect. I might ask them about it and report back
Vishnu, Paul - I have EXACTLY the same issue. Did you ever come across a viable solution? MC definitely does away with the width attribute for my images with classes. none have IDs. Outlook 2015 is okay, 2013 and lower displays the images at 100%.
This was an issue I brought up to MC staff, specifically Fabio, and I was ignored. Unfortunately you must go into the panel on the right side and add a width each time you replace an image with anything that's larger than the original size. For example, a 600px wide image being replaced with a 1200px wide (2x for retina) image would require going into the panel and adding "600" manually. The width attribute would then be retained until the image is changed again. Clunky process, but that seems to be the standard at MC. Why they would ever strip out an attribute required by Outlook is beyond me.
I raised this with them....literally battled with their support for days (who openly admit that they're not coders so don't know). They kept telling me it was my fault until I showed them the code that Mailchimp was spewing out compared to the code I was putting into Mailchimp (Thank god Litmus allows you to download the code that's sent to it as a test!). They finally said they'd escalate it to a bug but haven't heard back and this was November 2016
I've just had a 4 day back and forth with Mailchimp about this. They tell me they are not coders. I explain, very clearly, that in order for images not to be blown out in Outlook, the HTML width attribute MUST remain once an image is edited or replaced, and it's just not. Your platform removes it. They then run a test on Outlook for Mac and tell me that it's working for them. lol. I tell them that it's probably cheaper to fix the bug than it is to devote all these man hours to customer support. TWO THINGS MAILCHIMP CUSTOMERS NEED TO DO.
1 - Be able to insert text
2- Be able to insert Images
Mailchimp has done a great job of allowing users to input text into templates.
I told MC I will be steering clients away from them and pushing Campaign Monitor until they get this fixed.
Mailchimp - If you're reading, it's great ROI for you to cater to email developers. Build an army of happy and loyal email developers and you'll make more money. Pretty simple. We have influence.
@Josh Eanes
Just to flag for you, if you use fluid images (don't rely on MQs to make them responsive) and normally don't add a
heightattribute to them, Campaign Monitor will add it in when replacing an image.I flag this because it used to be an issue with the Gmail app (it would change CSS
height: auto;tomin-height: auto;and therefore wouldn't override theheightattribute) previously. It's not an issue now with Gmail, though I know it was also an issue with Yahoo app — not sure if it's been fixed or not but it would do the same as well. This results in the images looking squished as the height won't scale proportionately.@Courtney
Thank you for the tip. Is there no way around this? Does CM apply the height with html attribute or css? If HTML, can't we just set css height to auto?
I am having the same issues with retina images in responsive email. None of these solutions seem to work. Can anyone tell me how to serve a different image to outlook only?
Hi! I was wondering if someone could take a look at my code here because I'm following all the steps but my images are still blowing out of the container with Outlook 2019 Deskstop app. I've
1. wrapped my image within a table for MSO
2. added width attribute of 30 to table, td, and img
3. added "display: block" to images
4. added inline styles of (width:30px, max-width:30px) to the table, td and img
5. added a class to the img and styled with css (Width:30px, max-width: 30px)
I don't need it to be responsive so I'm using explicit, fix width values but still no luck. Am I missing something?
``
<!--[if mso]>
<table width="30" align="center" style="width:30px;max-width:30px;Margin:0 auto">
<tr>
<td width="30" align="center" style="width:30px;max-width:30px;Margin:0 auto">
<img
width: "30"
class="hal-social-icon"
src="https://cdn.shopify.com/s/files/1/0448/8078/9654/files/instagram-icon.png?v=1616108592"
style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:block;height:30px!important;Margin:0 auto;outline:0;text-decoration:none;width:30px!important;max-width:30px!important"
alt="HAL Instagram">
</td>
</tr>
</table>
<div style="display:none">
<![endif]-->
<img class="hal-social-icon"
src="https://cdn.shopify.com/s/files/1/0448/8078/9654/files/instagram-icon.png?v=1616108592"
style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:block;height:30px!important;Margin:0 auto;outline:0;text-decoration:none;width:30px!important"
alt="HAL Instagram">
<!--[if mso]>
</div>
<![endif]-->
``
Try this:
<!--[if gte mso 9]>
<img src="http://www.lorempixel.com/1200/400/business" alt="Insert Alt text here" width="600" border="0" style="display:block;" />
<div style="width:0px; height:0px; max-height:0; max-width:0; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
<img src="http://www.lorempixel.com/1200/400/business" alt="Insert Alt text here" width="100%" border="0" style="display:block;" />
<!--[if gte mso 9]>
</div>
<![endif]-->
Thank you very much Brian. It worked finally after days trying to understand the problem.
Thanks for sharing this, Brian. I've been Googling for ages trying to find how to do this.
I have an EDITABLE Mailchimp template where I can replace the image with any other images(retina) and it will resize to 100% email width(620px). But Mailchimp discards the 'width' attribute(width="620") from the image which makes Outlook display the image at full size( even though I have an inline styling where I have set the width to 620px). Does anyone have a solution?
This worked for me. Just altered the width after "if" section part 1 - line 2 & image width on line 5. This worked for my retina images as well. If image does not center, image tag under mso (line 2) must have a height.
WOW,
I think this will work...I just need to add a link and styled alt text. I probably can just add the link around each image and I may have to play around with the styled alt text...maybe it can go right into that style=" section at the end.
thanks!
you can use src sets to serve up higher res images to hi res devices but you should keep in mind that people will be downloading extra huge images, often on their own dime (depending on their phone plan)
https://webkit.org/demos/srcset/
You mean Outlook app?