【官方教程】智能小程序图片资源优化方案

[Muzzzhi]

【官方教程】智能小程序图片资源优化方案有哪些？快来看一下吧~

[TheThingX]

稳坐沙发前来围观

[WiSan]

啥官方教程？？？

[Muzzzhi]

一个页面性能的好坏很大程度上会影响到用户的体验，而图片资源的处理在页面性能优化中有着举足轻重的作用。
前置知识
二进制位数与色彩
在计算机中，一般用二进制数来表示像素。在不同的图片格式中，像素与二进制位数之间对应的关系是不同的。一个像素对应的二进制位数越多，它能表示的颜色种类就丰富，成像效果也就越精致，图片所需的存储空间相应也会越大。

优化图片资源的方式有以下几种。

一、压缩图片
图片压缩分为有损压缩和无损压缩。

有损压缩
有损压缩指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量（即图片被压糊了），并且这种损失是不可逆的。常见的有损压缩手段是按照一定的算法将临近的像素点进行合并。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的体积。例如 jpg 格式的图片使用的就是有损压缩。

无损压缩
无损压缩指的是在压缩图片的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的体积。例如 png、gif 使用的就是无损压缩。

各种图片格式的压缩类型

压缩工具推荐
tinypng 免费、批量、速度快https://tinypng.com/
智图压缩 免费、批量、好用https://zhitu.isux.us/
squoosh 在线图片压缩工具https://squoosh.app/
compressor 支持 JPG、PNG、SVG、GIFhttps://compressor.io/

二、选择合适的图片格式
1、JPEG / JPG
JPEG 是由 Joint Photographic Experts Group 所开发出的一种图片。它最大的特点是 有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。另一方面，即使被称为“有损”压缩，JPG 的压缩方式仍然是一种高质量的压缩方式：当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质。此外，JPG 格式以 24 位存储单个图，可以呈现多达 1600 万种颜色，足以应对大多数场景下对色彩的要求，这一点决定了它压缩前后的质量损耗并不容易被我们人类的肉眼所察觉。
优点
能够轻松地处理 1600 万种颜色，可以很好地呈现色彩丰富的图片。JPG 有损压缩，支持极高的压缩率，可以大大的减少图片的体积，一般图片用 60%级别比较合适，如果选择大于 75%的压缩等级，则会使图片有明显的质量下降。无兼容性问题，所以开发者可以放心随意使用。

缺点
JPG 有损压缩，在轮播图和背景图的展示上确实很难看出破绽，但当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显。因此不适宜用该格式来显示高清晰度和线条感较强的图像。
不支持对有透明度要求的图像进行显示。

使用场景
JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPEG 图片经常作为大的背景图、轮播图或预览图出现。

2、PNG
PNG（可移植网络图形格式）是由 W3C 开发的图片格式，是一种无损压缩的高保真的图片格式。它同时支持 8 位和 24 位，这里都是二进制数的位数。按照我们前置知识里提到的对应关系，8 位的 PNG 最多支持 256 种颜色，而 24 位的可以呈现约 1600 万种颜色。
PNG 图片具有比 JPEG 更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。它弥补了上文我们提到的 JPEG 的局限性，唯一的缺点就是 体积太大。
优点
无损压缩、完全支持 alpha 透明度、可以重复保存且不降低图像质量。

缺点：体积太大

应用场景
PNG 在处理线条和颜色对比度方面的优势，主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。
当你追求最佳的显示效果(详情展示图、图片有放大需求、摄影作品等)，并且不在意存储大小或所需带宽时，可以使用 PNG-24
为了避免文件体积过大的问题，我们一般不用 PNG 去处理较复杂的图像。当我们遇到适合 PNG 的场景时，也会优先选择更为小巧的 PNG-8
支持透明度处理，透明图片可选择使用 PNG。

3、WebP
WebP 是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式 VP8。

优点
支持有损压缩和无损压缩、占用体积小、可支持透明度

缺点
兼容性不好，移动端 IOS 系统基本不支持。

4、GIF
GIF 是一种最多支持 256 种颜色的 8 位无损图片格式。

优点
支持 256 种颜色，文件体积通常都很小、支持透明度

缺点
对于多颜色或者摄影图片的展示无能为力。

应用场景
支持动画，适合去展示一些无限循环的动画，比如图标、表情、广告栏等。对于一些只有简单色彩的图片非常合适。

5、Base64
一种基于 64 个可打印字符来表示二进制数据的方法。将图片转换为 base64 编码字符串 inline 到页面或 css 中。

优点
减少网络请求、对于动态实时生成的图片无需将图片存储在服务器占用服务器资源

缺点
只适于小图。若需要频繁替换的图片需要整个代码替换，可维护性低。

业务场景
Base64 是作为小图解决方案而存在的。
Base64 编码后，图片大小会膨胀为原文件的 4/3（Base64 编码原理）。如果我们把大图也编码到 HTML 或 CSS 文件中，后者的体积会明显增加，即便我们减少了 HTTP 请求，也无法弥补这庞大的体积带来的性能开销。也就是说我们牺牲的渲染性能大于资源请求性能，这样做不太值得。

6、SVG
SVG 严格来说应该是一种开放标准的矢量图形语言。

优点
可缩放,可支持无限放大、可编程、减少网络请求

缺点
不是所有的浏览器都支持 SVG，IE8 和早期版本都需要一个插件。复杂的图片会降低渲染速度(只支持小图)。

使用场景
SVG 是文本文件，既可以像写代码一样定义 SVG ，把它写在 HTML 里、成为 DOM 的一部分。用的比较多的就是 iconfont。可以通过设置模块的 fill 属性轻松适配图标的换肤功能，并通过 font-size 调节其大小。

三、使用 CDN 图片
CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。
基本原理
CDN 的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

基本思路
CDN 的基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN 系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度。

CDN 的优势
CDN 节点解决了跨运营商和跨地域访问的问题，访问延时大大降低；
大部分请求在 CDN 边缘节点完成，CDN 起到了分流作用，减轻了源站的负载。

四、图片懒加载
页面启动只加载首屏的图片，当用户滚动到预览位置时，在进行图片数据的请求。

明显减少了服务器的压力和流量，也能够减小浏览器的负担。
防止并发加载的资源过多而阻塞 js 的加载。
不会浪费用户的流量。

原理
暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 data-src 里面，等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载。

七、渐进式图片
在高画质图像加载完之前会先显示低画质版本。低画质版本由于画质低、压缩率高，尺寸很小，加载很快。在两者之间我们也可以根据需要显示不同画质的版本。渐进式图片可以让用户产生图片加载变快的印象。用户不再盯着一片空白区域等待图片加载，而能看到图像变得越来越清晰，这样对用户体验也是友好的。

八、雪碧图
雪碧图，CSS Sprites，国内也叫 CSS 精灵，是一种 CSS 图像合成技术，主要用于小图片显示。

浏览器请求资源的时候，同源域名请求资源的时候有最大并发限制，chrome 为 6 个，就比如你的页面上有 10 个相同 CDN 域名小图片，那么需要发起 10 次请求去拉取，分两次并发。第一次并发请求回来后，发起第二次并发。如果你把 10 个小图片合并为一张大图片的画，那么只用一次请求即可拉取下来 10 个小图片的资源。减少服务器压力，减少并发，减少请求次数。

总结
1.选择合适的图片格式和压缩大图，可从根源上截图大图加载过慢的问题。
2.使用SVG，base64，雪碧图，css 代替图片等可减少图片 http 请求，提高页面加载速度。
3.使用 CDN 图片可达到分流的效果，减少服务器压力。
4.图片懒加载，预加载，渐进式图片等可不同程度减少白屏时间，提高产品体验。

[Muzzzhi]

啥官方教程？？？

4L 4L

[智能小程序开发者]

这教程真是及时雨啊！！我项目里遇到了很多图片，正愁图片资源太大导致包大小超出上限无法上传，通过上述工具将我的图片压缩顺利的解决了这个问题！