视网膜/高分辨率图像答案

【问题标题】：Retina/High-res Images视网膜/高分辨率图像
【发布时间】：2013-07-30 19:09:11
【问题描述】：

在创建网站/移动应用程序并适应视网膜/高分辨率屏幕（这需要两倍大小的图像）时，为什么只包含更大的图像不是一个好主意, 并将其大小缩小到一半，这样您就只有一张图像，在非视网膜图像上，它只会变得更小（图像中的细节量相同）。

这样您就不需要双倍的图像数量，因为您只有一张高分辨率图像，可以将其缩小到一半以适应两个屏幕？

【问题讨论】：

标签： css image web retina

【解决方案1】：

为什么只包含较大的图像不是一个好主意，并将其大小缩小到一半，这样您就只有一张图像，在非视网膜图像上，它只会变得更小（具有相同数量的细节在图片中）

这不是一个好主意，因为在人们没有高分辨率/视网膜移动设备的情况下，您只是浪费了大约 40% 的图像带宽。

根据流量的大小，额外带宽的成本会很快增加。

【讨论】：

【解决方案2】：

这完全取决于加载时间，Retina 图像需要更长的时间来加载。因此，在没有高分辨率的设备上，它们只会减慢速度......

【讨论】：

【解决方案3】：

三个原因：

保存带宽（永远不要下载比需要更大的图像）
节省性能（扩展需要一些 CPU 资源）
改进图像渲染（图像以接近原始尺寸渲染时看起来最好尽可能的大小。不确定是否有显着差异设备，但肯定在某些设备上）

【讨论】：

【解决方案4】：

这通常是为了节省资源。虽然保存两张图像而不是一张图像所需的空间并不重要，但保存额外分辨率的内存（在非视网膜设备上）确实很重要。此外，每次都必须使用 CPU 来调整图像大小。

【讨论】：

【解决方案5】：

JPEG：
获得 2 倍大小的图像并通过硬压缩保存（高达 20-30%）。 Retina 使用原始尺寸，其他设备使用半尺寸。这种方式可以节省（有时减少）图像的重量，并提高视觉质量。

示例： 1024 × 640, 99 Kb vs 2048 × 1280, 75 Kb
来源 (RU)： http://pepelsbey.net/pres/clear-and-sharp/

【讨论】：