二倍图和将一倍图直接放大一倍，两者有什么区别？

Question

ui导出的一倍图，二倍图，三倍图。
和我直接把含有一倍图的img标签的width和height扩大2倍，三倍。
有什么区别呢？

Answer 1

图片放大的时候，中间需要“凭空”插入一些像素点，这些像素点的颜色是浏览器根据一定的算法“猜测”出来，然后插入的。
不管浏览器用的是什么插值算法，终归都是浏览器的猜测，不一定能真正达到原版 n 倍图的效果。
比如我的头像，原版 512*512 的局部是这样的：

浏览器把 64*64 强行放大成为 512*512，局部是这样的：

。

Answer 2

我平时开发都是用三倍图，页面上设置的宽高是一倍图的宽高

思否之前有人问过这个问题

https://segmentfault.com/q/10...

Answer 3

质感是不一样的。

二倍图本身就是个大图，含有的图片元素（比如色彩点数等）就相对较多。

但一倍图，本身是个小图，如果强制扩大2倍，色彩还不够填充的，导致图片看起来还模块。

Answer 4

如果是矢量图，没有区别，如果是位图，就有区别了。

主要在于物理分辨率和逻辑分辨率的区别，拿 iPhone6s 举例子，横向的逻辑分辨率是 375，而其物理分辨率却是 750（2倍），现在的一些设备已经达到了 3 倍。

如果这时候，你要把一张实际分辨率为 100（宽）像素的图片在 375 的设备上显示为 100 ，那实际就是使用使用了 200 像素的位置来显示了只有 100 像素的图，会糊。