如何将Next.js&Express.js电商网站图片压缩至2-5kb？

一、AVIF/WebP为啥能压得更小 #

• 编码思路更高效：AVIF和WebP跳出了JPEG/PNG的静态图片编码逻辑，借鉴了视频编码的思路——识别图片里重复的像素块、渐变色彩区域，用更精简的规则存储，相同画质下比JPEG小30%-50%是常态。
• 抓准人眼特性：人眼对亮度的敏感度远高于色彩，这两种格式会在色彩通道减少数据量，只保留核心亮度细节，肉眼几乎看不出画质下降。
• 无损压缩也更强：如果是纯色图标、线条类的PNG图，AVIF/WebP的无损压缩能比PNG小20%以上，还能保留完全一致的画质。

二、用Cloudinary转AVIF/WebP，几步搞定 #

你用Cloudinary的话，完全不用自己折腾转格式工具，靠URL参数就能实现：

• 单图快速转换：在你现有图片URL里加f_avif或者f_webp就行，比如原来的图是https://res.cloudinary.com/你的云名/image/upload/商品图.jpg，改成https://res.cloudinary.com/你的云名/image/upload/f_avif/商品图.jpg，Cloudinary会自动生成并返回压缩后的AVIF图。
• 自动平衡画质与体积：搭配q_auto参数，Cloudinary会根据图片内容自动选最合适的画质等级，比如f_avif,q_auto组合，能把50-60kb的JPEG压到20-30kb，画质和原图几乎没差。
• 批量处理旧图：如果要把库里的旧图都转了，去Cloudinary后台媒体库，选中要处理的图片，用「转换」功能批量生成AVIF/WebP的衍生图，之后直接用这些衍生图的URL就行。

三、Next.js里兼容新旧浏览器 #

有些旧浏览器不支持AVIF/WebP，用Next.js的next/image组件能自动适配：

• 先在next.config.js里配置Cloudinary源和支持的格式：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: '/你的云名/image/upload/**',
      },
    ],
    formats: ['image/avif', 'image/webp'],
  },
}

• 之后用next/image组件加载图片时，它会自动检测浏览器支持情况，给新浏览器返回AVIF/WebP，旧浏览器 fallback 到JPEG/PNG，不用你手动写判断逻辑。

内容的提问来源于stack exchange，提问作者Urban Leung