面试题：Next.js 图像优化之压缩与延迟加载基础

配置图像基本压缩功能

安装next/image：Next.js 10 及以上版本内置了next/image组件用于优化图像。无需额外安装，直接使用即可。
使用next/image组件：在页面中引入next/image组件，并传入图像的src、width、height等属性。例如：

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="描述图片"
      width={500}
      height={300}
    />
  );
}

配置图像压缩：Next.js 会自动对图像进行压缩。在构建过程中，Next.js 会根据不同的设备像素比（devicePixelRatio）生成多个不同分辨率的图像版本。默认情况下，Next.js 使用imageOptimizer进行图像优化，支持jpg、png、webp等常见格式。可以在next.config.js中通过images配置项进行进一步的自定义，例如：

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: ['example.com'], // 如果图像来自外部域名，需要指定
    formats: ['image/avif', 'image/webp'], // 可指定生成的图像格式
  },
};

实现延迟加载

next/image的自动延迟加载：next/image组件默认会对图像进行延迟加载。当图像进入浏览器的视口时才会加载，这有助于提升页面的性能，特别是对于长页面。无需额外配置即可实现基本的延迟加载功能。
自定义延迟加载行为：如果需要自定义延迟加载的行为，例如调整阈值，可以使用loading属性。loading属性有三个值："eager"（立即加载）、"lazy"（延迟加载，默认值）和"auto"（由浏览器决定）。例如：

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="描述图片"
      width={500}
      height={300}
      loading="lazy"
    />
  );
}

主要组件和配置项

主要组件：next/image组件，这是 Next.js 用于优化图像显示的核心组件，集成了图像压缩、延迟加载等功能。
主要配置项：
- 在next.config.js中的images配置项：
  - deviceSizes：指定不同设备像素比下生成的图像宽度。
  - imageSizes：指定在不同分辨率下生成的图像宽度。
  - domains：如果图像来自外部域名，需要在这里指定域名，以确保 Next.js 可以优化这些图像。
  - formats：指定生成的图像格式，如'image/avif'和'image/webp'，以利用现代图像格式的优势。
- 在next/image组件中的属性：
  - src：图像的路径。
  - width和height：图像的宽度和高度，用于布局占位，防止页面闪烁。
  - loading：控制图像的加载方式，"eager"、"lazy"或"auto"。
  - alt：图像的替代文本，用于无障碍访问。

面试题：Next.js 图像优化之压缩与延迟加载基础

知识考点

面试题答案

配置图像基本压缩功能

实现延迟加载

主要组件和配置项