图片

图片

电商类项目，存在大量图片，banner 广告图、菜单导航栏、列表头图等

图片众多以及体积过大影响页面加载速度

为啥？

有些图片请求并发，Chrome最多支持并发请求数有限，其他请求被push进队列中等待或停滞，直到上轮请求完成后才被发出，一部分资源需要排队等待时间，过多的图片影响页面加载展示

合适图片格式

1. WebP 格式具有更好的图像数据压缩算法，更小的图片体积，拥有肉眼识别无差异的图像质量，缺点是兼容性

并不好

1. 小图使用 PNG，对于大部分图标，完全可以使用 SVG 代替
2. 照片使用 JPEG
3. 雪碧图( 将多个图标文件整合到一张图片中 )

可能请求非常多的小图片，会受到浏览器并发 HTTP 请求数的限制

1. 图片压缩
2. 不用图片，用CSS代替
3. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计

算出适配屏幕的宽度，然后去请求相应裁剪好的图片

JPEG/JPG

1. 高质量有损压缩，体积小，不支持透明
2. 应用于轮播图大的背景图、banner

PNG

1. 无损压缩，质量好，体积大，支持透明
2. 应用小的logo

SVG

1. 体积小，不失真，兼容好
2. 应用于图标

GIF

1. 支持透明

Webp

有损压缩与无损压缩（可逆压缩）的图片文件格式

比PNG/JPEG格式小

支持透明度

体积和效果上都做的不错