面试题：Next.js 图片优化在响应式布局中的策略与实现

利用 Next.js 的图片优化与自动格式转换功能

使用 next/image 组件：
- 在 Next.js 项目中，应使用内置的 next/image 组件来处理图片。例如：
```
import Image from 'next/image';

const MyComponent = () => {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="description"
      width={500}
      height={300}
    />
  );
};

export default MyComponent;
```
- next/image 组件会自动优化图片，根据不同设备的屏幕尺寸和像素密度，选择合适的图片尺寸和格式（如 WebP、AVIF 等现代格式，如果浏览器支持）。
设置 layout 属性：
- 对于响应式布局，可通过设置 layout 属性来控制图片的布局方式。常见的有 responsive、fill 等。
- responsive 布局：图片会根据父容器的大小进行缩放，同时保持其固有宽高比。
```
<Image
  src="/path/to/image.jpg"
  alt="description"
  width={500}
  height={300}
  layout="responsive"
/>
```
- fill 布局：图片会填充其父容器，此时 width 和 height 属性会被忽略，需在父容器上设置 position: relative。
```
<div style={{ position:'relative', width: '100%', height: '400px' }}>
  <Image
    src="/path/to/image.jpg"
    alt="description"
    layout="fill"
    objectFit="cover"
  />
</div>
```

配置 next.config.js：

可以在 next.config.js 中对图片优化进行进一步配置。例如，设置图片加载的质量等参数。

module.exports = {
  images: {
    quality: 80, // 设置图片质量，取值 1 - 100
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], // 定义不同设备尺寸断点
  },
};

避免在高分辨率设备上出现图片模糊的问题

提供足够分辨率的图片：
- 确保原始图片具有足够高的分辨率，以满足高像素密度设备的需求。例如，对于视网膜屏（2x 像素密度），图片的宽度和高度应至少是在普通屏幕上显示尺寸的两倍。
利用 next/image 的 srcSet 生成：
- next/image 组件会自动生成 srcSet 属性，该属性包含不同分辨率的图片源。浏览器会根据设备的像素密度选择合适的图片。通过提供多个分辨率的图片版本，可确保在高分辨率设备上显示清晰的图片。
设置 objectFit 和 objectPosition：
- 当使用 fill 或其他布局模式时，合理设置 objectFit（如 cover、contain 等）和 objectPosition 属性，确保图片在缩放过程中重要内容不会被裁剪或变形，从而保持清晰。例如：
```
<Image
  src="/path/to/image.jpg"
  alt="description"
  layout="fill"
  objectFit="cover"
  objectPosition="center center"
/>
```

星途面试题库

面试题：Next.js 图片优化在响应式布局中的策略与实现

知识考点

面试题答案

利用 Next.js 的图片优化与自动格式转换功能

避免在高分辨率设备上出现图片模糊的问题