前端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，能解决按大小加载、网络缓存等问题，此处可以事半功倍！
• 图片懒加载，也能减少很多流量问题
• 使用webp、apng等新格式图片，会发现新技术很高效、很有趣

图片的各种使用场景

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

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

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

• 图片oss服务器使用
• jpg、png、gif等常规图片格式
• webp、apng等新型图片格式
• 图片性能优化汇总
• 图片相关使用场景若干等