如何为电子邮件签名优化此代码？

Question

我正在尝试使用 html 和我在 Photoshop 中设计的图像来创建电子邮件签名。我已将 PS 中的图像切片并将切片保存到我的电脑上。我现在想添加指向某些切片的链接并设法做到了这一点，但代码非常混乱和糟糕，所以我知道有更好的方法来做到这一点。我附上了下面的代码。

这些链接不是实际链接，目前只是占位符。我也知道我需要在外部保存图像并且会绕过它但现在只想尝试对代码进行排序。我也知道电子邮件签名的图像大小很大，所以我可以只在代码中添加“最大宽度”和“最大高度”来缩小它的大小，还是我必须单独更改每个切片的所有大小？

最后，这个拼接的 html 图像是否可以很好地显示为电子邮件签名，或者因为附加了很多图像，它会直接进入垃圾邮件吗？

<!DOCTYPE html>
<html>
<style>
  div {
    position: absolute;
  }
</style>

<head></head>

<body>
  <a href="" />
  <div style="background-image:url('img/img1.jpg'); left:0px; top:0px; width:2000px; height:122px"></div>
  <a href="" />
  <div style="background-image:url('img/img2.jpg'); left:0px; top:122px; width:124px; height:222px"></div>
  <a href="https://www.linkedin.com" />
  <div style="background-image:url('img/img3.jpg'); left:124px; top:122px; width:866px; height:198px"></div>
  <a href="" />
  <div style="background-image:url('img/img4.jpg'); left:990px; top:122px; width:1010px; height:102px"></div>
  <a href="" />
  <div style="background-image:url('img/img5.jpg'); left:990px; top:224px; width:246px; height:576px"></div>
  <a href="https://www.bing.com" />
  <div style="background-image:url('img/img6.jpg'); left:1236px; top:224px; width:630px; height:120px"></div>
  <a href="" />
  <div style="background-image:url('img/img7.jpg'); left:1866px; top:224px; width:134px; height:576px"></div>
  <a href="" />
  <div style="background-image:url('img/img8.jpg'); left:124px; top:320px; width:866px; height:24px"></div>
  <a href="" />
  <div style="background-image:url('img/img9.jpg'); left:0px; top:344px; width:122px; height:456px"></div>
  <a href="https://www.google.com" />
  <div style="background-image:url('img/img10.jpg'); left:122px; top:344px; width:540px; height:150px"></div>
  <a href="" />
  <div style="background-image:url('img/img11.jpg'); left:662px; top:344px; width:328px; height:456px"></div>
  <a href="" />
  <div style="background-image:url('img/img12.jpg'); left:1236px; top:344px; width:630px; height:42px"></div>
  <a href="" />
  <div style="background-image:url('img/img13.jpg'); left:1236px; top:386px; width:48px; height:414px"></div>
  <a href="https://www.bing.com" />
  <div style="background-image:url('img/img14.jpg'); left:1284px; top:386px; width:482px; height:56px"></div>
  <a href="" />
  <div style="background-image:url('img/img15.jpg'); left:1766px; top:386px; width:100px; height:414px"></div>
  <a href="" />
  <div style="background-image:url('img/img16.jpg'); left:1284px; top:442px; width:482px; height:42px"></div>
  <a href="" />
  <div style="background-image:url('img/img17.jpg'); left:1284px; top:484px; width:62px; height:316px"></div>
  <a href="https://www.linkedin.com" />
  <div style="background-image:url('img/img18.jpg'); left:1346px; top:484px; width:94px; height:90px"></div>
  <a href="https://www.facebook.com" />
  <div style="background-image:url('img/img19.jpg'); left:1440px; top:484px; width:60px; height:82px"></div>
  <a href="https://www.twitter.com" />
  <div style="background-image:url('img/img20.jpg'); left:1500px; top:484px; width:94px; height:90px"></div>
  <a href="https://www.instagram.com" />
  <div style="background-image:url('img/img21.jpg'); left:1594px; top:484px; width:92px; height:82px"></div>
  <a href="" />
  <div style="background-image:url('img/img22.jpg'); left:1686px; top:484px; width:80px; height:316px"></div>
  <a href="" />
  <div style="background-image:url('img/img23.jpg'); left:122px; top:494px; width:540px; height:30px"></div>
  <a href="" />
  <div style="background-image:url('img/img24.jpg'); left:122px; top:524px; width:2px; height:88px"></div>
  <a href="https://www.google.com" />
  <div style="background-image:url('img/img25.jpg'); left:124px; top:524px; width:418px; height:62px"></div>
  <a href="" />
  <div style="background-image:url('img/img26.jpg'); left:542px; top:524px; width:120px; height:276px"></div>
  <a href="" />
  <div style="background-image:url('img/img27.jpg'); left:1440px; top:566px; width:60px; height:234px"></div>
  <a href="" />
  <div style="background-image:url('img/img28.jpg'); left:1594px; top:566px; width:92px; height:234px"></div>
  <a href="" />
  <div style="background-image:url('img/img29.jpg'); left:1346px; top:574px; width:94px; height:226px"></div>
  <a href="" />
  <div style="background-image:url('img/img30.jpg'); left:1500px; top:574px; width:94px; height:226px"></div>
  <a href="" />
  <div style="background-image:url('img/img31.jpg'); left:124px; top:586px; width:418px; height:26px"></div>
  <a href="https://www.google.com" />
  <div style="background-image:url('img/img32.jpg'); left:122px; top:612px; width:406px; height:62px"></div>
  <a href="" />
  <div style="background-image:url('img/img33.jpg'); left:528px; top:612px; width:14px; height:188px"></div>
  <a href="" />
  <div style="background-image:url('img/img34.jpg'); left:122px; top:674px; width:406px; height:126px"></div>
</body>

</html>

Answer 1

电子邮件不是网页！绝对定位是一种高级技巧，需要大量技巧才能发挥作用，对于 Outlook，甚至 <div>s 都是有问题的。背景图片也很棘手（关于这些事情，SO 上有很多单独的答案）。

没有人知道所有的垃圾邮件规则，否则人们会破坏它们，但是，在邮件底部有这么多链接很容易被认为是垃圾邮件。这也是有风险的，因为它不正常。所以我建议不要使用这种方法。

您将需要生成 HTML table，其中包含 <img>s（或仅一张图像）。但是，最佳做法是在 HTML 中写出文本，而不是在图像中。我看不到图像，所以我不能给你示例代码，除了一些通用的可缩放图像：

<body>
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <a href="#">
          <img src="https://via.placeholder.com/600x200" width="600" style="max-width:100%;height:auto;" />
        </a>
      </td>
    </tr>
  </table>
</body>

如何为电子邮件签名优化此代码？

How do I refine this code for an email signature?

html

css

email

html-email