准备图像准备视网膜（网络）

Question

我有一个问题已经出现在我的脑海中已经好几次了：我应该如何准备我将在网站上使用的图像准备好视网膜呢？

是的，我在这个主题的互联网上花了好几个小时，但到目前为止，我还没有找到“最终答案”。

在这个帖子中，例如（链接：image size for retina display），只提到我需要加倍尺寸。但是这个决议呢？

现实生活中的情况：使用Photoshop（或其他任何修复）以400px x 200px的尺寸创建图像，分辨率为72 ppi。
如何修改此图像？

• 800 x 400px，72 ppi（只需调整大小，两次）
• 800 x 400px，144 ppi（尺寸和分辨率乘以2）
• 400 x 200px，144 ppi（分辨率的两倍）
• 400 x 200px，246 ppi（相同尺寸，更高分辨率 - 我从设计ipad壁纸的一些教程中获得了数字246）
• ......等等......

目标是选择图像并在非视网膜和视网膜显示器上显示它们（即'正常'计算机/笔记本电脑，macs（包括版本，视网膜和非视网膜），iDevices，Androids等等）

期待任何反馈： - ）

Answer 1

您可以使用Retina.js以更高分辨率的版本替换图像，但前提是用户设备配备了视网膜显示器。

Answer 2

您链接的问题是正确的。您需要将图像的大小加倍才能使分辨率加倍。

你对此感到困惑的是PPI。 PPI是每英寸像素数，它只是衡量图片的大小，与显示尺寸相同。

一个人不是独立的。

400 x 200的图像在72 ppi显示屏上占用的屏幕空间与144 ppi显示屏上的800x400图像相同。不同之处在于144 ppi设备能够在一英寸的屏幕空间中容纳比72 ppi更多的像素。

因此，通过将72ppi图像的分辨率加倍，您确实确保它看起来相同/占用相同数量的屏幕空间。

Answer 3

有一个新的响应式图片HTML5 standard。截至2014年7月，它仅在beta builds of browsers。但Picturefill polyfill已经可用。

This article很好地解释了不同的用例。但你想要的只是为高分辨率（例如'视网膜'）显示提供另一种图像：

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />