Image sizing and layout alignment issues

My HTML email layout looked fine when I sent it, but when received by some people, the images are the wrong size or the layout is no longer lined up properly

Are recipients sending you screen shots of poorly laid-out emails, when you know you sent them correctly?

This is likely due to Windows Text-Scaling settings (sometimes called Desktop Scaling or Display Scaling, but always found in Windows Control Panels > Display Settings).

Windows sets text to become larger by default on new high-resolution displays, usually laptops. This is so you can actually read the text and doesn’t shrink due to the higher-resolution monitor.

This setting changes the DPI (dots per inch) resolution of the monitor, which works fine for most things.

You might notice looking at a web page that some images get a little pixelated as they get scaled up. That’s usually acceptable.

So why does your email behave differently?

The issue is how Outlook handles the email message (more specifically, how the HTML is converted to be Word compatible – Word is used to render and edit pages in Outlook).

The concept to understand here is relative sizing vs. absolution sizing, and how this applies to Content items within an HTML email

, like images, are specified as pixels (px), which are absolute. Content items like fonts are specified as points (pt). Table elements might be specified as pixels, percentages or points.

When you put HTML into Outlook, Outlook will convert all px values into points, except for images. So images are absolutely sized, while everything else in the email is sized relative to the DPI settings of the display. Hence the layout problems.

Ideally, the creator of the email content, for both images, text and table layouts, should be working at 100% DPI. When someone on a laptop set to 125% DPI views their email, the images will stay the same size, but the font’s and table cells may increase in size.

With the common use of header banners, this combination usually results in the banner image being smaller than the 125% banner area, and if you have a background color within your banner area, that will show through.

A good work-around here is not to use full banner images as the header. One option is to use a smaller left or right aligned image (such as a logo), or have the banner graphic inside of a header, so the background color forms a flexible frame around the centered image. The image still won’t scale, but the alignment won’t look off.