「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
图片优化方案
- 选择合适的格式
- 大小要适当
- 适配不同屏幕
- 压缩图片
- 优化处理关键图像
- 懒加载图片
压缩图片的方案
压缩图片的仓库 github.com/imagemin/im…
压缩png仓库
用来压缩图片的网站
图片加载优化方案
1. JPEG/JPG
有损压缩、体积小、加载快、不支持透明
1.1 JPG 的优点
JPG 最大的特点是有损压缩 这种高效的压缩算法使它成为了一种非常轻巧的图片格式。 另一方面，即使被称为“有损”压缩，JPG的压缩方式仍然是一种高质量的压缩方式：
1.2 使用场景
JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。
1.3 JPG 的缺陷
有损压缩在上文所展示的轮播图上确实很难露出马脚，但当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显。
此外，JPEG 图像不支持透明度处理，透明图片需要召唤 PNG 来呈现。
2. PNG-8 与 PNG-24
无损压缩、质量高、体积大、支持透明
2.1 PNG 的优点
PNG（可移植网络图形格式）是一种无损压缩的高保真的图片格式
PNG 图片具有比 JPG 更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。它弥补了上文我们提到的 JPG 的局限性，唯一的 BUG 就是体积太大。
2.2 PNG-8 与 PNG-24 的选择题
如何确定一张图片是该用 PNG-8 还是 PNG-24 去呈现呢？
好的做法是把图片先按照这两种格式分别输出，看 PNG-8 输出的结果是否会带来肉眼可见的质量损耗，并且 确认这种损耗是否在我们（尤其是你的 UI 设计师）可接受的范围内，基于对比的结果去做判断。
2.3 应用场景
考虑到 PNG 在处理线条和颜色对比度方面的优势，我们主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等
3. SVG
文本文件、体积小、不失真、兼容性好
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。
3.1 SVG 的特性
-
SVG 与 PNG 和 JPG 相比，文件体积更小，可压缩性更强
-
作为矢量图，它最显著的优势还是在于图片可无限放大而不失真
-
SVG 是文本文件。我们既可以像写代码一样定义 SVG，把它写在 HTML 里、成为 DOM 的一部分，也可以把对图形的描述写入以 .svg 为后缀的独立文件（SVG 文件在使用上与普通图片文件无异）。这使得 SVG 文件可以被非常多的工具读取和修改，具有较强的灵活性
3.2 SVG 的局限性
- 一方面是它的渲染成本比较高，这点对性能来说是很不利的。
- 另一方面，SVG 存在着其它图片格式所没有的学习成本（它是可编程的）
3.3 SVG 的使用方式与应用场景
- 将 SVG 写入 HTML
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="50" cy="50" r="50" />
</svg>
- 将 SVG 写入独立文件后引入 HTML
<img src="文件名.svg" alt="">
4. Base64
文本文件、依赖编码、小图标解决方案
-
和雪碧图一样，Base64 图片的出现，也是为了减少加载网页图片时对服务器的请求次数，从而提升网页性能。Base64 是作为雪碧图的补充而存在的。
-
Base64 是一种用于传输 8Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS，从而减少 HTTP 请求的次数。
4.1 Base64 的应用场景
-
非常小的 Logo
-
Base64 编码后，图片大小会膨胀为原文件的 4/3（这是由 Base64 的编码原理决定的）。如果我们把大图也编码到 HTML 或 CSS 文件中，后者的体积会明显增加，即便我们减少了 HTTP 请求，也无法弥补这庞大的体积带来的性能开销，得不偿失
-
在传输非常小的图片的时候，Base64 带来的文件体积膨胀、以及浏览器解析 Base64 的时间开销，与它节省掉的 HTTP 请求开销相比，可以忽略不计，这时候才能真正体现出它在性能方面的优势
-
往在一张图片满足以下条件时会对它应用 Base64 编码
-
图片的实际尺寸很小（大家可以观察一下掘金页面的 Base64 图，几乎没有超过 2kb 的）
-
图片无法以雪碧图的形式与其它小图结合（合成雪碧图仍是主要的减少 HTTP 请求的途径，Base64 是雪碧图的补充）
-
图片的更新频率非常低（不需我们重复编码和修改文件内容，维护成本较低）
-
4.2 Base64 编码工具推荐
这里最推荐的是利用 webpack 来进行 Base64 的编码——webpack 的 url-loader 非常聪明，它除了具备基本的 Base64 转码能力，还可以结合文件大小，帮我们判断图片是否有必要进行 Base64 编码
5.WebP
一种旨在加快图片加载速度的图片格式，它支持有损压缩和无损压缩
5.1 WebP 的优点
WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身
5.2 WebP 的局限性
- 太年轻。我们知道，任何新生事物，都逃不开兼容性的大坑
- webP 还会增加服务器的负担——和编码 JPG 文件相比，编码同样质量的 WebP 文件会占用更多的计算资源。
5.3 webp在项目中的使用
6. # 下一代图像压缩格式： AVIF
AVIF是HEIF ISO标准和Mozilla，Xiph，Google，Cisco等许多公司的免版税AV1编解码器的组合。
与JPEG或WebP相比，AVIF可显著减少图像的文件大小；与JPEG相比可节省50%，与WebP相比可节省20%。
但是： 万里江山一片红
AVIF要做的一件大事就是修复了WebP的最大缺陷。WebP已有10多年的历史了，AVIF是WebP格式的主要升级。这两种格式在技术上相关：它们都基于VPx系列的视频编解码器。WebP使用旧的VP8版本，而AVIF基于AV1。
WebP限于8位颜色深度，并且在其最佳压缩操作模式下，它只能存储图像分辨率的一半的颜色（称为色度二次采样）。这将导致饱和色彩的边缘在WebP中被弄脏或像素化。AVIF支持全分辨率的10位和12位色彩以及高动态范围（HDR）。
