I wanted to bring to your attention an issue that I'm running into repeatedly when helping clients troubleshoot html email display issues particularly as it relates to Outlook/Windows versions.
Folks who are using retina sized images are having to go into the html source view to add in width="" to the image tag because the editor strips out any width="600" if an image in a template is replaced . If an image is added, it never actually gets the width="600" which is another issue. Images will only have an inline width style that defines the width, ex. style="width: 600px;" and not a width="600". For example, when someone adds or replaces an image, the code for an image will look like this:
The image in this example is actually 600 pixels wide or if they had created it to be retina sized it would be 940px. The problem with only having an inline style width on an image in html emails is that if the image is any wider than 470px in this example, Outlook/Windows ignores the inline width style completely. It only recognizes the width="470".
Outlook/Windows will display the image at 100% size if it does not have width="600", regardless of any classes, !important marks, wrapping divs, tables or cells with fixed widths defined. So when you add or replace with a retina sized image, it blows the email wide in Outlook/Windows.
At this point, I've been telling folks that they can't use retina sized images unless they are comfortable going into the html source and adding in the width="" to an image. I'm telling them to make the image the exact width of the container it's in. I don't love telling people that they can't use retina sized images.
Retina sized images that are evergreen like logos or social media icons are fine 1) because they don't get replaced or modified and 2) they retain the width="" because they aren't edited and have been coded that way as part of a template. But for folks, who don't understand the complexities of html email coding and rendering issues, they don't even know this is a thing until they see it but they don't know how to solve it.
I wanted to bring to your attention an issue that I'm running into repeatedly when helping clients troubleshoot html email display issues particularly as it relates to Outlook/Windows versions.
Folks who are using retina sized images are having to go into the html source view to add in width="" to the image tag because the editor strips out any width="600" if an image in a template is replaced . If an image is added, it never actually gets the width="600" which is another issue. Images will only have an inline width style that defines the width, ex. style="width: 600px;" and not a width="600". For example, when someone adds or replaces an image, the code for an image will look like this:
img src="https://nvlupin.blob.core.windows.net/images/van/UNF/UNF/1/60021/images/TELL%20CONGRESS%20TO%20SUPPORT%20THE%20UN%20%281%29.jpg" style="width: 470px;"
The image in this example is actually 600 pixels wide or if they had created it to be retina sized it would be 940px. The problem with only having an inline style width on an image in html emails is that if the image is any wider than 470px in this example, Outlook/Windows ignores the inline width style completely. It only recognizes the width="470".
Outlook/Windows will display the image at 100% size if it does not have width="600", regardless of any classes, !important marks, wrapping divs, tables or cells with fixed widths defined. So when you add or replace with a retina sized image, it blows the email wide in Outlook/Windows.
At this point, I've been telling folks that they can't use retina sized images unless they are comfortable going into the html source and adding in the width="" to an image. I'm telling them to make the image the exact width of the container it's in. I don't love telling people that they can't use retina sized images.
Retina sized images that are evergreen like logos or social media icons are fine 1) because they don't get replaced or modified and 2) they retain the width="" because they aren't edited and have been coded that way as part of a template. But for folks, who don't understand the complexities of html email coding and rendering issues, they don't even know this is a thing until they see it but they don't know how to solve it.