Images in an HTML email signature getting enlarged in Outlook 2013

Hi All,

I'm currently investigating this issue and have scoured a lot of content. I have somewhat of a work around, but I'm not entirely convinced it should be THE fix.

The problem:

Windows 8.1 and up has a Display Scaling feature baked in that is intended to make Windows easier to use on High pixel-density (DPI) screens, such as the MS Surface. The feature is enabled by default on hardware with these types of screens, and essentially increases the size of all on-screen visual elements by up to 200%. This allows icons, buttons, images, text, etc to all be at a relatively "normal" size for a given devise - if Display Scaling is turned back down to 100%, then everything on screen is often too small to read, and icons/buttons can be difficult to click (especially on mobile).

In the case of Outlook 2010 & 2013 (and my focus here is with signature content), images that get inserted without any specified dimensions get enlarged to the degree of whatever Display Scaling setting is enabled. For example, if you put a 100px x 300px image into your signature, and you have 200% Display Scaling enabled, Outlook will render your image as 200px x 600px. This will look totally normal on your screen while you compose an email, and it will look totally normal to any recipient who also has 200% display scaling enabled on their machine. However, anyone with a lower Display Scaling setting will see a drastically enlarged image - twice as big as it should be if they only have 100% display scaling enabled.

Essentially, anything that displays on your screen while you're composing a message with Display Scaling enabled will be physically affected.

Solutions

There are a couple ways this can be tackled:

1. Set display scaling on your machine to 100%. This can be done one time globally, or you can do it every time you send an image in an email, then back to whatever percentage you had before. If you want to do this once and hate the tiny icons/text, you can drop your screen's resolution to help enlarge things again. This option essentially avoids the issue by not scaling up content on your screen in the first place.
2. Adjust the HTML of your signature. I have found a two-step approach to resolving this somewhat, but I am unsure of the consequences. First, you'll need to open the HTML file for your signature (Google for how to locate this file) in Notepad and manually insert dimension attributes on the image in question. if it's 100x100 you'll want to add ' width="100" height="100" ' to the "<img" tag. Next, locate a line in the file that reads "<o:AllowPNG/>" and delete the entire line. It should be located near the top of the signature HTML file. I know AllowPNG deals with some image quality settings related to PNGs, but I am unsure of how this affects other image content.

I'm actively seeking a better solution than this - I firmly believe there should be a checkbox/setting within Outlook that can override the Display Scaling behavior for email messages.

Hopefully this info helps, and I hope MS can give us a better solution soon.

Just wondered whether you ever found a solution to this prob (which I'm also experiencing).  Thank you.

Larry

*** Email address is removed for privacy ***

Just wondered whether you ever found a solution to this prob (which I'm also experiencing).  Thank you.

Larry

*** Email address is removed for privacy ***

Same problem here,

anyone found a solution ?

Gian.

Has there been progress with this issue? It also appears to be happening in Outlook 2016.

Are you really suggesting that I should change my default "display scaling" setting on my PC to 100% as a fix? How is this a solution when the very reason for sending emails is for other people (on other machines) to receive them. This is not going to fix other peoples machines is it.

As far a constructive suggestions are concerned I have tried implementing the following fixes with no luck:

1. Creating alternative versions of the the image at 96, 120 and 200dpi - All images render the same width and height

2. Creating different image types including PNG, GIF and JPG - All images render the same width and height.

3. Adding this: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> - No change

4. Adding this:     <!--[if gte mso 9]>
        <xml>
            <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    <![endif]-->  - No Change

5. Setting physical pixel sizes on the image, table cell and table as style tags and old HTML. I have done this to every possible combination - No Change

The issue only seems to occur when sending email out from a HiDPI machine using Outlook. Images render ok when receiving emails. It also works fine using webmail.

Your help will be much appreciated.

John.

Hi Jon,

It's true that changing the display scaling settings on your machine is not an ideal solution - especially across an organization of users, where default settings/hardware may not be easy to use with the 100% scaling level. As infeasible as that may or may not be, changing to 100% scaling on your machine, does resolve the issue, based on all the testing we've done.

Since the image enlargement from Display Scaling happens as a result of the settings on the sender's machine (not the recipient's), changing this setting ensures that your images will render correctly, according to whatever settings may exist on the recipient's side.

To help with your testing, here are some observations I've made so far:

• DPI of the image doesn't seem to be a factor. Display Scaling in Windows will take the native dimensions (not pixel density) and scale that up congruently.
• I also agree that all image types seem to be susceptible to the scaling effects.
• Scaling is definitely a factor mostly for HiDPI hardware - these are the devices where Windows knows to crank up Display Scaling on it's own.
• I wouldn't be surprised if this was only a problem for Outlook Desktop versions. I have yet to see a web-based client (even OWA) that has this kind of problem.

Regarding your last few points, the only code-based fix I've found is to do BOTH all the following:

1. Code the height & width attributes directly on the <img> tag - no table or style tags needed.
2. Remove the <o:AllowPNG/> tag, everywhere it appears in the signature file (may be more than once).

There shouldn't be any need to alter the namespace definitions in the <html> tag at all.

I have faced the same issue. After going through some time consuming hit and trial sessions, I found that the various DPIs of the image works.

In my case, i created the signature image for 96, 144, 192, 240  keeping the same dimensions. This helped me configured the signature according to various screen resolutions, For example, 4K display will most likely be using 240 dpi.

The downside of this approach is that the image size increases. So far that's the only solution i found.   

Mo - this is great to hear that you've had success! Some questions that come to mind:

Can you explain what your testing process was?

How did you decide which DPI to test?

When picking a DPI, was it one that appeared in compose the size you expected, or after sending? Both?

Have you used this in a setup where a user has multiple monitors with different pixel densities? I would expect that you can't change the image or DPI on the fly if they were to switch between monitors.

For giving this to other users, do you just make sure the image with the proper DPI is added to the assets/files for the signature, on each machine?

Can you explain what your testing process was? How did you decide which DPI to test?

Well testing as bit pain to be honest but it's a small team of 30 people in different departments, so i was able to find out the the hardware being used with different teams. For instance marketing team use normal windows laptops with 1440 resolution whereas design team and top manages all use Macbook pros and development teams use 4k resolution with 250 times scale.

That was determined during the initial testing when I requested everyone to send back a test email with the new signature and also asked them for their screen resolution and scaling specs. Once i had the data, I created different DPI images and created html files of the signatures for different resolutions. Uploaded them and email the links of specific files to respective resolutions.

For example, 4K resolution with 250% scale, a 240 DPI worked perfectly fine while for Macbook pros 144DPI gives crisp quality.

When picking a DPI, was it one that appeared in compose the size you expected, or after sending? Both?

The DPI played the role after sending the email. While composing the email, images appear just file but outlook seems to resize the image based on the Screen resolution. So an email from a 4K resolution to 1440, the signature image of 72 DPI will be at least 2 to 3 times bigger than actual size. 

Have you used this in a setup where a user has multiple monitors with different pixel densities? I would expect that you can't change the image or DPI on the fly if they were to switch between monitors.

I have used this setup for people using different monitors and it seems to be working fine. 

For giving this to other users, do you just make sure the image with the proper DPI is added to the assets/files for the signature, on each machine?

I prefer HTML signature for better control on styling. So i make the HTML files, link the images (according to DPI) in those files and send those to users. All they have to do is to copy and past the the entire signature and change the relevant information. 

I have recently discovered that, using this approach helps you when you need to update the image in the signature. If you replace the image, keeping the dimensions and image address same, the HTML file will update itself and for some Macbook pro users, the image was updated in their signature without replacing anything manually. I will be trying that with other systems too and will update here. 

This is not a most efficient way but so far i couldn't find any other way workaround. I think Microsoft should look into this issue and come up with a proper solution. 

Mo - this is incredibly helpful. Thanks for the detailed reply!

In previous testing, I hadn't found that different DPI seemed to make a difference, but clearly you've had better results.

I agree that the ultimate solution should come from the MS team - I imagine the difficulty comes with the fact that Display Scaling is really just Window's way of compensating for the pixel density of hardware that MS doesn't manufacture. Macs (even Outlook for Mac) don't have this problem, I assume because Apple controls both the hardware AND the OS.

If adjusting the DPI of images to fit the hardware really is the solution, then the problem now becomes one of distribution - How does an IT organization get the right images into the right place? 

I have some thoughts on the subject and will definitely do my own testing to confirm this. If you'd like to connect offline, drop me line at sam[at]sigstr.com - I'd love to see if we could come up with a solution!