Next.js SSG项目public目录图片构建时优化方案咨询

方案1：预优化图片+自动执行脚本（不影响Vercel部署） #

不用担忧修改脚本影响Vercel部署，npm的prebuild钩子会在build命令执行前自动运行，Vercel部署时也会遵循这个规则。

1. 安装图片优化工具sharp-cli：

npm install sharp-cli --save-dev

2. 在项目根目录创建scripts/optimize-images.js脚本，批量处理public/images下的图片：

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = path.join(__dirname, '../public/images');
const outputDir = inputDir; // 直接覆盖原文件，也可指定新目录

fs.readdirSync(inputDir).forEach(file => {
  const ext = path.extname(file).toLowerCase();
  if (['.jpg', '.jpeg', '.png', '.webp'].includes(ext)) {
    // 生成webp格式的优化版本
    sharp(path.join(inputDir, file))
      .resize({ width: 1200 })
      .webp({ quality: 80 })
      .toFile(path.join(outputDir, path.basename(file, ext) + '.webp'));
    // 优化原格式图片
    sharp(path.join(inputDir, file))
      .jpeg({ quality: 80 })
      .png({ quality: 80 })
      .toFile(path.join(outputDir, file));
  }
});

3. 在package.json中添加脚本：

{
  "scripts": {
    "prebuild": "node scripts/optimize-images.js",
    "build": "next build && next export"
  }
}

之后每次构建（包括Vercel自动部署）都会先自动完成图片优化，无需手动操作。

方案2：标准<img>标签+srcset（配合预优化多尺寸图片） #

如果不想用next/image，可以生成多尺寸图片后用原生img的srcset实现响应式加载。要规避ESLint报错，可在组件文件顶部添加注释：

/* eslint-disable @next/next/no-img-element */

组件中使用示例：

<img
  src="/images/photo.webp"
  srcset="/images/photo-480.webp 480w, /images/photo-800.webp 800w, /images/photo-1200.webp 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
  alt="图片描述"
/>

多尺寸图片的生成逻辑可以整合到上述prebuild脚本中，自动生成不同宽度的版本。

方案3：简化next-image-export-optimizer配置 #

你提到该库配置繁琐，其实用默认配置就能快速上手：

1. 安装依赖：

npm install next-image-export-optimizer sharp

2. 修改next.config.js：

const nextConfig = {
  images: {
    loader: 'custom',
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
  env: {
    nextImageExportOptimizer_imageFolderPath: 'public/images',
    nextImageExportOptimizer_exportFolderPath: 'out',
    nextImageExportOptimizer_quality: 75,
    nextImageExportOptimizer_storePicturesInWEBP: true,
  },
};

module.exports = nextConfig;

3. 替换组件中的next/image：

import NextImageExportOptimizer from 'next-image-export-optimizer';

<NextImageExportOptimizer
  src="/images/photo.jpg"
  alt="图片描述"
  width={1200}
  height={800}
/>

这个库已经封装好构建时优化逻辑，配置完成后SSG导出会自动生成优化后的响应式图片。

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