有时候在使用png小图标显示在网页中。PC端看似正常。但是当放在手机端可能就会感到明显的模糊感。今天就遇到了这个问题。当时就想到三种方法：1.使用字体图标（没有想要的图标）2.调整png图片大小，尝试使用css调整（可以解决）3.使用svg。（可以解决）最后实际比较之下使用了svg的方式。你可以在我的博客顶部看到。就是这个关机的按钮。
模糊原因
- 手机端屏幕、分辨率和电脑端不同。
因为手机端的屏幕是Retina屏幕。假设图标icon.png是16x16, 设备是2x的Retina屏，那么你得准备一个icon@2x.png，分辨率是32x32。iPhone 6 Plus和iPhone 6S Plus是3x的Retina屏，如果要兼容，就要更多的图。
- 所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。
模糊解决方法
- 调整png图片大小、使用svg。目前我只想到这两个方法，如果有其他更好的方法还望评论告知一下。
调整png图片大小
假设在开发环境pc端720（分辨率）PPI下，如果你要放一个16x16px的icon，并让其清晰的显示在移动端，保险起见你可以做成64x64px的画布大小，这样几乎所有ui分辨率都可以很清晰显示。然后html里进行设置图片宽高为16x16px。
- 缺点就是会增大图片的体积。过大的情况下就会影响网页加载速度。
使用svg
这个就没有什么好介绍的了。转换一下格式。直接引用，调整一下css大小就可以了。
<img class="img1" width="16px" height="16px" src="XXXXXXX"/>三种图像格式优点和缺点
SVG
SVG是一种矢量格式，除作为照片之外，适用于任何类型的图像。作为可缩放矢量图形来说非常实用。这就是设计师更频繁地使用它的原因。
SVG是一种无损格式 – 意味着它在压缩时不会丢失任何数据，可以呈现无限数量的颜色，最常用于网络上的图形、徽标可供其他高分辨率屏幕上查看。
SVG的优点
- 矢量格式可以随意调整大小
- 能够在代码或文本编辑器中创建简单的SVG渲染
- 从Adobe Illustrator或Sketch设计和导出复杂图形
- 可以访问SVG文本
- SVG很容易设计风格和脚本
- 现代浏览器支持SVG格式，并且面向未来
- 格式具有高度可压缩性和轻量级
- 由于基于文本的格式，因此适合搜索
- 支持透明度
- 允许静止或动画图像
SVG的缺点
- 设计SVG可能会变得复杂
- 不建议在某些降级的浏览器上呈现
- 电子邮件客户端支持有限
PNG
PNG，或便携式网络图形，是一种为网络设计的格式，提供JPG无法提供的东西 – 透明度。仅此一点就是为什么PNG比较受欢迎。
目前有两种类型的PNG – PNG-8和PNG-24。PNG-8使用有限的调色板，只有256种颜色，透明度更好，出口尺寸更小。PNG-24使用无限的调色板，保持透明度，但出口尺寸更大。两种PNG类型都具有无损压缩。
虽然PNG格式与GIF类似，但它们不支持动画。此格式最常用于图标，小型静止图像或任何需要透明度的图像。
PNG的优点
- 支持透明度
- 适用于带有文字的图像
- PNG格式可以很好的呈现徽标
- 搜索引擎的嵌入式文本说明
- PNG-8文件很小，体积很小
- 出口没有锯齿状边缘
PNG的缺点
- 对于大型文件（如图像），文件大小会明显增加
- 一些较旧的电子邮件客户端无法呈现它们
- 没有动画
- PNG-24文件可能过大。不太适合网络共享
JPG&JPEG
JPG使用有损压缩，并且在压缩期间不维护原始数据。每次重新保存照片并将其导出为JPG时，它都会降级。
JPG或联合图像专家组（JPEG - 我也是查过之后才知道有这个中文名字）可能是最知名的图像格式。这是大多数图像保存的默认选项，因为它几乎可以无限制地显示彩色照片。JPG还提供了选择图像压缩程度从0％（重压缩）到100％（无压缩）的能力。大多数设计师选择60％到70％的产品。图像在此压缩级别仍然看起来很好，但文件大小要小得多。
JPEG的优点
- 非常适合高色彩和摄影
- 易于减小文件大小
- 在电子邮件客户端中始终呈现
JPG&JPEG的缺点
- 没有透明度
- 文本会创建锯齿状边缘
- 没有动画
- 有损格式
- 没有自动搜索元数据，必须包含alt信息
到此你可能已经知道自己想要使用什么了。如果还是不确定。可以看看以下的几个问题，参考一下答案的建议。
注：我并非专业的设计师。不能确定如下建议的有效性。感觉还是自己实际比较来的实在······
问题&建议
你需要矢量或光栅格式吗？
矢量：SVG
光栅(Raster)：JPG或PNG
你需要透明度吗？
是：SVG或PNG
No：JPG
你使用的是高彩色图像吗？
是：JPG或PNG
No：SVG
这是一张大照片吗？
是的：JPG
No：PNG
图像是否包含文字？
是的：PNG
No：JPG
无损压缩对您来说很重要吗？
当然：SVG或PNG
No：JPG
是否需要更新和重新部署图形？
有考虑：SVG
No：PNG或JPG
你在用动画吗？
我的动画很炫酷：SVG
不炫酷：JPG或PNG
参考资料
segmentfault.com/q/101000000…
www.shejiku.net/svg-vs-png-…
baike.baidu.com/item/Retina…
zhidao.baidu.com/question/17…
baike.baidu.com/item/%E8%81…
