Login/Register
Strange behavior with embedded highDPI images in Apple Mail 7.0
Asked Answered
emailretinaapple-mailhighdpi
O

2

6

I came across an issue where images get displayed in there native size even with width attribute:

Here's my test html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>test</title>
</head>
<body>

    <div>
        <p>Embeded 1</p>
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Embeded 2</p>
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Linked 1</p>
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Linked 2</p>
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
    </div>

</body>
</html>

Here's a screenshot from Apple Mail 7.0

enter image description here

EDIT This is the raw email body:

Received: from [xxx] (helo=xxx)
    by xxx with esmtp (Exim 4.68)
    (envelope-from <xxx>)
    id 1VfX9Z-0002AE-Ki; Sun, 10 Nov 2013 16:42:21 +0100
Return-path: <xxx>
X-Envelope-To: xxxx
Received: from [xxx] (helo=xxx)
    by xxx with esmtp (Exim 4.68)
    (envelope-from <xxxx>)
    id 1VfX9Z-0004By-IS
    for xxx; Sun, 10 Nov 2013 16:42:21 +0100
Received: from [xxxx] (helo=xxx)
    by xxx with esmtpa (Exim 4.68)
    (envelope-from <xxx>)
    id 1VfX9Z-0007f1-4u
    for xxx; Sun, 10 Nov 2013 16:42:21 +0100
Received: by xxx (Postfix, from userid 501)
    id CF8EA3B8AA0A; Sun, 10 Nov 2013 16:42:20 +0100 (CET)
To: xxx
Subject: xxx
Date: Sun, 10 Nov 2013 15:42:20 +0000
From: xxx <xxx>
Message-ID: <xxx>
X-Priority: 3
X-Mailer: revaxarts-themes demo
MIME-Version: 1.0
Content-Type: multipart/alternative;
    boundary="b1_e1c39bd3cc07c9a37a6ae66b52e2753d"
Content-Transfer-Encoding: 8bit
X-Df-Sender: eGF2ZXJAcmV2YXhhcnRzLmNvbQ==
X-Spam-Checker-Version: SpamAssassin 3.3.1 (2010-03-16) on
    spamfilter16.ispgateway.de
X-Spam-Level: 
X-Spam-Status: No, hits=0.0 required=9999.0 tests=BAYES_50 autolearn=disabled
    version=3.3.1
X-Spam-CMAETAG: v=1.1 cv=eqI3rwYZn7zV4UmkNMmt7weZSwHui2Vc5AUAV4IajoU=
    c=1 sm=0 a=um-k4-9LFHQA:10 a=FP3bJtu2gI4vAIHRqdwASw==:17
    a=RELTunctmil-TFG8TWAA:9 a=QEXdDO2ut3YA:10 a=ezkJIM3X4EQA:10
    a=_5yxvZR9Ds0A:10 a=SSmOFEACAAAA:8 a=1hle9SxZAAAA:8
    a=PTYHS11jASYzloMs0H4A:9 a=_W_S_7VecoQA:10 a=p403mkujtbAA:10
    a=jbmgarMCn3JHYSELxa8A:9 a=HXjIzolwW10A:10 a=_moxOrh7Pwr-ZIKs:18
    a=yE_UcD7gtxtlVJ_mbRcA:9 a=nDhcKlyyXGP8reDK:18
    a=HpAAvcLHHh0Zw7uRqdWCyQ==:117 xcat=Undefined/Undefined
X-Spam-CMAECATEGORY: 0
X-Spam-CMAESUBCATEGORY: 0
X-Spam-CMAESCORE: 0

--b1_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit

Embeded 1

Embeded 2

Linked 1

Linked 2


--b1_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: multipart/related;
    boundary="b2_e1c39bd3cc07c9a37a6ae66b52e2753d"

--b2_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 8bit

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
    </head>
    <body>

        <div>
            <p>Embeded 1</p>
            <img src="cid:[email protected]" alt="" width="200" height="100" />
            <img src="cid:[email protected]" alt="" width="200" height="100" />
            <img src="cid:[email protected]" alt="" width="200" height="100" />
            <img src="cid:[email protected]" alt="" width="200" height="100" />
        </div>
        <div>
            <p>Embeded 2</p>
            <img src="cid:[email protected]" alt="" width="200" height="100" />
            <img src="cid:[email protected]" alt="" width="200" height="100" />
            <img src="cid:[email protected]" alt="" width="200" height="100" />
            <img src="cid:[email protected]" alt="" width="200" height="100" />
        </div>
        <div>
            <p>Linked 1</p>
            <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        </div>
        <div>
            <p>Linked 2</p>
            <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        </div>

    </body>
    </html>


--b2_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: image/png; name="embeded400x200.png"
Content-Transfer-Encoding: base64
Content-ID: <[email protected]>
Content-Disposition: inline; filename=embeded400x200.png

iVBORw0KGgoAAAANSUhEUgAAAZAAAADIBAMAAAA0O6rRAAAAG1BMVEUAAAD/Dw4fAQF/BwefCQi/
CwpfBQXfDQw/AwOUadmkAAAFS0lEQVR4nO2YzVPjRhDFhSwbHXfA2BwNIUWO6yxJrtZCsntESXYr
R1z54mizpMhRJrsu/9k7PdMj9VgjQcmHpFLvV5SR26+lfqP5kqIIAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwHL4pWn7sz54fJb66nZTH8foxoIg3TRKZ24XspuXHk8Vz
ovlLruuNUuPXHDxbKnUvSusd0ufHZYPEy+3E7kZ6amYPpuryVaZecnD46kIdVqq9A/3xnTq6vMjV
TV0ic7uxu5EVG+mZOqa2MvOvJyqbk0i91R9xNqpJvNxu7G5kmc9sqcf0mZr2HqiCvqxGlWqiP2zf
6anJtkTmdmRnI8mhaWxdqj3TnH7dtw4GY6caHIkUM6g8icztyM5G5tfWSI9L7VP/mF7bL24eiPrH
MmWxJfFyO7KrkVhNrBFuYdvE3MJVE69kzsmLLYmX25FdjfRHdhzb6gg9AmLFx2auql2Gop5E5j5B
fPHuByNa68OfCz2wvr8s+Apf8KFQRdE/FLQlh6PMdMZG5txVovymGhF9burYa2qq3ZPI3Cd85OpB
DY10MlX6KM7H6sgaOVNjNS58VfSl0gtUYUoOR5l0zDNrlLnhoK0lrq/3hvzf6/x0AzyJzG1nPiyi
NCff+dnhJF3Ozs0nXf9WfR2ldmqvVKl6H8V/HpqSw1Fm/9gZKRtTN6+7EWW7l13MsLqOfInMbSU1
c3ZCzZNPddL5Qa4DJzSTZNmdEwjVuWmvbLpoijqoLa2RZeHKXBh79sLcpfyWpiRPInNb4VmB9LlZ
T48oYO57Np64MwhVZi6cqMYoY1qcjUw4pm/YvrsBbmyUP5ogDWlPInNb4TtGV8xNt1emp1AVmT2h
GHJaFfPssVw0Rd2F70oj5YSjR0DZk3hu8pZD24CeROa2wpPf3sItUWYvYJrLtrK5VKUa8BilOT4c
ZUznZiMutveC/hgb9ZbD6OTAqiqJzG2Fb11fn4EGhwtQPk8Y4gZrVcIjke50OGqxk9LTRvyub9qy
mxHuqckxTb9bRm5Kr5XKjUQqORyNRIFPdy1vObT7kU5dyw253qjZSF4IlRuJuuRwlM9rT/PkYPeX
wzmNq26DPVUPllYjQuXusD5vOGrhtWDLyEoYsdNvIpdDO537EpnbbuSd5Zd2I6XKMxKKWsRk2Log
nsjlkJ9ROi2IqZj9WoxUKmkkGDXE6vGUmL4+PW3dosjl0D08ddqiyD7aPNiFKjBG/KhhoCrcfYns
ppEnam53uRy6h0ZPInNbUdVhkxE5CZbzPpUcjhLplSW/v7pq28bL5bB8mu22jbeLR9hItY5UKrdZ
pbEXjkr4wYptmvHtNk9GKpfDefkULyVebhui69WMXJdFVio3MGh7GI7WjTQ/6q6qETyoXi90etQV
00bNiG2i8wNPZZsrpu1hOFo30vzyQXT8aXVzOr186FW9tGbEVkdbLqGyi9Y5bQ/D0YCRptdBYrpI
7AOcddDpdVD+oxGGjPw+MleYeKrkSH9PH8ywDkfrRhJTxtzORuZGD8yrO7Ec5nciTUj83DYS9X6z
+Y3Krxl5zD/oX+58VZQNb9f537RdbojWjUTT8eWvb8pXpvffXiyNhWr/lKi/yoXZk/i5rXyiyf6n
KGCkGORKfdhSRYMlBW3J4WjdSJpp3VsOftTHw8LUOKuMMKMtyVZuK+kfja/t4/VtXRWvN4FcGQ2w
uS2qJCeVy+FWTfJsMvc/SXr5b1cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAD8r/kMq7dYR24m8s8AAAAASUVORK5CYII=


--b2_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: image/png; name="embeded200x100.png"
Content-Transfer-Encoding: base64
Content-ID: <[email protected]>
Content-Disposition: inline; filename=embeded200x100.png

iVBORw0KGgoAAAANSUhEUgAAAMgAAABkBAMAAAAxqGI4AAAAG1BMVEUAAAD/Dw4/AwN/BwefCQgf
AQFfBQXfDQy/CwqPUrJGAAACKUlEQVRoge2UO2/iQBSFD37hkmYfpRW0CaUVJ4gSsWiX0lsQtrSi
RHGJggiUFnGIf/beO+O3kRJlt1npfhIH+9zRnJk7IwOCIAiCIAiCIAiCIAjCv8SZ1t+MpHwcsdws
Ug+wJ5XSGNZLtO2Ph2y+3TwBF/eVAv0Q+L1B2/54CLECHknDXFXBeArQtv8qxPVMGmJOtZJxAB7C
QL/U7DbG1TVs7y6yg4hChmOyht9pNcMxhXARRhBVIa5HnV9r1eu4RsCFut1hfvbgmZPb+ejsGc58
NtzCmp0/wjqeHxNVxOI2jvPB/ZAPAVutgBWxG+izqew2tDt7bX5C/4Ua7nwGYlxx72naVaKKTgJ7
X7atx39breqMdEjTbsPhB5rM9emR5iPd8u6p2U6iityDYicHPdtBq5q+FlLanRD6jU2fN+6GfPCW
R001owE3XBV7KA+eFtOcbfu+kF9Zlm0aIfdfs+zVVyGqWAuJW33Jb+Ob7VJdbYao66FCVLEKcV70
NcJAqz5uFLertDv02iGuN8jXYySqyDPpkJieLJ8LWnGHIqRhd1CXsAxZ89Z+sE9iJarIslBLoY3A
oCFupLVof9CyO9j0JQjLkBQ4YuXB5q9DnKiiTb3PeOgcuU5yLRYdNO0TjNLFtAyZpT99GNk8hbFf
XCaqiIv0mdvlfNntdhHM/Ss1VakVVSE1+xTL+hfN5hd7WTzp4rK597BQ97QtCIIgCIIgCIIgCMJ/
yR8xnoWK3AkfWgAAAABJRU5ErkJggg==


--b2_e1c39bd3cc07c9a37a6ae66b52e2753d--


--b1_e1c39bd3cc07c9a37a6ae66b52e2753d--

The images get embeded with phpMailer so the source may looks slightly different but the width attributes will remain.

Only the first embedded image is affected

I did a testrun with Litmus and all other mails works as expected. Even Apple Mail 5 and Apple Mail 6

Is this a bug in Apple Mail or do I miss something?

Oeillade answered 30/10, 2013 at 18:43 Comment(0)
G
2

I realise this is a year old, but couldn't find a solution when searching. We've been having a similar problem (specifically in Apple Mail 7 and 8) and using inline CSS on the img tags has solved it.

e.g. instead of:

<div>
    <p>Embeded 1</p>
    <img src="embeded400x200.png" alt="" width="200" height="100" />
    <img src="embeded400x200.png" alt="" width="200" height="100" />
    <img src="embeded200x100.png" alt="" width="200" height="100" />
    <img src="embeded200x100.png" alt="" width="200" height="100" />
</div>

use:

<div>
    <p>Embeded 1</p>
    <img src="embeded400x200.png" alt="" style="width:200px;height:200px" width="200" height="100" />
    <img src="embeded400x200.png" alt="" style="width:200px;height:200px" width="200" height="100" />
    <img src="embeded200x100.png" alt="" style="width:200px;height:200px" width="200" height="100" />
    <img src="embeded200x100.png" alt="" style="width:200px;height:200px" width="200" height="100" />
</div>
Galactose answered 28/4, 2015 at 13:37 Comment(0)
K
1

your HTML is invalid, use a validation tool to fix the errors. specifically two of your divs are not closed and that is not going to go over.

I mailed myself the fixed version and read it in apple mail (version 7) with no problem so either this will fix your problem, or you need to attach the actual PHPmailer code you are using or its actual generated HTML.

here is a valid version of your XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mail subject</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
    <div>
        <p>Embeded 1</p>
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Embeded 2</p>
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Linked 1</p>
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Linked 2</p>
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
    </div>
</body>
</html>
Keelboat answered 8/11, 2013 at 20:29 Comment(6)
This was just a typo. My testmail was valid. Did you embed the images in your test or just linked to them? – Oeillade
@revaxarts the updated HTML is still invalid. I embedded the image, but why isn't linking the image desirable? – Keelboat
what exactly is invalid? embedded images is selected y the user of my newsletter plugin and I have to allow them to use embedded images (since it was always available) – Oeillade
ok, got the problems and change my initial post. Although it doesn'T solve the problem – Oeillade
@revaxarts I havn't been able to replicate the problem, but you should use images that are sized correctly for this application. You are wasting a lot of bandwidth sending images that are twice as large as they need to be. multiply that by how many people you are sending to and its quite substantial. you would be better served either linking images or scaling them to the correct size beforehand. you can easily scale them programmatically in PHP. – Keelboat
The problem is my templates are "retina ready" which requires images twice as big. It's a sales factor an I can't get rid of it. All templates work on all major clients on Apple Mail 5 and 6 but not on 7? And only the first images is shown in its original size so I guess it's a bug in Mail – Oeillade

© 2022 - 2024 — McMap. All rights reserved.