图片优化

加载优化

使用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())
        }
    })
}

CodePen:示例

图片格式

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 文件会占用更多的计算资源

图片优化 ​

加载优化 ​

图片格式 ​

JPEG/JPG ​

PNG-8 与 PNG-24 ​

SVG ​

Base64 ​

WebP ​