HOW - next/image 图片加载优化

官方文档

next/image 是 Next.js 框架中的一个图像组件，旨在简化图像处理、优化和加载。它是 Next.js 提供的一个内置组件，专门用于解决图像相关的问题，以提高性能和用户体验。

next/image 组件

**1. 概述：

• next/image 组件是 Next.js 10 引入的，它提供了一种优化图像的方式，包括自动调整大小、优化加载和支持懒加载等功能。

**2. 主要功能：

• 自动优化：next/image 自动优化图像，确保它们以最合适的格式、尺寸和质量加载，提升页面性能。
• 响应式图片：支持响应式图片，根据不同的设备和屏幕尺寸加载适当大小的图像。
• 懒加载：默认启用懒加载，只有在图像即将进入视口时才加载，从而减少初始页面加载的资源消耗。
• 格式转换：支持现代图像格式（如 WebP），并根据浏览器支持自动选择合适的图像格式。
• 占位符和加载指示：提供占位符和加载状态功能，以改善用户体验。

**3. 基本用法：

• 引入：

  import Image from 'next/image';
  

• 示例：

  import Image from 'next/image';
  
  function MyComponent() {
    return (
      <div>
        <Image
          src="/path/to/image.jpg"
          alt="Description of image"
          width={500}  // 图像的宽度
          height={300} // 图像的高度
        />
      </div>
    );
  }
  

**4. 属性：

• src：图像源地址，可以是本地路径或外部 URL。
• alt：图像的替代文本，用于描述图像内容，提升无障碍访问。
• width 和 height：图像的宽度和高度，这些值用于计算图像的占位符和布局。
• layout：图像的布局模式。支持多种模式，如 fixed（固定大小），responsive（响应式），intrinsic（自适应），和 fill（填充父容器）。
• priority：标记图像为优先加载，适用于关键图像（如页面的首屏图像），以确保它们尽快加载。
• placeholder：占位符模式，可以设置为 blur 来显示模糊的占位图像，直到实际图像加载完成。

**5. 性能优化：

• 自动压缩和调整：next/image 通过服务器端的图像处理，自动压缩和调整图像，优化传输。
• CDN 支持：Next.js 内置的图像优化服务可以利用 CDN 提供图像，进一步提升加载速度。

**6. 注意事项：

• 本地图片处理：next/image 对本地图片有特定处理方式，通常需要将图像放在 public 文件夹下或指定 loader 进行处理。
• 外部图像源：使用外部图像源时，可能需要在 next.config.js 中配置 domains 以允许加载外部资源。

配置示例

// next.config.js
module.exports = {
  images: {
    domains: ['example.com'], // 允许的外部图像源
  },
};

通过使用 next/image 组件，你可以轻松实现图像优化，提升页面性能和用户体验。它是 Next.js 提供的一个强大工具，帮助开发者在构建现代Web应用时更有效地管理图像。