如何在 AWS 上构建支持 AVIF 的前端图片优化方案
一、为什么使用 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 格式，主要是因为配置了以下动态处理流程：
-
拦截请求与格式判断
-
当浏览器请求图片资源时，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
-
浏览器发起请求，比如
GET https://yourdomain.com/path/image.jpg -
**请求头（Accept）**中会带上浏览器支持的图片格式，比如：
Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8浏览器告诉服务器："我可以接受 avif 格式哦！"
-
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);}
};