之前我一直以为网站上的图片只需满足加载迅速、视觉效果呈现良好这两点就够了，而当我花了一段时间研究Retina图片后，我发现Retina图片较普通图片真的有很大优势，它们能给访客提供更佳的浏览体验。

在今天这篇文章中，我将简要介绍一下Retina图片制作的必要性，以及怎样将普通图片……

优化成Retina图片……

PS.如果你觉得上面的两张图片看上去完全一样，这可能是因为你的手机（或其他设备）并不支持Retina图片。目前市场上的Retina设备有很多，如Surface平板、安卓手机、iPhone等。

设备屏幕是由成千上万个名为"piexl（像素）"的小方格组成的，如果你的设备屏幕很大，这些小方格可能会有数百万之多。为了渲染出一张图片，图片文件会对屏幕上的每个像素都作说明，比如以何种颜色、位置呈现。也就是说，像素的颜色和位置决定了该图像的呈现效果。

而图像分辨率也在很大程度上影响着图像在设备屏幕上的呈现效果，但这种影响可能跟你想的并不一样。J9九游会通常认为图片在显示设备上的分辨率和它在纸上的是一样的，但事实却并非如此。

下面是两个简单问答，有兴趣的不妨来自测一下：

1.哪种分辨率产生的图像文件尺寸最小？

A.72 DPI B.150 DPI C.300DPI D.以上3种都可以

2.在网页中以哪种分辨率保存图像，看上去质量比较高？

A.72 DPI B.150 DPI C.300DPI D.以上3种都可以

这两个问题的正确答案都是D。你选对了吗？

一直以来，我了解的是：72 DPI是网页的标准分辨率。所以我想，如果要让图片在Retina屏幕上呈现良好，我应该把这个数字翻倍，所以我选择了以150 DPI保存网站上的所有图片。而现在，我知道错了，大错特错！

DPI 并不会影响图片在网站上的呈现效果---因为DPI（Dots Per Inch，每英寸点数）是打印机、鼠标等设备分辨率的度量单位。看看下面三张以不同DPI保存的图片在显示设备上的呈现效果：

72DPI 149KB

150DPI 149KB

300DPI 149KB

它们看上去完全一样，文件大小也一样。如果你不相信的话，你可以下载它们，并在Photoshop中打开。这三张图片的文件尺寸相同，是因为同样数量的像素遵循着同样的指令。

换句话说，无论图片的DPI是多少，它在显示设备屏幕上完全不会有任何变化。但打印设备就不同了，下面是当我打印图片时，它们的呈现方式：

所有图片打印在一张纸上

从这J9九游会可以看出，分辨率表示的是图像数据的密集程度，它并不会影响图像的数据总量。这也引出了另一个概念---PPI（也叫像素密度）。不少人经常会把它和DPI混用，但其实它们的应用领域还是有区别的。PPI（Pixels per inch，每英寸像素），它是显示设备分辨率的度量单位。也就是说，PPI数值越高，则表示显示屏能以越高的密度显示图像。

所谓"Retina"是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度（参考下面两张图片）。它是在iPhone4发布时开始进入大众视野的。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

与普通显示屏不同，Retina屏不会通过增加屏幕尺寸来提高分辨率，而是通过提升屏单位面积内的像素数量（即PPI）来提升分辨率。而Retina设备在水平和垂直方向比普通设备多两倍的像素，这意味着过去容纳1个像素的空间，现在需要容纳4个像素了。1个分成4个，显然不够分啊，那些没有自己数据的像素，会尝试使用它们周围像素的数据，来判定它们应该显示什么颜色（颜色近似选取），于是，在普通设备上正常显示的图片在Retina设备上会给人一种模糊的感觉。为了提高Retina屏幕用户的浏览体验，J9九游会需要面向Retina设备进行图片优化。

Retina 398KB

Not Retina obvi

为网站生成二倍像素尺寸的图片。以1600*400px的J9九游会首页Banner图为例，如果你想让这张图片在Retina屏幕下达到应有的显示分辨率，你只需使用该图片的源文件导出一张清晰的3200px*800px图片（Retina图片的像素横向和纵向上皆是原图的2倍），并以原名@2x来命名（如果原图名为"image.png"，二倍命名为"image@2x.png"）。由于使用了Retina.js，在Retina设备上浏览网页时，它会自动搜索图片当前目录下是否存在命名为"image@2x.png"并替换原图。这样一来，访客就可以看到清晰的图片了。

但这种方式只适用基于CSS background-image的图片 。

如果是<img>标签就不能用这种方法了 ，这时可以使用 src 属性。 src 属性可以指定为一个原始尺寸的图片，在视网膜屏幕下则可以使用 src 设置一个或多个尺寸的图片；

还有一种方法 ——picture元素。picture 元素包含一系列 source 子元素后跟着需要的<img>元素。source 元素原理和 video 元素的子源类似。

每个源必须有一个 srcset 属性，可选属性包括 meida 、sizes 和 type 。 source 元素上的 sizes 和 srcset 的使用和<img>上完全一样。

标准的用法如下：

也不一定。对于一些简单的Logo、图标等，如果你有SVG格式的，你可以直接使用，因为它们可以任意缩放且不影响图像清晰度。