时间戳

首页 > 解决方案 > HTML 电子邮件签名 Outlook 2016 中的视网膜图像

html - HTML 电子邮件签名 Outlook 2016 中的视网膜图像

问题描述

我正在尝试将公司徽标添加到 Outlook 的签名中，但 iPhone 上的用户徽标模糊不清。我发现一篇文章要求使用 2x 图像作为分辨率，但在发送前不能作为 Outlook 调整大小的图像。

文件夹中的徽标是 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>

标签： htmloutlookvml

解决方案

这适用于每个版本的 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%。

祝你好运。

推荐阅读