面试题：Next.js 图片优化中如何配置自动格式转换

Question

在 Next.js 项目里，要实现图片的自动格式转换功能，描述一下在 `next.config.js` 文件中需要进行怎样的配置，并且说明这些配置项的作用分别是什么。

Answer 1

在 next.config.js 中可进行如下配置来实现图片自动格式转换：

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    formats: ['image/avif', 'image/webp'],
    loader: 'default',
    path: '/_next/image'
  }
};

各配置项作用如下：

• deviceSizes：指定一系列设备宽度，Next.js 根据这些宽度生成不同分辨率的图片，以适配不同设备屏幕，上述示例为常见的设备宽度值。
• imageSizes：定义除了由 deviceSizes 生成的图片外，额外需要生成的图片宽度，比如一些固定尺寸的图片需求。
• formats：指定要生成的图片格式，这里设置为 'image/avif' 和 'image/webp'，表示 Next.js 会将图片转换为这两种现代图片格式，以实现更好的加载性能，同时浏览器不支持这些格式时会自动回退到其他格式（如 JPEG、PNG 等）。
• loader：设置图片加载器，'default' 表示使用 Next.js 默认的图片加载器，还可以配置为自定义的加载器以满足特定需求。
• path：指定 Next.js 处理图片后输出的路径，默认是 '/_next/image'，这是 Next.js 内置图片优化功能处理后的图片存放路径。