图片/动效资源测试

一、图片

1、前言

首先，图片从类型上分，可以分为 位图 和 矢量图。

位图：位图又叫点阵图或像素图，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息。因为这些点是离散的，类似于点阵，同时因为多个像素的色彩组合就形成了图片，所以叫这种图为点阵图或者位图。常见位图有 JPG、PNG、GIF 等格式。
矢量图：矢量图又叫向量图，它是由一系列计算机指令来描述和记录一幅图，一幅图可以解为点、线、面等组成的子图。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计等，而在前端中比较常用的矢量图有 SVG 等格式……
然后，按压缩划分，可以将图片分为 无损压缩 和 有损压缩。

无损压缩：无损压缩是对文件本身的压缩，使图片占用的存储空间变小，并且不会损害图片的质量。常见无损压缩有 PNG 等。
有损压缩：有损压缩是对图像本身的改变，会对图片质量造成损害，随着压缩次数越来越多，那么图片质量会越来越差。常见有损压缩有 JPG 等。
最后，在计算机中，像素是用二进制来表示的。不同图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，那么它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。

2、图片格式

图片资源有很多格式，下面具体介绍一下各类型图片格式内容与实用场景

1.jpeg是什么

关键字：有损压缩、体积小、加载快、不支持透明
简要介绍：
JPEG/JPG 格式，是应用最广泛的图片格式之一，特点如下：

JPEG/JPG 采用特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比，因此它的压缩文件尺寸较小，下载速度快，成为互联网最广泛使用的格式。
JPEG/JPG 因为属于有损压缩，所以当压缩级别逐渐增大的时候，图片质量会逐渐损耗，所以压缩要适当。
适用场景：
大的背景图
轮播图
Banner 图

2.Png是什么

关键字：无损压缩、质量高、体积大、支持透明
简要介绍：
PNG（可移植网络图形格式）是一种无损压缩的高保真的图片格式，它的压缩比高于 GIF，支持图像透明，可以利用 Alpha 通道调节图像透的明度。

适用场景：
小的 Logo，颜色简单且对比强烈的图片或者背景。
颜色简单、对比度强的透明小图。

3.Gif是什么

关键字：支持动画
简要介绍：
GIF 格式，不仅仅支持静止图片，也可以支持动画，并且支持透明背景图像，适用于多种操作系统，体积很小，网上小动画很多是 GIF 格式。但是色域不太广，只支持 256 种颜色，这意味着颜色种类少。

适用场景：
动图

4.Svg是什么

关键字：文本文件、体积小、不失真、兼容性好
简要介绍：
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式，是可缩放的矢量图形。与 JPG、PNG、GIF 等位图不同，SVG 可以直接用代码来描绘图像，并通过任意文字处理工具打开 SVG 图像，通过改变部分代码来使图 像具有交互功能，并可以随时插入到 HTML 中通过浏览器来观看。

            SVG 格式的图片可以任意放大图形显示，并且不会损失图片质量；SVG 格式可编辑和可搜寻；SVG 格式平均来讲，比 JPG 和 GIF 格式文件要小，并且下载也比较快。

            SVG 文件通常是极小的，但是当图形的复杂度变高的时候，SVG 文件大小会随之上升，因为 SVG 在渲染的时候需要比像素图更多的计算能力，这也意味着性能的损耗。所以在 Logo 等图上，应尽可能简洁。

适用场景：
SVG loading 效果图

5.总结

6.png与jpg区别

     最通用的目前主流为jpg与png

可以看到同样是方形图片底图，内部画了个圆形，png与jpg的区别就是png可以透明背景，但是jpg不行。
马赛克覆盖的边角区域就为png图片的透明区域，展示出来的内容就是一个圆形，而jpg是方里包着圆。
上方介绍无损与有损压缩时会说jpg为有损压缩，那么我们为什么还会使用jpg：

一般情况下用png。但是如果说这张图没有空白区域，图片颜色很多，用png怎么都压缩不到限制大小时，就会采用jpg图片。

市面上的压缩软件可以把jpg压的很小 (正因为是有损压缩才能足够小，一般质量也可以接受)，png就无法压到太小了。

7.为何不适用gif与svg

gif图片：
gif图也是动效图，但是如果压缩到很小，会很模糊，不太实用现有的实际场景。
svg图片：
svg因为设计未运用到实际场景中。
在我们实际工作中会运用到png与jpg图片格式。

8.图片层级叠加

图片如何展示与叠加
在页面布局内，可以理解把图片放在一个容器内，不同的容器可以配置不同的层级进行展示。

二、动效

在活动内常用的动效资源有lottie与svga两种，下面分别看一下具体内容是什么～

1、Lottie是什么

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

1.Lottie实现原理

设计师把一张复杂的图片使用多个图层来表示，每个图层展示一部分内容，图层中的内容也可以拆分为多个元素。拆分元素之后，根据动画需求，可以单独对图层或者图层中的元素做平移、旋转、收缩等动画。

2.lottie优点

Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：

动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；

前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；

设计制作动画，前端展现动画，专业人做专业事，分工合理；

卖家秀即买家秀，还原程度百分之百；

使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。

2、SVGA是什么

SVGA是跨平台开源动画格式，兼容iOS/Android/Web。SVGA操作简单，性能优良。同时，它使得动画开发分工明确，专注于自己的领域，大大降低了动画交互的沟通成本，提高了开发效率。动画设计师专注于动画设计，通过工具输出SVGA动画文件，集成SVGA Player后，可以直接供开发工程师使用。

SVGA与Lottie的不同之处是，Lottie在Player层中完全实现了所有After Effects逻辑，而SVGA不需要这个逻辑。因此，SVGA也可以支持Flash。实际上，SVGA所做的事情非常简单。转换器负责从Flash或AE源文件中提取所有动画元素(位图，矢量)，并在时间轴中导出每个帧的表示(位移，缩放，旋转，透明度)。播放器负责将这些信息恢复到画布上。

svga最后在页面上会生成canvas

3、canvas是什么

Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象的“子级”。

4、svga与lottie使用场景

现在新活动都是采取lottie进行开发，老活动采用svga

原因：因为svga在鸿蒙系统手机内卡顿效果明显所以后续开发采用lottie进行开发

5、Cdn是什么

概念：

cdn(内容分发网络)是一种通过互联网相互连接的电脑网络系统，当用户向cdn链接请求资源时，cdn会利用最靠近用户的服务器来给用户返回资源。

作用：

使用cdn能实现用户不需要在项目中通过npm下载其他资源（如第三方库），直接通过请求cdn服务器，服务器返回后即可使用，这样就减小了打包时包的大小，项目的首屏加载也能过更快。

一般来说资源都是通过cdn的方式进行加载。

6、渲染模式

上面的内容提到了svga会生成canvas的渲染模式，但是有时候前端同学会采用其他方式进行渲染，如svg。

svg与Canvas区别：

canvas可以看做是一个画布，其绘制出来的图形为标量图。可以在canvas中引入jpg或png这类格式的图片。在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。

而svg，所绘制的图形为矢量图，不能引入普通的图片，因为矢量图的不会失真的特点，在项目中我们会用来做一些动态的小图标。这个特点也很适合被用来做地图，百度地图就是用svg技术做出来的。

在使用svg时可能会出现一些机型动效适配的问题，如下视频，后续修改成canvas渲染模式解决了此问题。

三、资源测试方法

因为资源通常都是通过cdn的方式进行请求，所以测试过程中需要对接口返回的cdn字段进行测试。

1、资源正确性

    需测试cdn下发的资源内容正确，前端可解析cdn地址内资源内容进行展示

    注意事项：图片是否会产生压缩/放大/偏移等问题，替换其他cdn资源是否可以被解析，不同分辨率图片展示（如果展示入口固定ui给的资源与原始资源分辨率不同时会出现偏差）

    测试方法：下发正确cdn资源，mock替换其他cdn资源

2、资源错误 兜底策略

    需测试资源错误时，前端有对展示内容的兜底策略

    注意事项：资源错误或接口请求失败与cdn地址空白时，前端对资源位置的兜底图处理与不会发生异常情况（如果cdn的资源空白或者解析错误，是可能造成客户端crash问题）

    测试方法：弱网或mock测试

3、资源加载

  需验证资源加载过程中的耗时与异常情况

  注意事项：耗时 请求一个资源接口耗时过高

                    前端未获取到资源时 是否重复请求这个接口出现死循环（我们不能依赖服务端的资源一定配置或者传输正确）

4、适配

   需适配全面屏/非全面屏/高端机/低端机

   注意事项：前端与客户端实现功能时采用的组件还是单独编写的方法都可能会对系统与机型有不同的处理方式。

                     图片可能会导致对于某些机型与低端机的图片位置处理存在偏差。

                     动效可能在低端机或者特定机型时会出现幻灯片与闪屏的情况。

   现象：因为机型的屏幕大小的原因，部分设备会出现展示距离变动从而压缩展示区域导致展示内容重叠（布局方式可以参考上方层级叠加内容，在特殊的机型上需要采取不同的布局方式）

5、性能

   需适配全面屏/非全面屏/高端机/低端机

   注意事项：图片资源过大导致资源加载过慢会增加用户负反馈。

                     动效资源可能会导致直观的卡帧。

                     需要问清资源的保存方式与保存位置，如果图片或动效资源保存在客户端本地，还可能会存在内存泄露与内存溢出的情况，针对需求，需要单独进行性能测试。