阅读 3866

移动端图片优化总结

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=">复制代码


关注下面的标签,发现更多相似文章
评论