给产品经理讲技术丨App开发中，关于图片资源不得不知的秘密

【文章摘要】相信广大的同学肯定希望自己的产品UI能够美美的，让用户们赏心悦目。要做到这一点，主要就靠咱们伟大的出的各种图片资源。小到应用程序的图标或者按钮，大到启动时的闪屏，无不是出自设计师之手。当图片被打包到程序中后，他们就被正式的赋予了为广大用户谋眼福的使命。

相信广大的产品经理同学肯定希望自己的产品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万像素）时，情况就更糟了。我们期望自己的图片可以占满用户的屏幕，但是即便把图片中的每一个像素都一一对应的填充到屏幕上，还是会有一半的像素没有内容，这种效果大家可以想象。

不过好在聪明的软件工程师们早就实现了一系列的方法来让大家避免陷入这种图片被“放大”或“缩小”后图片质量变差的窘境，这些方法被叫做“插值算法”。顾名思义，“插值算法”就是在原有的像素值基础上，插入或修改一些像素值，并尽最大可能保证原图的特征。当前比较流行的插值算法主要有“邻近插值”和“双线性插值”，具体的算法这里不再冗述，感兴趣的同学可以在网上随处搜到。下图为大家举个栗子，给大家直观的感受下效果。

通过上面两段的描述，我们可以看到，当图片的内容无法与屏幕上的像素点进行一一对应的时候，就会产生“缩放”，虽然当前有一些手段可以尽量的避免缩放对图片质量造成的影响，但显示效果或多或少都会收到影响，并且缩放的程度越大，效果损失的越严重。所以有的系统会提供另外的机制尽量避免“缩放”的产生，或者把“缩放”带来的副作用降低到最小。比如安卓系统就为应用程序的图片资源定义了一组文件夹，每个文件夹对应一种屏幕的像素密度/分辨率，在不同像素密度/分辨率的设备上从对应的文件夹中取图片资源，尽量的减少或避免“缩放”，进而最大化的还原设计师们的原始设计。

欢迎添加微信公众号：给讲技术