Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Strange behavior with embedded highDPI images in Apple Mail 7.0

Tags:

email

highdpi

retina

apple-mail

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?

like image 480
Xaver Avatar asked Oct 30 '13 18:10

Xaver

People also ask

Why are images not showing in Apple Mail?

If images are not showing in Messages on your iPhone, make sure that “Load Remote Images” option is enabled in Mail section of iPhone Settings. Open Settings on your iPhone, scroll down and tap on Mail. On the next screen, scroll down to “Messages” section and toggle ON Load Remote Images option.

Why are images not loading in Mail?

There are three main reasons recipients may not see images in your emails: their email client is blocking externally hosted images, their email client doesn't support background images, or a firewall is blocking access to our image servers.

How do I view images in Apple Mail?

You can show pictures of senders when you view their email messages, if their pictures are available in the Contacts app. The pictures are shown only to you; they aren't sent with your messages. In the Mail app on your Mac, choose View > Show Contact Photo.

1 Answers

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>
like image 149
George Ayris Avatar answered Sep 28 '22 00:09

George Ayris
Sign in to Comment

Related questions

mailR: Sending mail to multiple addresses from shiny
How to read OTP from gmail in protractor?
Bad Google Postmaster Domain Reputation
Is there any wiki engine that supports page creation by email?
What is the best mechanism for storing authentication settings in a WinForms app
Whats the best way to Programmatically Process New Email Messages and Store Attachments
Facebook emails always return null through FQL and RestFB
Best way to test high-volume SMTP email sending code?
PHP UTF8 mail gets garbled on iPhone mail app
CSS support in the Evolution e-mail client
Rails3 and Heroku: Sending Emails?
How to link block level elements in html e-mails?
Embedding Images to Emails
Android: How to send an image as email attachment from application?
Email responses to tracked crm email not tracking correctly
send a rendered view as an email rails
how to avoid email header Received: from unknown and email going to spam
html email with inline images not rendered properly in iphone
spam email by using email library in codeigniter
What is wrong with WebMail.Send when it comes to multiple recipients?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!