随着手机硬件和网络的发展，移动端已经成为获取流量的重要途径，例如App端嵌入的H5页面，SSR为基础的移动端站点，各种类型的小程序等，这些mobile h5的载体都具有一些共性限制：1、网络流量会给用户带来花费成本；2、用户碎片化阅读，对首屏等待的忍耐度低；3、载体的性能受限，往往给予前端的性能空间较小。这些共性导致移动端必须追求性能的极致利用，给用户接近原生App的体验，进而获得用户的青睐。为了实现前端的性能优化，需要关注的方面也特别多，今天这篇文章主要关注图片资源在生产全链路的优化，包括内容生产，内容存储，内容C端展示等环节，很多性能优化也是要依据具体场景来实现，小编也希望通过这种更加具体的方式给大家一些有益的启发。
简单勾画下故事背景
1、内容生产平台-基于富文本编辑器的发文后台。作者通过富文本编辑器生产大量优质文章，文章嵌套大量优美的图片。这些文章最终存储到后台服务器，通过内容分发算法分发给到各端：移动端H5，App Hybrid H5，小程序端。
2、展示平台，常见平台是PC端，移动端，App内嵌。由于文章题材和形式的多样性和多变性，App端往往会将文章展示交给H5来承载或者部分区域承载，节约成本。移动端也是获得流量和APP分享承载的重要途径，也可以被其他平台引用（微信，头条等）。本篇文章也是主要针对这两个平台来介绍。
内容生产平台
对于提供给用户的编辑器工具，分为结构化和富文本两大类，前者模拟编辑器，功能精简，但是不灵活，用户使用有学习成本；后者自由度大，用户体验更好，相对实现难度和性能要求高。本文章的背景就是选择了富文本编辑器。
在这个环节，图片的优化主要集中在以下三点：
1、降低图片大小，选择合适的图片服务器
常见方式是图片格式选择、无损压缩、动图GIF限制大小等。小编这里主要提一下，图片存储服务的选择至关重要，需要考虑图片传输速度，稳定性，图片大小裁剪，水印，反盗链等，常见的图片服务平台会提供这些优秀服务，例如腾讯云，阿里云等，也可以自己去搭建。
2、选择适当的图片尺寸
移动端的设备类型碎片化，屏幕大小不一致，因此不同的设备选择不同分辨率和尺寸的图片可以有效减少图片的体积。解决方式有以下两类：
a、后端根据请求 https 中的相关信息下发不同尺寸的图片资源地址。很多平台在内容生产阶段就会生产适配 PC，Pad，移动端，App的图片，缺点也明显，图片资源存储压力大，但是会带来一个意外的好处，当图片服务吃力时，可以动态的切换图片的尺寸和大小，减轻压力和加强容灾。
b、前端只去获取资源ID，由前端自己决定图片资源的尺寸类型和大小，这个定制能力依赖于图片服务的能力提供，常见能力是裁剪、分辨率压缩、水印、反盗链，开发者根据自己的场景来进行优化，相对灵活，优化上限也高。
3、提供丰富的预置优化信息
由于本文章的存储是采用富文本 HTML 的方式，因此在存储过程中，可以预先将图片的一些优化依赖信息存储起来，常见的有图片尺寸、长宽比、图片大小、图片资源ID、图片格式等。
在这里小编着重提一下图片的优化事项：合理利用 Exif 信息。
简单来说，Exif 信息就是由数码相机在拍摄过程中采集一系列的信息，然后把信息放置在我们熟知的 JPEG/TIFF 文件的头部，也就是说 Exif信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数，Exif 所记录的元数据信息非常丰富，主要包含了以下几类信息：
拍摄日期
拍摄器材（机身、镜头、闪光灯等）
拍摄参数（快门速度、光圈F值、ISO速度、焦距、测光模式等）
图像处理参数（锐化、对比度、饱和度、白平衡等）
图像描述及版权信息
GPS定位数据 \
内容生产阶段用户会上传大量带有这些信息的图片，特别是旅游，家居类文章内，其中需要关注的一点是拍照方向-Orientation参数。如果是前置摄像头、横向拍摄的图片，可以在存储时，将图片进行恢复，包括旋转，图片信息调整等，也可以在前端渲染时通过 css transfrom rotate 来进行3D变换调整，注意这个是在视图层调整，注意预留图片占据的空间（直接进行富文本内容渲染时，可以配合正则分析内容，提前插入转化的预留空间）。
展示平台
移动端H5在展示渲染阶段，优化方向比较多，主要集中在前端性能优化和用户体验优化（自己归纳的分类，主要代表优化的思考方向）。以下是小编寻找的一个文章，以此为例：包括图片滚动屏、目录、文章内嵌这三类图片资源展示方式。
1、前端性能优化-减少网络请求，降低图片网络传输体积
浏览器请求是有并发限制的，移动端网络速度也偏低，如果大量的图片并发会影响页面渲染时间和性能，过高的图片消耗也会给用户带来很大的时间成本和金钱成本，流量也是要花钱的。
a、雪碧图，又称精灵图，移动端展示图片的可视区域变小，可以在内容生产阶段，对文章内的图片进行分类优化，kb级别的图片转化成base64直接存储，中等体积的图片可以合并转换成雪碧图，这里主要关注所使用的图片服务合并时的图片质量的影响，不可影响图片本身的质量和格式。
b、字体库代替图标
介绍个大家比较熟知的 font-awesome 库，可以简单看下它的优势：
这里可以使用字体库将富文本编辑器中常见的标签图标、表情图标、文章图标、用户图标进行集成，可以提升图片资源的加载速度。
2、前端性能优化-降低图片体积大小，选择合适的图片格式
可以在渲染前，通过 UserAgent 等设备信息来确定展示的图片大小和格式，在图片生产阶段结合图片服务来实现。优先使用Webp的图片格式，其更优的图像数据压缩算法，能带来更小的图片体积，注意 IOS 的 webp 兼容问题。
在App Hybrid H5平台中，可以通过App端传回一些信息例如网络环境、图片缓存劫持信息进行优化。
3、前端性能优化-选择合适图片的尺寸，且保持统一的尺寸规则来尽可能复用图片网络缓存。
这里可能会有个误区，上面:point_up_2:的文章实际是拥有三个图片区域，三者图片重复，但是各自场景不同，展示方式不同。如果使用不同格式规则的图片会导致图片整体请求数（3倍）。
接下来介绍几个从用户体验角度进行有图片优化。 1、用户体验优化-图片懒加载 文章内所有图片同时加载就会很慢，可以只加载窗口内的图片，减少用户的等待时间。这里优先建议使用 IntersectionObserver API，可以有效减少监听 onScroll 事件来控制图片加载带来的性能消耗。 图片懒加载机制需要在原来的图片区域预留相同大小的空白图片，来避免目录锚点跳转的不准确问题，也避免图片加载后撑起内容宽度来带来的文章布局的变动。这个在App Hybrid H5环境中特别重要，一些混合嵌套场景和用户行为上报会引起不必要的麻烦。
2、用户体验优化-合理过渡，减少用户等待感 在渲染性能和加载速度遇到瓶颈后，可以通过合理加载过渡效果，提升用户的阅读体验，例如首屏骨架屏、非核心瓶颈模块的加载（用户头像、底部推荐信息，这些信息可以通过 JSBridge 等途径从App，微信小程序中获取），这些成本都不高，带来的收益确实巨大的。
3、用户体验优化-预加载 这里没有放到前端性能优化分类中，小编是如此思考的：预加载实际是对用户日常操作行为和路径进行分析，预估用户下一步可能的操作，进行适当预加载用户下一步可能使用的资源，这里和用户体验本身息息相关，反而和技术工程本身关系不大了。这个具体实施方法没有明确的准则，在项目前期实际需要大量的用户上报和埋点来进行分析和验证，如果有数据分析同学以专业的分析手段和科学理论来建立用户行为模型，可以很好的指导预加载机制的设计。
到这里《移动端-全链路图片资源优化》也接近尾声了，希望本文可以带给你有益的启发。
