Сжатие встроенного изображения в почтовых клиентах, таких как Outlook - PullRequest
Новая
       176

Сжатие встроенного изображения в почтовых клиентах, таких как Outlook

1 голос
/ 24 сентября 2019

Я пытаюсь вставить изображение в HTML-файл, совместимый с электронной почтой.

Вместо добавления URL-адреса изображения, который может представлять угрозу безопасности, я вставляю изображение в тег, используемый вHTML-файл. 

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

Изображение, которое я встраиваю, кажется, уменьшается в размере до 80% от его исходного размера в почтовом клиенте.Ниже приведен скриншот того, как файл выглядит в браузере:

HTML-файл при просмотре в браузере HTML file when viewed in a browser

Ниже приведен скриншот того, как файл выглядит в почтовом клиенте(Outlook для Office 365):

HTML-файл при просмотре в почтовом клиенте HTML file when viewed in an email client

Как видите, изображение в почтовом клиенте кажется сжатым.Размеры приведены ниже: 

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

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

Может кто-нибудь подсказать, пожалуйста, как разместить изображение в контейнере?И почему изображение уменьшается в Outlook?

Вы можете сослаться на этот HTML-файл:

Диск Google: https://drive.google.com/open?id=1Me70-HIkLAB__BY_skOhyBXKDZj3lKVc

JSFiddle: http://jsfiddle.net/jv16m794

Заранее спасибо!

1 Ответ

1 голос
/ 25 сентября 2019

Я проверил это в Litmus и вижу эту проблему только в версиях Outlook с разрешением 120 точек на дюйм.Вот статья, в которой рассматриваются настройки экрана с разрешением 120 точек на дюйм и как это влияет на электронную почту - https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013/

Я протестировал пару вещей и нашел исправление.Измените заголовок вашего письма следующим образом: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...