CODEWITHSUNDEEP
htmlcssoutlookhtml-emailemail-client
Aman Kimothi
Aman Kimothi

Reputation: 25

Embedded image shrinking in email clients like Outlook

I'm trying to embed an image in an email compatible HTML file.

Instead of adding the image URL, which can pose a security threat, I'm embedding the image in the tag used in the HTML file.

<img alt="" border="0" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA............">

The image which I embed seems to reduce to 80% of it's original size in the email client. Following is a screenshot of the how the file looks in a browser :

HTML file when viewed in a browser HTML file when viewed in a browser

Following is a screenshot of the how the file looks in an email client (Outlook for Office 365) :

HTML file when viewed in an email client HTML file when viewed in an email client

As you can see the image seems to shrink in the email client. The dimension are given below:

Original     : 800px X 600px
Email client : 640px X 480px

Width  = 800 x 0.8 = 640px
Height = 600 x 0.8 = 480px

Can someone please suggest how to fit the image in a container? And why the image is shrinking in Outlook?

You can refer this HTML file :

Google Drive : https://drive.google.com/open?id=1Me70-HIkLAB__BY_skOhyBXKDZj3lKVc

JSFiddle : http://jsfiddle.net/jv16m794

Thank you in advance!

Upvotes: 2

Views: 599

Answers (1)

user2958788
user2958788

Reputation:

I've tested this in Litmus and I'm only seeing this issue in 120dpi screen zoom versions of Outlook. Here is an article going through the 120dpi screen settings and how it affects email - https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013/

I've tested a couple of things and found the fix. Amend the head of your email with this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       
<!--[if gte mso 9]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]-->
   </head>

Upvotes: 2

Related Questions