前端vs图片:0 为什么需要重视图片

图片占流量的大头

据统计,图片内容已经占到了互联网内容总量的62%
toC网站,基本上都是图片占流量大头
某电商网站商详页,js、css、图片对比如下面三张图,结果十分明显

  • js大小:在这里插入图片描述
  • css大小:在这里插入图片描述
  • 图片大小:
    在这里插入图片描述

而咱们熟悉的vue.min.js,压缩后94k,再gzip之后,33k,还不如一个普通的banner图大

如此大量的图片,会引发下面需要关注的问题

引发的性能 & 体验问题

影响LCP(Largest Contentful Paint 最大内容绘制)指标

图片过大、过多,下载+加载的时间也会过大,会直接影响LCP指标

影响其余指标

图片虽然是非阻塞性资源,但是会占用当前浏览器的网络下载,影响其余js、css等资源的下载速度,尤其是在弱网环境下!
这样的话除了LCP指标,还会影响TTI(Time to Interactive 可交互时间) 这一重要指标
同样,也会影响Speed Index(加载速度)这个指标

影响用户体验

除了数值化的指标,图片也直接影响了界面体验,毕竟你的界面如果很多图片的话,用户的关注点会聚焦在图片上。这个时候,如果图片都是瞬间秒开的那种,用户会因很快获取到了内容而心情愉悦;而如果图片需要慢慢向下、逐帧加载的一个过程,那无疑会让人感觉到等待、烦躁,会对当前的网站兴趣大大降低

相关性能工具提示

下图为Chrome的lighthouse工具,针对csdn首页性能检测的图片部分
如果是使用合适尺寸图片的话,会减少1.19秒的加载时间
在这里插入图片描述

内存问题

图片所占内存远超图片大小

浏览器、小程序等宿主加载图片时,是将图片吃到内存中的;而且因为图片位深的原因,一张图片在浏览器中占的内存,远超过该图片的文件大小

位深
位深度指的是存储每个像素所用的位数,主要用于存储,单位bit
图片位深与色彩模式有关,通常默认 ARGB_8888,位深32位(4字节,8bit = 1byte )

图片内存
png/jpg等图片格式在显示之前都需要经过解码生成一张位图,之后根据位图创建纹理传给GPU做渲染
位图内存消耗= 图片长度(像素) * 图片宽度(像素) * 位深(单位:字节)
现在假如有一个图片是600*800的,文件大小100KB
内存所占大小 600 * 800 * 4 byte = 1875KB = 1.83M,超过文件大小10倍多!
对于GIF图片因为本身有多帧,所以最终的内存消耗为单帧内存x帧数

图片导致内存溢出真实案例:
2018年做小程序,有一个红米手机上的崩溃场景,就是点击查看某图片的时候,小程序会闪退
后来定位到,那张引起小程序崩溃的图片是我们运营上传的、未经压缩的原图,大小5M多,被吃到内存里,造成了低端手机的小程序内存崩溃
解法:我们公司的图片服务器,支持按参数获取压缩、降质的图片,我添加了一些参数,获取了处理后的图片,大大降低了图片大小及内存占用
从那时开始,我更加关注与研究图片的相关事情

图片性能优化,性价比高

相对于图片的重要性而言,图片的性能优化手段很多,而其中最重要的几措施,真的是又简单又高效

其余的前端性能优化,在现代浏览器的加持下,效果不是那么明显

  • 针对js的优化,你可能纠结过for of、for循环、forEach、map这些循环哪个更快,可能在js处理大段数据的时候进行性能衡量,但会发现,现代浏览器的强大,让咱们写的js代码性能十分高效,除非一开始写的有重大问题,否则很难大幅度提示性能
  • 针对css的优化,例如不使用*通配符、少使用标签选择器、选择器深度不能过深等。这些优化,你真的很难衡量出来

效果比较明显的性能优化,图片优化更简单

  • 防抖、减少dom操作、提高动画性能,这些很关键,但基本上都是具体问题具体分析,花费的精力会多,不像图片,基本上全局适用的优化
  • 优化webpack做treeshaking、合并压缩,在http的层面上,减少的请求可能不如几个图片的优化减少的请求少

作为对比,图片的优化就简单的多

  • 适用全局,做好图片优化,会使整站体验提高一个等级,而不是某几个界面
  • 使用一个靠谱的图片oss,能解决按大小加载、网络缓存等问题,此处可以事半功倍!
  • 图片懒加载,也能减少很多流量问题
  • 使用webpapng等新格式图片,会发现新技术很高效、很有趣

图片的各种使用场景

除了上面说的图片性能优化之外,图片还有很多实际的业务场景

  • 通用的图片展示、预览组件
  • 图片的上传、压缩
  • 图片验证码、明水印、暗水印等
  • 图片的跨域、seo等

那就开始深入的聊一下图片吧!
该专栏后面的内容大体会有

  • 图片oss服务器使用
  • jpg、png、gif等常规图片格式
  • webp、apng等新型图片格式
  • 图片性能优化汇总
  • 图片相关使用场景若干等
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值