# 图片优化
# 加载优化
- 使用css替代部分图片
- 小屏幕:使用 CDN 加载，计算出适配屏幕的宽度，然后去请求相应裁剪好的图片
- 小图使用base64
- 雪碧图
- 图片格式选择
- 能够显示 WebP 格式的浏览器使用 WebP 格式
- 小图使用 PNG
- 大部分图标使用 SVG 代替
- 照片使用 JPEG
生成base64方法
function getBase64URL(url, width, height) {
return new Promise(resolve => {
let img = new Image()
let canvas = document.createElement("canvas");
img.src = url
img.onload = function () {
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
resolve(canvas.toDataURL())
}
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 图片格式
# JPEG/JPG
有损压缩- 体积小
- 加载快
- 不支持透明
优点
- 图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质
缺点
- 不支持透明度处理
- 处理线条感较强、颜色对比强烈的图像时，图片模糊会很明显
使用场景
使用 JPG 呈现大图，既可以保住图片的质量，图片体积也不会太大
- 背景图
- 轮播图
- Banner图
# PNG-8 与 PNG-24
8 位的 PNG 最多支持 256 种颜色，而 24 位的可以呈现约 1600 万种颜色。
- 无损压缩
- 质量高
- 体积大
- 支持透明
优点
- 比 JPG 更强的色彩表现力
- 无损压缩
- 支持透明度
缺点
- 体积太大
应用场景
- 呈现小的 Logo、颜色简单且对比强烈的图片或背景等。
# SVG
- 文本文件
- 体积小
- 不失真
- 兼容性好
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。
优点
- 文件体积小
- 可压缩性强
- 可无限放大而不失真(矢量图)
缺点
- 渲染成本比较高
- 可编程(需要学习成本)
# Base64
- 文本文件
- 依赖编码
- 小图标解决方案
Base64 是一种用于传输 8Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS，从而减少 HTTP 请求的次数
Base64 编码后，图片大小会膨胀为原文件的 4/3
在传输非常小的图片的时候，Base64 带来的文件体积膨胀、以及浏览器解析 Base64 的时间开销，与它节省掉的 HTTP 请求开销相比，可以忽略不计
使用场景
- 实际尺寸很小（不超过 2kb 的）
- 图片无法以雪碧图的形式与其它小图结合（合成雪碧图仍是主要的减少 HTTP 请求的途径，Base64 是雪碧图的补充）
- 图片的更新频率非常低（不需我们重复编码和修改文件内容，维护成本较低）
# WebP
- 支持透明
- 支持动态图片
优点
与 PNG 相比，WebP 无损图像的尺寸缩小了 26％。在等效的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。 无损 WebP 支持透明度（也称为 alpha 通道），仅需 22％ 的额外字节。对于有损 RGB 压缩可接受的情况，有损 WebP 也支持透明度，与 PNG 相比，通常提供 3 倍的文件大小。
缺点
- 兼容性差
- 编码同样质量的 WebP 文件会占用更多的计算资源