Изображения Retina в HTML Подпись электронной почты Outlook 2016 - PullRequest
Новая
       49

Изображения Retina в HTML Подпись электронной почты Outlook 2016

0 голосов
/ 11 января 2019

Я пытаюсь добавить логотип компании в подпись в Outlook, но у пользователей iPhone логотип размытый. Я нашел статью, в которой предлагается использовать 2x изображение в качестве разрешения, но это не сработало, так как изображение с измененным размером внешнего вида перед отправкой.

Логотип в папке с файлами имеет размер 268 x 56 пикселей, но при отправке пользователю 134 x 28 пикселей я обнаружил его при проверке в инструментах разработчика Chrome.

https://litmus.com/blog/understanding-retina-images-in-html-email

Вот HTML-код для изображения. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML 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">
<META NAME="Generator" CONTENT="MS Exchange Server version 6.5.7036.0">
<link rel=File-List href="Standard Signature_files/filelist.xml">
<TITLE>Preview</TITLE>
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]--><!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
 </o:OfficeDocumentSettings>
</xml><![endif]-->

</HEAD>
<BODY>
        <!--[if gte vml 1]>
            <v:shapetype id="_x0000_t75" coordsize="21600,21600"
             o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
             stroked="f">
             <v:stroke joinstyle="miter"/>
             <v:formulas>
              <v:f eqn="if lineDrawn pixelLineWidth 0"/>
              <v:f eqn="sum @0 1 0"/>
              <v:f eqn="sum 0 0 @1"/>
              <v:f eqn="prod @2 1 2"/>
              <v:f eqn="prod @3 21600 pixelWidth"/>
              <v:f eqn="prod @3 21600 pixelHeight"/>
              <v:f eqn="sum @0 0 1"/>
              <v:f eqn="prod @6 1 2"/>
              <v:f eqn="prod @7 21600 pixelWidth"/>
              <v:f eqn="sum @8 21600 0"/>
              <v:f eqn="prod @7 21600 pixelHeight"/>
              <v:f eqn="sum @10 21600 0"/>
             </v:formulas>
             <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
             <o:lock v:ext="edit" aspectratio="t"/>
            </v:shapetype>

            <v:shape id="_x0000_i1029" type="#_x0000_t75" style='width:134px; height:28px; max-width:134px;'><v:imagedata src="Standard Signature_files/logo.png" o:title="logo" /></v:shape>
        <![endif]-->

        <![if !vml]><img src='Standard Signature_files/logo.png' style='width:134px; height:28px; max-width:134px;' v:shapes='_x0000_i1029'><![endif]>      

</BODY>
</HTML>

1 Ответ

0 голосов
/ 12 января 2019

Это работает в каждой версии Outlook. Он принимает изображение с разрешением 1200 пикселей и сжимает его до 600 пикселей. Ключом для Outlook является добавление <img width="600" />, или оно будет отображать изображение во всю ширину. Вы можете использовать встроенную таблицу стилей, чтобы современные почтовые клиенты могли выполнять другие задачи. Outlook игнорирует style="width: 600px; max-width: 600px;". 

<img width="600" alt="name" class="em_full_img" border="0" src="http://example.com/sampleimage.jpg" style="display: block; width: 600px; max-width: 600px; border: 0 !important; outline: none !important;" />

Имя класса просто направляет запрос @media ниже ширины cerain, чтобы расширить до 100%.

Удачи.

...