BR3
Getting Retina-Optimized Images to Display at Half in Outlook
Images are saved @2x for retina optimization and then displayed at 1/2 their true size via width and height attributes. Outlook on Windows seems to strip the width and height attribues (and inline width/height styles) and replaces them with the actual dimensions of the image, doubling the size we want to display.
This:
<img src="http://www.acme.com/assets/images/logo-retina.png" alt="logo" width="408" height="48" style="width: 408px; height: 48px;">
Becomes:
<img src="http://www.acme.com/assets/images/logo-retina.png" alt="logo" width="816" height="96">
Is this normal behavior? Any way to fix this?
Outlook should render the image at the correct dimensions since you've specified both width and height attributes. The inline width and height styles are redundant, so I would remove those to eliminate them as a potential cause. That leaves 2 possibilities I can think of:
Its ncie to know that thank you
recently my Photoshop saves all images with 96ppi dont know why its this way cuz I did not touch any settings but i did not encounter this issue at all
Generally I don't specify the dimensions in the style and only with the normal attributes, the retina images are good also in Outlook.
I have the exact same problem with Outlook 2016 on Windows 10.
If it recieve an image, it will display it at the display pixel density. (if the image is 100px wide and the img tag specify 100px, il will take 100 real pixel on the retina display, and not 200px as it should.)
The same problem goes the other way, if you create a mail from a retina display, the reciever with a standard display will see the picture 2 times larger.
picture of the problem: Outlook retina on top, apple mail on bottom
https://imgur.com/a/hvLOp
Have you tried adding an outlook conditional comment around your image or table to lock the size? Or create outlook-only CSS that applies to that image to override the image dimensions? Might work, but without more information I don't know why it's causing it.
See Nicole's comment in this thread for information on that if you haven't used those before: https://litmus.com/community/discussions/396-conditional-code-for-outlook
why don't you try using width:100%; max-width:408px
Looks like max-width isn't supported in Outlook (desktop): https://www.campaignmonitor.com/css/media-queries/max-width/
yes its not so you have to have your regular width="XX.px" also note that u dont need to ause height="auto" cuz the browsers should render it this way anyway including our "loved" Outlook Programm on PC
This doesn't happen for my retina images but have you tried adding:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96/o:PixelsPerInch
/o:OfficeDocumentSettings
</xml><![endif]-->
To see if this helps with the scaling?