Bootstrap 3根据设备分辨率嵌入图像大小

Question

我是Bootstrap 3的新手，正在构建我的personal website。我想在网站上包含我的电子邮件，但不是纯文本，以防止垃圾邮件。我认为嵌入一个图像是合理的，但不幸的是它在我的iPhone上看起来很模糊。

这是图片

我正在考虑一些解决方案：

1. 嵌入2x版本的图像并将其缩放为基于一半的尺寸 在设备ppi（每英寸像素数）上
2. 决定根据设备ppi
加载此图像的1x和2x版本
3. 希望垃圾邮件不关心并以纯文本格式留下我的电子邮件

如何为高分辨率屏幕优雅地调整图像尺寸，我该怎么办？

Answer 1

使用可在Retina显示屏上很好地缩放的SVG图像格式

Answer 2

在此背景下使用此图片。

<div class="emailID"></div>

.emailID{
   background-image:url('myemail.png');
   width:100px;
   height:20px;
   background-repeat:no-repeat;
   background-size: 100% auto;
}