图片

电商类项目，存在大量图片，banner广告图、菜单导航栏、列表头图等
图片众多以及体积过大影响页面加载速度
为啥？
有些图片请求并发，Chrome最多支持并发请求数有限，其他请求被push进队列中等待或停滞，直到上轮请求完成
后才被发出，一部分资源需要排队等待时间，过多的图片影响页面加载展示
合适图片格式
1.WebP格式具有更好的图像数据压缩算法，更小的图片体积，拥有肉眼识别无差异的图像质量，缺点是兼容性并
不好
2.小图使用PNG,对于大部分图标，完全可以使用SVG代替
3.照片使用JPEG
4.雪碧图（将多个图标文件整合到一张图片中）
可能请求非常多的小图片，会受到浏览器并发HTTP请求数的限制
1.图片压缩
2.不用图片，用CSS代替
3.对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用CDN加载，可以计算
出适配屏幕的宽度，然后去请求相应裁剪好的图片
JPEG/JPG
1.高质量有损压缩，体积小，不支持透明
2.应用于轮播图大的背景图、banner
PNG
1.无损压缩，质量好，体积大，支持透明
2.应用小的10g0
SVG
1.体积小，不失真，兼容好
2.应用于图标
GIF
1.支持透明
Webp
有损压缩与无损压缩（可逆压缩）的图片文件格式
比PNG/PEG格式小
支持透明度
体积和效果上都做的不错

1
2
3
4
5

<picture>
<source type="image/webp"srcset="/static/img/perf.webp">
<source type="image/jpeg"srcset="/static/img/perf.jpg">
<img src="/static/img/perf.jpg">
</picture>

webpack压缩
配置image-webpack-loader
雪碧图
CSS Sprites,精灵图，图像合成技术，主要用于小图片显示
同原域名请求有最大并发限制，Chrome为6个，如页面有10个小图，需要10次请求，2次并发
若把10个图合成一个大图，只需1次请求
1.减少请求次数
2.减少服务器压力
3.诚少并发
4.提高加载速度
5.减少鼠标滑过的一些bug
6.解决网页设计师在图片命名上的困扰
iconfont
通过字体方式展示图标，用户图标渲染、简单图形、特殊字体等
1.轻量，已修改
2.诚少请求次数
内联Base64
图片转为base64串，解析图片不会请求下载，而是解析字符串
缺点
1.比使用二进制体积增大33%
2.全部内联后，原本可并行加载的图片会串行放入请求
适用于更新频率低、首屏或骨架图上的小图标
CSS代替图
实现修饰效果，半透明、阴影、圆角、渐变等