如何让手机上的小logo看起来更清晰？答案

【问题标题】：How to make a small logo on mobile look sharp?如何让手机上的小logo看起来更清晰？
【发布时间】：2016-09-03 01:44:44
【问题描述】：

我的网站徽标大小为 300x50 像素。在桌面上看起来不错。但是当我在移动设备上打开我的网站时，它会变小并且看起来像边缘周围有像素一样模糊。

我怎样才能使它即使在很小的尺寸下也看起来很清晰？

【问题讨论】：

您使用的是什么移动设备？如果是 x2 比例的显示器，您将不得不使用更大尺寸的徽标，因为您的设备会将图像放大到首选尺寸，然后看起来就不是很清晰。
使用矢量图格式？
我已经阅读了一些，他们建议用户在 AI 或 Photoshop 上使用 Tracing 功能。我试过了，但没有用。不确定我做对与否。（我之前既没有使用过 AI 也没有使用过 Photoshop :( )

标签： graphics photoshop adobe-illustrator graphical-logo

【解决方案1】：

您的图像模糊问题可能来自在视网膜/HiDPI 设备上使用非视网膜或 HiDPI 图像。这意味着如果您希望 300x50 像素的图像在视网膜设备上看起来清晰，您需要使用基于矢量的图像（例如 SVG）或双倍（2x - 例如 iPhone6 - 600x100px）或三倍大小的图像（3x - 例如 iPhone 6加号 - 900x150 像素）

使用srcset。 Srcset 允许您将多个图像添加到一个 img 元素，从而允许支持它的浏览器为设备选择正确的图像。由于不支持srcset 的浏览器只是回退到src，所以没有风险。

<img src="myNormalImgForOldBrowsers.jpg" srcset="highResImg.jpg 2x, ultraHighResImg.jpg 3x" alt=" " />

在这个示例中，我使用了 jpg，但在 srcset 示例中声明的图像也可以很容易地使用 SVG

【讨论】：

【解决方案2】：

使用 SVG 而不是 Ico 格式。与 SVG 相比，Ico 格式有点 DIM

【讨论】：