图片优化
这是一篇学习笔记，内容源于掘金小册 《前端性能优化》
-
JPEG/JPG关键字: 有损压缩、体积小、加载快、不支持透明
使用场景:
JPG图片经常作为大的背景图、轮播图或 Banner 图出现。 -
PNG-8与PNG-24关键字：无损压缩、质量高、体积大、支持透明
使用场景：由于 PNG 在处理线条和颜色对比度方面的优势，我们主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。
如何确定一张图片是该用
PNG-8还是PNG-24去呈现呢？好的做法是把图片先按照这两种格式分别输出，看 PNG-8 输出的结果是否会带来肉眼可见的质量损耗，并且确认这种损耗是否在我们（尤其是你的 UI 设计师）可接受的范围内，基于对比的结果去做判断。 -
SVG关键字：文本文件、体积小、不失真、兼容性好
使用场景：矢量图
优势： 我们既可以像写代码一样定义
SVG，把它写在HTML里、成为DOM的一部分，也可以把对图形的描述写入以.svg为后缀的独立文件（SVG文件在使用上与普通图片文件无异）。这使得SVG文件可以被非常多的工具读取和修改，具有较强的灵活性缺点： 1. 渲染成本比较高 2. 因为是可编程的，所以有一定的学习成本
-
Base64关键字：文本文件、依赖编码、小图标解决方案
使用场景：
- 图片的实际尺寸很小（几乎没有超过 2kb 的）
- 图片无法以雪碧图的形式与其它小图结合（合成雪碧图仍是主要的减少 HTTP 请求的途径，Base64 是雪碧图的补充）
- 图片的更新频率非常低（不需我们重复编码和修改文件内容，维护成本较低）
-
WebP关键字：年轻的全能型选手
优点：无损压缩比
PNG更小，有损压缩也比jpg更小，有损WebP也支持透明度缺点： 兼容性差
用谷歌浏览器访问淘宝首页搜索
webp图片是可以找到的。应用方式可以是，前端判断当前浏览器类型 如果是支持Webp的情况优先使用webp，如果不行的话就将图片降级为jpg（切割url）但是这样并不灵活，如果有一天
webp大行其道，多数浏览器都支持了，那就需要时常去维护浏览器兼容判断逻辑。麻烦！！所以维护性更强，更加灵活的方案是—-把判断工作交给后端，由服务器根据HTTP请求头部的Accept字段来决定返回什么格式的图片。当Accept字段包含image/webp时，就返回WebP格式的图片，否则返回原图。 当然上述还有一个事几乎可以忽略不计哈，就是由于兼容性的原因，同一张图片要准备两份。