基于请求头让CloudFront动态分发PNG/JPG与WebP图片可行吗？

开发者阿泽

2026-8-19

实现CloudFront动态分发WebP图片的方案

完全可以实现这个需求，核心是利用CloudFront的Lambda@Edge功能在请求阶段修改URI，结合缓存策略区分不同浏览器的请求，无需修改页面标记。

具体实现步骤：

创建Viewer Request类型的Lambda@Edge函数
这个函数会在CloudFront接收到用户请求后，检查请求头和URI：

识别请求的是PNG/JPG格式图片
检查Accept头是否包含image/webp
如果满足条件，将请求URI修改为对应WebP文件的路径（比如把/path/to/file.png改成/path/to/file.png.webp）

示例代码：

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    const headers = request.headers;
    const uri = request.uri;

    // 匹配PNG/JPG/JPEG格式的请求
    if (uri.match(/\.(png|jpg|jpeg)$/i)) {
        // 检查浏览器是否支持WebP
        if (headers['accept'] && headers['accept'][0].value.includes('image/webp')) {
            request.uri = `${uri}.webp`;
        }
    }

    callback(null, request);
};

配置CloudFront缓存策略
为了让CloudFront根据Accept头区分缓存内容，需要将Accept头加入缓存键的包含列表。这样支持WebP的浏览器和不支持的浏览器会获取到各自对应的缓存版本，避免出现缓存混淆。
关联Lambda函数到CloudFront行为
在CloudFront的对应缓存行为中，将创建好的Lambda@Edge函数（Viewer Request触发类型）关联进去。