相信广大的产品经理同学肯定希望自己的产品 UI 能够美美的,让用户们赏心悦目。要做到这一点,主要就靠咱们伟大的视觉设计师出的各种图片资源。小到应用程序的图标或者按钮,大到启动时的闪屏,无不是出自设计师之手。当图片被打包到程序中后,他们就被正式的赋予了为广大用户谋眼福的使命。
然而,图片的大小是固定的,而使用图片的设备分辨率却千变万化。比如一张 1280×720 分辨率的全屏闪屏图片,可能会被加载到 1080P、720P、480P 甚至 320P 的设备上,除了 720P 的设备外,在其他三款设备上 1280×720 的图片都会产生缩放。我们都知道,图片的内容都是由像素组成的,比如 1280×720的图片由 921,600 个像素构成,720P 的显示设备屏幕上也正好是 921,600 个像素,这样图片的每一个点都可以与屏幕上的点一一对应,进而完美的呈现图片的细节。
480P 乃至 320P 的设备,他们屏幕上的像素点个数远远小于 921,600(480P 设备 38 万个像素点, 320P设备 15 万个像素点),屏幕上的像素无法做到与 1280×720 图片像素的一一对应,这种情况下,为了让低像素数的屏幕能够完全呈现高像素数图片的内容,图片的一些细节(像素)就会被丢弃,以 480P 的设备为例,1280×720 的图片就会被显示成 800×480 个像素,图片看起来被缩小了,也就是系统对图片进行了缩放。这种尺寸(分辨率)从大到小的缩放会丢失一些细节。
当 1280×720 的图片被加载到 1080P(207 万像素)时,情况就更糟了。我们期望自己的图片可以占满用户的屏幕,但是即便把图片中的每一个像素都一一对应的填充到屏幕上,还是会有一半的像素没有内容,这种效果大家可以想象。
不过好在聪明的软件工程师们早就实现了一系列的方法来让大家避免陷入这种图片被放大或缩小后图片质量变差的窘境,这些方法被叫做插值算法。顾名思义,插值算法就是在原有的像素值基础上,插入或修改一些像素值,并尽最大可能保证原图的特征。当前比较流行的插值算法主要有邻近插值和双线性插值,具体的算法这里不再冗述,感兴趣的同学可以在网上随处搜到。下图为大家举个栗子,给大家直观的感受下效果。
通过上面两段的述,我们可以看到,当图片的内容无法与屏幕上的像素点进行一一对应的时候,就会产生缩放,虽然当前有一些手段可以尽量的避免缩放对图片质量造成的影响,但显示效果或多或少都会收到影响,并且缩放的程度越大,效果损失的越严重。所以有的系统会供另外的机制尽量避免缩放的产生,或者把缩放带来的副作用降低到最小。比如安卓系统就为应用程序的图片资源定义了一组文件夹,每个文件夹对应一种屏幕的像素密度/分辨率,在不同像素密度/分辨率的设备上从对应的文件夹中取图片资源,尽量的减少或避免缩放,进而最大化的还原设计师们的原始设计。