Странное поведение со встроенными изображениями с высоким разрешением в Apple Mail 7.0

Я столкнулся с проблемой, когда изображения отображаются в собственном размере даже с атрибутом width:

Вот мой тестовый 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>

Вот скриншот из Apple Mail 7.0

введите здесь описание изображения

ИЗМЕНИТЬ Это необработанное тело письма:

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--

Изображения встраиваются с помощью phpMailer, поэтому исходный код может немного отличаться, но атрибуты ширины останутся.

Затрагивается только первое встроенное изображение.

Я проверил работу с Litmus, и все остальные письма работают должным образом. Даже Apple Mail 5 и Apple Mail 6

Это ошибка в Apple Mail или я что-то пропустил?


email apple-mail highdpi retina
person Xaver    schedule 30.10.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

ваш HTML недействителен, используйте инструмент проверки, чтобы исправить ошибки. в частности, два ваших div не закрыты, и это не пройдет.

Я отправил себе исправленную версию и прочитал ее в почте Apple (версия 7) без проблем, поэтому либо это решит вашу проблему, либо вам нужно прикрепить фактический код PHPmailer, который вы используете, или фактически сгенерированный HTML.

вот действительная версия вашего 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>
person Brad Allred    schedule 08.11.2013
comment
Это была просто опечатка. Моя тестовая почта была действительна. Вы вставили изображения в свой тест или просто связались с ними? - person Xaver; 09.11.2013
comment
@revaxarts обновленный HTML все еще недействителен. Я вставил изображение, но почему ссылка на изображение нежелательна? - person Brad Allred; 09.11.2013
comment
что именно недействительно? встроенные изображения выбираются пользователем моего плагина для рассылки новостей, и я должен разрешить им использовать встроенные изображения (поскольку они всегда были доступны) - person Xaver; 10.11.2013
comment
хорошо, есть проблемы и изменить мой первоначальный пост. Хотя это не решает проблему - person Xaver; 10.11.2013
comment
@revaxarts Мне не удалось воспроизвести проблему, но вы должны использовать изображения правильного размера для этого приложения. Вы тратите много трафика на отправку изображений, которые в два раза больше, чем они должны быть. умножьте это на количество людей, которым вы отправляете, и это довольно существенно. вам лучше либо связать изображения, либо заранее масштабировать их до нужного размера. вы можете легко масштабировать их программно в PHP. - person Brad Allred; 10.11.2013
comment
Проблема в том, что мои шаблоны готовы к сетчатке, что требует изображений в два раза больше. Это фактор продаж, и я не могу от него избавиться. Все шаблоны работают на всех основных клиентах Apple Mail 5 и 6, но не работают на 7? И только первые изображения отображаются в исходном размере, так что я предполагаю, что это ошибка в Mail. - person Xaver; 11.11.2013

arrow_upward
1
arrow_downward

Я понимаю, что этому год, но не смог найти решение при поиске. У нас была похожая проблема (особенно в Apple Mail 7 и 8), и использование встроенного CSS в тегах img решило ее.

например вместо:

<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 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>
person George Ayris    schedule 28.04.2015