html

Image Scaling Problem in Outlook

Last updated: 09.04.2026
Views: 333

Creating HTML email layouts is a fairly complex and not always enjoyable process. This is mainly due to the fact that many email clients do not support modern web standards. In addition, there is a huge number of different email clients and services.

When I was composing HTML emails, I encountered the fact that in desktop Outlook (it turns out that someone else uses it) the images were displayed at a strange scale. All the pictures were enlarged. I solved this problem as follows. I added Outlook-specific code to the head section and added some attributes to the html tag. After adding the code, the pictures in desktop Outlook began to display normally.

HTML

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

<head>
   
  <!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

Outlook (especially desktop versions like Outlook 2016, 2019, and Office 365) scales images due to DPI (dots per inch) settings. Many versions of Outlook use Word as a rendering engine, which handles images differently than browsers. If your image looks blurry or resized, it is likely due to Outlook’s automatic DPI scaling (125% or 150% on high-resolution displays).

Microsoft Outlook is a widely used email client and personal information management application developed by Microsoft. It is part of the Microsoft 365 suite and is available for both desktop and web platforms.

author
Author: Igor Rybalko
I have been working as a front-end developer since 2014. My main technology stack is Vue.js and WordPress.

Similar posts:

  • How to Hide Scrollbar Using CSS
    There are several ways to hide the scrollbar using CSS, depending on whether you want to completely remove scrolling or just hide the visual appearance of the scrollbar. ...
  • Infinite Rotation with CSS Animation
    One simple yet effective technique is creating an infinitely rotating element. This kind of animation can be used to attract attention to specific parts of a page, such a...
  • How to Create a Drop Down Menu Using only HTML and CSS
    In one of the previous articles, we looked at creating a drop down menu using JavaScript (jQuery). In this article, we will look at how to make a drop down menu using onl...

2 responses to “Image Scaling Problem in Outlook”

  1. tlover tonet says:

    What’s Happening i’m new to this, I stumbled upon this I’ve found It positively helpful and it has aided me out loads. I hope to contribute & help other users like its aided me. Great job.

  2. zoritoler imol says:

    Undeniably believe that which you stated. Your favorite justification seemed to be on the net the simplest thing to be aware of. I say to you, I certainly get annoyed while people consider worries that they plainly don’t know about. You managed to hit the nail upon the top and also defined out the whole thing without having side effect , people could take a signal. Will likely be back to get more. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *