Think of a small (valid) html mail with an image. Litmus tests ran fine.
The images are downscaled to provide a sharp resolution on high DPI devices (a.k.a. Retina Images), i.e. the image is 500px wide but to be displayed at 250px.
When I send the mail with an embedded image instead of a remotely served image, I noticed a strange behavior in Apple Mail on macOS (tested on 10.12.6): The layout is broken.
Screenshot Remote:
Screenshot Embedded:
As you can clearly see, when embedded the image breaks out of the table. This only happens if the real image size is larger than the current preview pane size.
I simplified the example up to the point where I realized that this might be an Apple Bug. Does anybody know a Radar for this? Or a workaround?
I played with overflow etc but did not find a solution..
The bug does not occur when
- the image is @1, so it's exactly the same size as displayed (but not sharp enough on high DPI then)
- the preview pane is larger than the image file dimensions
It looks like Apple Mail uses the real dimension to fit it into the table when an image is embedded via cid or even base64. When served remotely it is downscaled first.
Update
Submitted as rdar://33564090, see https://openradar.appspot.com/radar?id=5011843189833728.
Source of test mail
<!DOCTYPE html>
<html>
<head>
<title>Apple Mail Retina Image Bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Retina Image in Signature Test
<br>
Best regards,
<br>
</p>
<!-- Footer with Retina Image -->
<table border="0" cellpadding="0" cellspacing="0" style="background: #eeeeee;">
<tr>
<td style="padding: 10px;">
<!--img alt="Logo" src="http://via.placeholder.com/500x50" width="250" height="25" border="0" style="width: 250px; height: 25px;"-->
<img alt="Logo" src="cid:logo" width="250" height="25" border="0" style="width: 250px; height: 25px;">
</td>
</tr>
</table>
</body>
</html>