1

我有一个问题一直萦绕在我的脑海中：我应该如何准备要在网站上使用的图像以做好视网膜准备？

是的，我一直在互联网上就这个话题花费数小时，但到目前为止我还没有找到一个“最终答案”。

例如，在这个线程中（链接：retina display 的图像大小），只提到我需要将尺寸加倍。但是分辨率呢？

实际情况：使用 Photoshop（或任何您的修复程序）创建尺寸为 400 像素 x 200 像素的图像，分辨率为 72 ppi。
我应该如何修改这个图像？

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

目标是选择图像并将它们显示在非视网膜和视网膜显示器上（即“普通”计算机/笔记本电脑、mac（两个版本，视网膜和非）、iDevices、Androids 等）

期待任何反馈:-)

4

3 回答 3

2

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

于 2013-04-12T14:19:44.107 回答
1

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

您感到困惑的是PPI。PPI 是 Pixels Per Inch，它只是衡量图片大小的指标，与显示尺寸相同。

一个不独立于另一个。

400x200 的图像在 72 ppi 显示器上占用的屏幕空间与在 144 ppi 显示器上的 800x400 图像占用的屏幕空间一样多。区别只是 144 ppi 的设备能够在一英寸的屏幕空间中容纳比 72 ppi 更多的像素。

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

于 2013-03-11T15:35:31.873 回答
0

有一个新的响应式图像HTML5 标准。截至 2014 年 7 月，它还只是浏览器的 beta 版本。但是Picturefill polyfill已经可用。

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

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />
于 2014-07-09T10:51:30.470 回答