既然网络请求资源这么多，那我直接让资源更小不就完事了。一方面减轻服务器压力，另一方面减轻客户端请求压力。
前端常见图片格式
都来个示例，同一张图片不同格式，观察质量和大小
图片格式
JPEG/JPG
JPG格式，大小483KiB
- 兼容性：几乎所有浏览器都支持
- 优点：有所压缩，可在文件大小和图片质量之间取得平衡，
- 缺点：不支持透明度
- 使用场景：照片和复杂图片，以及不需要透明背景的图片
PNG
PNG格式，大小2.2MiB
- 兼容性：几乎所有浏览器都支持
- 优点： 无损压缩，支持透明度和更多颜色
- 缺点：文件大小通常较大
- 使用场景：适合图标、图形和需要透明背景的图片
GIF
GIF格式，大小：780KiB
- 兼容性： 良好，几乎所有浏览器都支持
- 优点： 支持动画
- 缺点： 色彩表现不如 JPEG 和 PNG，且文件大小较大
- 使用场景：适合简单动画和图标
Webp
Webp格式大小：126KiB
WebP 是一种由 Google 开发的图像格式，具有良好的压缩率和图像质量，并支持透明度和动画。
- 优点：大小变小的情况下，质量不变，支持透明度。
- 唯一的缺点：兼容性，可能一些非常老旧的浏览器不能加载。
- 使用场景：替代JPG 或者 PNG
SVG
SVG格式，大小：2.7MiB 如果这个时候对浏览器界面进行缩放，会发现SVG图片在变化 这是因为SVG图片是一条条path路径组成，每个path中的点就是每个像素点的相对位置
- 兼容性： 良好，几乎所有现代浏览器都支持
- 优点： 矢量图形，可缩放而不失真
- 缺点： 不适合存储复杂的照片或图像，文件大小可能较大
- 使用场景：适合图标和插图。
图片大小排序
SVG > PNG > GIT > JPG > Webp
图片质量
SVG > WebP = PNG > JPG > GIF
可见的都各有特色，所以在实际项目中，要根据具体需求和优化要求选择合适的图片格式。在大小和质量上考量，做性能优化。
总结
如果说让我在开发过程中，我大概率会做以下：
- 照片资源：jpg
- 动图：gif
- 矢量图标: svg
- 图片资源：webp
当然只是个人习惯，如果有其它考量，便是质量和加载速度（大小）。
