移动端图片优化总结

webview中的图片，而不是native；

从图片格式来看：

　　1.色彩丰富的、大的图片切成jpg的；

　　2.尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；

　　3.半透明的切成png24。

png8的大小更小；但是尺寸小的图片，类似于icon更推荐使用svg（纯色使用iconfont）；

更小的图片格式webp，但是支持度不是很好；

所以webp 优于 jpg，jpg的大小比png更小，但只有png支持透明；

每一种图片格式都有自己的特点及适用场景；

其他方面：

尽量不要使用空的src，这将造成页面重载，尽量避免使用dataURL，因为这里没有使用图片的压缩算法，会过大，小图可以使用，小于3K的，可以使用一像素的图片，设置宽高进行占位；

• *** 对不同机型的分辨率和屏幕密度做适配，下载不同尺寸图片
• 增加极速模式，在2G和弱网络下面，只下载普通质量的图片，
• 增加不同图片质量的选项给用户

图片的预加载与懒加载；

• 图片的预加载是利用缓存，把图片预先加载到页面无法看到的地方，等到图片进入用户视野后才显示，缓存的方式只需要简单的把图片资源提前请求即可，（纯js或者利用css的background属性都可以）之后在使用时，获取同一张图片，则浏览器会直接使用缓存好的图片；预加载可以提高后续的页面性能，但会增长首页的渲染时间，一般来说首屏要尽可能快的打开，所以不使用预加载；
• 图片的懒加载可以节约流量，把一些网络资源的请求放到了后面，可以使首页渲染时间减短；

渐进式图片，渐进式和普通图片的大小几乎相近，更好的用户体验，开始大小框架就定好，不会像基准式图片一样，由于尺寸未设定而造成回流——提高的渲染性能

长图文展示：

• 方案一：类似微信的图片切分，一张长图分为多张展示，在加载的时候使用loading；
• 方案二：类似口碑，使用渐进式图片展示；

PS：补充两个占位图的base64编码：

<!-- 1像素透明 -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<!-- 1像素黑色 -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">复制代码

转载于:https://juejin.im/post/5c2c32cc5188254eaa5c5920