Retina 显示屏中的像素化图像
Posted
技术标签:
【中文标题】Retina 显示屏中的像素化图像【英文标题】：Pixelated images in Retina displays 【发布时间】：2016-03-18 12:56:24 【问题描述】：我正在开发一个应用程序，其中我在所有设备中使用@1x 的图像（它们是照片，我无法获得它们的@2x 版本）。当 300x225 像素的图像以 300x225 点（即 600x450 像素）显示在 Retina 显示屏上时，我希望它看起来像在非视网膜设备中。但这不是我得到的。图像在视网膜设备上看起来更糟。
这是它在非视网膜设备中的外观：
这就是它在 Retina 设备中的外观：
好的，但是现在让我们看看当我稍微改变框架时它在 Retina 设备中的外观，例如到 301x225 或 299x225 像素。图像看起来好多了，它不是视网膜质量（当然），但它肯定看起来不那么像素化：
Apple 似乎使用不同的缩放算法，具体取决于它必须缩放图像的程度。如果它必须使用 2 的缩放因子，则使用与 1.99、2.01 或任何其他值不同的缩放插值。但为什么？在真实的 Retina 设备中，2.01 缩放的图像看起来比 2 缩放的图像要好得多。也许是为了强制开发人员包含视网膜图像？
您知道强制图像使用“更平滑”缩放插值方法的方法吗？我可以设置一个稍微不同的框架，这样它就不会是原始图像大小的两倍，但是......有更好的方法吗？我还尝试更改CALayer 的magnificationFilter 和minificationFilter，但在Retina 设备上图像仍然看起来更糟。
编辑：我一直在玩Photoshop，我可以说当缩放因子为2.0时，Apple使用最近邻，而当缩放因子不同时在 2.0 之后，使用 Bicubic 算法代替。我可以使用 Photoshop（使用 Bicubic）创建图像的 @2x 版本并将它们添加到我的应用程序中，但这会大大增加我的应用程序的文件大小。
【问题讨论】：
【参考方案1】：您可以使用最大的图像并将其指定为它的一半大小。所以上传图片（600x450），像<img src="blabla.jpg" style="width:300px;height:225px;" alt="" />一样使用
这是一篇描述视网膜显示和网页设计的好文章：http://designmodo.com/design-retina-displays/
【讨论】：
以上是关于Retina 显示屏中的像素化图像的主要内容，如果未能解决你的问题，请参考以下文章