一、为什么使用 AVIF 图片格式？

优势点	说明
高压缩率	在相似质量下，AVIF 文件比 JPEG/PNG/WebP 更小，能有效节省带宽和存储空间。
更高画质	即使在低码率下也能保持清晰细节，减少压缩带来的马赛克或模糊问题。
支持透明度	像 PNG 一样支持 Alpha 通道透明效果，且文件更小。
支持 HDR	支持高动态范围（HDR）色彩，亮部与暗部细节表现更出色。
支持动画	支持多帧动画，体积远小于 GIF，可实现流畅动画效果。
开源免费	基于开放标准，无需支付版权费用，适合广泛应用。
更好的色彩表现	支持更高位深（如 10 位、12 位色深），色彩过渡更加自然。
浏览器支持不断提升	已被 Chrome、Firefox、Safari、Edge 等主流浏览器广泛支持，兼容性持续提升。

采用 AVIF 图片格式，可以大幅提升网页加载性能、优化视觉体验，并有效降低服务器及流量成本。

二、图片上传为 PNG/JPG，为什么最终返回的是 AVIF？

我们上传至 AWS S3 桶中的图片文件，最初是以传统格式（如 PNG、JPG）存在的。但用户最终访问时，返回的是 AVIF 格式，主要是因为配置了以下动态处理流程：

1. 拦截请求与格式判断

• 当浏览器请求图片资源时，AWS 会拦截请求，检测浏览器是否支持 AVIF 格式。

• 如果支持，将在 S3 中查找对应的 AVIF 文件。

2. 动态生成 AVIF 图片

- 如果 S3 桶中已有对应的 AVIF 图片，直接返回。

- 如果没有现成的 AVIF 图片，则根据用户请求的源图片（PNG/JPG），实时生成一张新的 AVIF 图片，并保存到 S3 桶中，随后返回给用户。

3. 兼容老浏览器

• 如果浏览器不支持 AVIF，则直接返回原始格式的图片（如 PNG、JPG），确保访问兼容性。

三、替换同名图片后，是否还会访问到旧的 AVIF 图片？

不会。

为了避免用户访问到缓存中的老图片，系统在图片上传阶段进行了以下处理：

• 当上传新的同名图片时，AWS 会自动检测并删除已有的同名 AVIF 图片资源。

• 这样一来，旧版 AVIF 图片被清除。

• 当用户下次访问时，因找不到旧的 AVIF 图片，系统会根据新的源图重新生成新的 AVIF 文件并返回。

• 从而确保用户访问到的永远是最新版本的图片内容。

✅ 此机制有效避免了 CDN 缓存失效等待问题，大大简化了图片更新和运维管理流程。

四、我们访问的图片后缀明明是jpg 或者png 为什么我们下载下来是avif

1. 浏览器发起请求，比如 GET https://yourdomain.com/path/image.jpg

2. **请求头（Accept）**中会带上浏览器支持的图片格式，比如：

Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

浏览器告诉服务器："我可以接受 avif 格式哦！"

1. Lambda@Edge 或 CDN（如 CloudFront）拦截了请求，根据请求头里的 Accept 判断，发现浏览器支持 avif，于是就做了智能格式替换：

• 虽然你请求的是 image.jpg

• 但是它在 S3 或缓存中找到了对应的 image.avif

• 返回的时候，偷偷换了资源文件，返回的是 AVIF 内容

• 当用户下次访问时，因找不到旧的 AVIF 图片，系统会根据新的源图重新生成新的 AVIF 文件并返回。

• 从而确保用户访问到的永远是最新版本的图片内容。

•  返回的 HTTP 响应里，重要的是Content-Type 头：

Content-Type: image/avif

浏览器收到的是一个 AVIF 格式的数据，虽然 URL 还是 .jpg，但实际上它知道应该用 AVIF 解码来展示。

为什么下载下来是 AVIF？

• 你点右键下载时，浏览器是根据返回的 Content-Type 类型来确定文件格式的，不是根据 URL 后缀。

• Content-Type: image/avif，所以浏览器保存成了 .avif 文件，即使链接上还是 .jpg。

• 浏览器内部已经知道这张图实际上是 AVIF 格式了。

总结一句话：

请求是 JPG，返回是 AVIF，靠的是 HTTP Content-Type，浏览器根据返回类型进行识别和保存。

五、补充说明

• 动态生成 AVIF 图片一般通过 AWS Lambda@Edge 来实现，支持实时生成并自动回写存储。

• 项目如果对首屏加载性能要求极高，可以结合 CDN 对 AVIF 图片进行缓存加速。

• 建议统一规范图片命名，避免因频繁重名导致过多历史资源堆积，影响桶管理效率。

要通过 AWS Lambda@Edge 动态把 S3 上的 PNG、JPG 转成 AVIF 图片，基本思路是：

• 拦截图片请求（比如 .jpg、.png）

• 判断浏览器 Accept 请求头是否支持 image/avif

• 如果支持：

• 查询 S3 中是否已有对应 .avif 文件

• 如果没有，就实时读取源图，转码成 .avif，存回 S3，再返回

• 如果不支持：

• 直接返回原图

下面是一个简单版的 Node.js（AWS Lambda@Edge）脚本示例：

const AWS = require('aws-sdk');
const sharp = require('sharp'); // sharp 用于图片处理// S3 客户端
const s3 = new AWS.S3({ region: 'your-bucket-region' });const BUCKET = 'your-bucket-name';exports.handler = async (event, context, callback) => {const request = event.Records[0].cf.request;const headers = request.headers;const uri = request.uri;console.log('Request URI:', uri);// 只处理 jpg/png 请求if (!uri.match(/\.(jpg|jpeg|png)$/i)) {return callback(null, request);}// 检查浏览器是否支持 AVIFconst acceptHeader = headers['accept'] ? headers['accept'][0].value : '';const supportsAvif = acceptHeader.includes('image/avif');if (!supportsAvif) {// 不支持 AVIF，直接返回原图console.log('Browser does not support AVIF');return callback(null, request);}// 构造 avif 文件的路径const avifUri = uri.replace(/\.(jpg|jpeg|png)$/i, '.avif');try {// 先检查 AVIF 是否已经存在await s3.headObject({Bucket: BUCKET,Key: decodeURIComponent(avifUri).substring(1), // 去掉开头的 /}).promise();// 已存在，修改请求路径，返回 avifconsole.log('AVIF exists, serving AVIF');request.uri = avifUri;return callback(null, request);} catch (error) {if (error.code !== 'NotFound') {// 其他异常console.error('Error checking AVIF file:', error);return callback(error);}console.log('AVIF not found, generating dynamically');// AVIF 不存在，读取源图const originImage = await s3.getObject({Bucket: BUCKET,Key: decodeURIComponent(uri).substring(1),}).promise();// 用 sharp 转 AVIFconst avifBuffer = await sharp(originImage.Body).avif({ quality: 50 }).toBuffer();// 写回 S3，生成新的 AVIF 文件await s3.putObject({Bucket: BUCKET,Key: decodeURIComponent(avifUri).substring(1),Body: avifBuffer,ContentType: 'image/avif',CacheControl: 'public, max-age=31536000', // 设置长缓存}).promise();// 修改请求路径，返回新的 AVIFrequest.uri = avifUri;return callback(null, request);}
};