背景

在同一个页面加载多张大图的时候，页面的载入速度，在我们的项目中，取决于图片的大小，页面总加载时间 3s，图片加载时间将近 1.5s。f12 查看分析，主要的耗时在图片加载，要怎么加快图片的加载呢，首先想到的就是图片的压缩

实践

在 nginx 中添加对图片的处理逻辑
首先在 HTTP 这里添加：

1
2
3
4
5
6
7
8
9
10

http {
    include       mime.types;
    default_type  application/octet-stream;
   xxx...
    map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
    }
    xxxx
}

这里的意思是，判断 HTTP 的请求头是否包含 webp，谷歌浏览器在请求图片时候的请求头如下
如果包含，这里将设置一个变量webp_ext，它的值是.webp
,这样，我们的请求的浏览器如果支持 webp 的图片格式，我们在 server 层的配置将尝试给浏览器返回一个 webp 格式的图片
在 server 层添加如下配置

1
2
3
4

location ~ .*.(jpg|jpeg|gif|png)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;
root /usr/local/openresty/nginx/html;

这里，让我们所有请求图片的请求，使用 try_files 方法，首先尝试返回 $uri$webp_ext 所指向的图片，即如果原请求是 xxx.png，则 nginx 这里尝试返回 xxx.png.webp 。如果浏览器的请求头中没有 webp 这个关键字，那么这个变量的值就是原始的 uri .即直接返回 xxx.png 的原始图片，以适应不支持 webp 的浏览器
前提是，我们的网站目录中需要包含对应图片的 webp 格式，这个可以一次性生成，也可以配置 nginx-lua 在访问的时候实时生成。实时生成后面再研究，我这里在测试环境中，仅尝试一次性生成

1
2

yum install libwebp-tools
cwebp  -q 100  1.png -o 1.png.webp

下图为两个格式的加载时间对比
使用原始图像

使用压缩的 webp 图像