如何在 AWS 上构建支持 AVIF 的前端图片优化方案

最新推荐文章于 2025-05-16 16:50:47 发布

YD1218

最新推荐文章于 2025-05-16 16:50:47 发布

阅读量673

点赞数 10

文章标签： aws 前端云计算

本文链接：https://blog.csdn.net/yq_dxp1218/article/details/147988178

版权

一、为什么使用 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);
  }

  // 检查浏览器是否支持 AVIF
  const 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();

    // 已存在，修改请求路径，返回 avif
    console.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 转 AVIF
    const 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();

    // 修改请求路径，返回新的 AVIF
    request.uri = avifUri;
    return callback(null, request);
  }
};