Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Stephen O'Connor
Stephen O'Connor
22,291 Points

Prevent Images in HTML Email Scaling Up With DPI Scaling, Outlook 2013

Hi,

I have a very annoying issue with an HTML email I have designed and built when viewed in Outlook 2013. The issue arrises when a user with DPI Scaling set to 'Medium (125%)', and it makes all my images 125% larger than they should be, even though the width and height are set on the <img> tag, in the style of the <img> tag and on the <td> that houses the image.

My code:

<td align="right" valign="top" class="socialIcon twitter" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; width: 25px; height: 25px; padding-right: 8px;">
<a href="https://twitter.com/company" target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<img src="http://www.example.com/email-campaigns/images/twitter-icon.png" width="25" height="25" alt="Follow us on Twitter" style="border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: 25px; height: 25px; display: block;">
</a>
</td>

The image above displays at 31px by 31px, when it should be 25px by 25px.

Does anyone know a work around for this?

Thanks. Stephen.

Stuart Ringold
Stuart Ringold
12,508 Points

have you tried looking over this site:

https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013

I'll be happy when the big vendors start supporting all html and css. This hybrid inline style nonsense is really old.

Either way good luck.

Stephen O'Connor
Stephen O'Connor
22,291 Points

Hi Stuart, yes, I have looked at this page, and lots of other pages that try to detail what is going on, but none of them seem to cater for the issues I am having. Basically everything in the email stays the same size, table widths, text size etc but the images are scaled up, causing the layout to break out of the container tables, which is incredibly annoying, but, as it stands, it looks like I will just have to deal with it as I cannot seem to find a solution.

The joys of html email design!

1 Answer

Rudy Tan
PLUS
Rudy Tan
Courses Plus Student 16,635 Points
Rudy Tan
Rudy Tan
Courses Plus Student 16,635 Points

HTML email is kinda tricky. Have you tried registering on mailchimp and build your template with their builder and export the code? You can even tested it to several email addresses.

Stephen O'Connor
Stephen O'Connor
22,291 Points

Hi Rudy,

Yes, we have a MailChimp account. The HTML email is purpose built by our company, we followed the video tutorials on Treehouse to get the template working on most email clients, and in 90% of them it looks as it should and functions well.

The issue comes with Windows users who have Outlook 2013 installed and have their computer DPI setting set higher than normal (100%). The thing that I do not get is why it is only the images that are scaling up and nothing else.

Frustrating to say the least, but that's html email design for you.

Rudy Tan
Rudy Tan
Courses Plus Student 16,635 Points

Yea I know what you mean. I did one for my company and it kinda breaks apart on outlook too. I didn't have the issues with DPI scalling, mine was responsive issues. That is why I suggested mailchimp. I used their builder and the HTML email is looking good.

Stephen O'Connor
Stephen O'Connor
22,291 Points

Our emails are responsive, at least with the email clients that support media queries but one of our clients got a new laptop recently and the email template we had been using suddenly looked terrible when they were viewing it. So after a few hours trying to get to the bottom of the issue we found out that they had their DPI Scaling set to 'Medium (125%), which in theory increases everything on the screen by 125%, but for some reason with our email template it is only affecting the images.