准备视网膜就绪（web）的图像

我有一个问题已经在我脑海里想了好几次了：我应该如何准备好我将要在网站上使用的图像，以便为视网膜做好准备

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

例如，在这个线程（link:）中，只提到我需要将维度加倍。但决议如何

真实情况：图像是使用Photoshop（或任何您的修复程序）创建的，尺寸为400px x 200px，分辨率为72 ppi。
如何修改此图像

• 以72 ppi的速度运行800 x 400像素（只需调整大小，乘以2）
• 144 ppi时的800 x 400px（尺寸和分辨率乘以2）
• 400 x 200像素，144 ppi（仅为分辨率的两倍）
• 400x200px，分辨率246ppi（同样的尺寸，更高的分辨率——我从一些设计ipad壁纸的教程中得到了246）
• …等等？？

目标是选择图像并将其显示在非视网膜和视网膜显示器上（即“正常”计算机/笔记本电脑、Mac电脑（两种版本，视网膜和非视网膜）、iDevices、Androids等）

---

期待任何反馈：-）

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

你所困惑的是PPI。PPI是每英寸的像素数，它只是一个图像大小的度量，与显示尺寸相同

一个不是独立于另一个的

400x200图像在72 ppi显示器上所占屏幕空间与在144 ppi显示器上所占800x400图像所占屏幕空间相同。不同之处很简单，144 ppi设备能够在一英寸的屏幕空间中容纳比72 ppi更多的像素

---

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

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

有了新的响应图像。截至2014年7月，它还只是一个阶段。但是polyfill已经可以使用了

很好地解释了不同的用例。但这里您需要的只是为高分辨率（如“视网膜”）显示器提供一个替代图像：

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

---

你好，卡米，谢谢你对我的问题发表评论。我个人仍然能够掌握正确的想法，但是我想我会继续链接，接受你的答案。我仍然怀疑72ppi上的400x200px是否会像正常屏幕上的144ppi一样好（即“非视网膜”），但当它转移到视网膜屏幕上时，我们会看到脆度和其他方面的差异。苹果和他们的产品确实改变了游戏规则，但它也确保了我们为了让客户满意而加班加点--网站应该像荷马的，充满了动画GIF:D