Next.js Image Optimization：图片加载性能提升

Next.js 提供了内置的图像优化功能，它使用 next/image 组件来自动处理图片，包括懒加载、响应式图片和基于WebP的图片格式。

next/image使用

首先，确保你的Next.js版本支持此特性。如果使用的是较早的版本，请升级到最新版：

npm install next@latest

然后，使用 next/image 组件替换HTML中的<img>标签：

import Image from 'next/image';

function MyComponent() {
  return (
    <div>
      <Image
        src="/path/to/image.jpg"
        alt="My Image"
        width={500}
        height={500}
      />
    </div>
  );
}

export default MyComponent;

参数解析：

src: 图片的URL，可以是相对或绝对路径，也可以是远程URL。
alt: 图片的替代文本，对SEO和可访问性很重要。
width 和 height: 图片的宽度和高度，用于生成响应式图片和懒加载。务必提供准确的值，以优化性能。
layout: 控制图片布局，可选值有 fixed（固定尺寸），responsive（响应式，默认），intrinsic（根据内容调整大小）和 fill（填充容器）。
quality: 图片的JPEG或WebP质量，范围从1到100，默认75。
priority: 是否优先加载图片，适用于首屏图片，默认false。
unoptimized: 如果设置为true，则不使用Next.js的图像优化，适用于已优化的图片。
loading: 控制图片加载类型，可选值为 auto（默认，使用浏览器的默认加载行为），lazy（懒加载）和 eager（立即加载）。

懒加载和响应式图片：

默认情况下，next/image 实现了懒加载，只有当图片进入视口时才会开始加载。响应式图片是自动处理的，根据设备的屏幕宽度提供不同尺寸的图片。

WebP格式：

Next.js 会自动检测浏览器是否支持WebP格式，如果支持，它会优先使用WebP格式，以减小图片大小并提高加载速度。如果浏览器不支持WebP，Next.js会回退到其他格式，如JPEG或PNG。

自定义图片优化配置：

在 next.config.js中，可以自定义图像优化的全局配置：

module.exports = {
  images: {
    domains: ['example.com'], // 允许加载的远程图片域名
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], // 响应式图片尺寸
    loader: 'default', // 或自定义loader
    path: '/_next/image', // 图片处理路径
    formats: ['image/webp'], // 支持的图片格式
    quality: 75, // 默认图片质量
    placeholder: 'blur', // 默认模糊占位符，可选'default'或'blur'
  },
};

注意事项：

• 对于本地图片，确保它们位于public目录下，因为Next.js只处理这个目录内的静态资源。
• 对于CDN上的图片，需要配置domains，以防止跨域问题。
• 不要忘记提供准确的width和height，这对于性能至关重要。

通过使用Next.js的Image组件，你可以轻松地实现图片的懒加载、响应式和WebP支持，从而提高页面加载速度和用户体验。

图片占位符

Next.js 的 next/image 组件提供了两种占位符选项：default 和 blur。默认情况下，占位符是一个透明的方形，而 blur 选项会生成一个模糊的预览图像。

<Image
  src="/path/to/image.jpg"
  alt="My Image"
  width={500}
  height={500}
  placeholder="blur"
/>

blur 占位符可以提供更好的用户体验，因为它在图片完全加载之前给用户一个关于图片内容的预览。但是，这可能会增加页面的初始加载时间，因为需要生成模糊图像。

自定义图片样式

next/image 组件允许你通过 style 属性或内联样式来添加自定义CSS样式。例如，如果你想改变图片的边框：

<Image
  src="/path/to/image.jpg"
  alt="My Image"
  width={500}
  height={500}
  style={{ borderRadius: '10px', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)' }}
/>

使用自定义Loader

如果你需要自定义图片加载逻辑，可以通过 loader 配置项来实现。例如，你可以使用自定义函数来处理图片URL：

const customLoader = (url) => `https://example.com/images/${url}`;

function MyComponent() {
  return (
    <div>
      <Image
        src="/path/to/image.jpg"
        alt="My Image"
        width={500}
        height={500}
        loader={customLoader}
      />
    </div>
  );
}

export default MyComponent;

优化图片大小

为了进一步优化图片大小，可以使用图片压缩工具（如TinyPNG或ImageOptim）预先压缩图片，或者使用Next.js的unoptimized属性来禁用内置的优化：

<Image
  src="/path/to/image.jpg"
  alt="My Image"
  width={500}
  height={500}
  unoptimized
/>

性能监控

Next.js 提供了 Lighthouse 集成，可以在开发过程中检查页面性能，包括图片优化。在开发模式下运行 next dev 并访问你的应用，然后在浏览器的开发者工具中查看Lighthouse报告。

适应性图片大小

在某些场景下，你可能希望图片的大小根据其容器的大小动态调整。next/image 提供了 layout="fill" 选项来实现这一点。这将使图片充满其父元素，保持宽高比不变：

<div style={{ width: '100%', height: '200px' }}>
  <Image
    src="/path/to/image.jpg"
    alt="My Image"
    layout="fill"
    objectFit="cover" // 可选值有 'contain'、'cover'、'fill'、'scale-down' 和 'none'
  />
</div>

图片预加载

预加载图片可以帮助改善用户体验，尤其是对于重要图片。Next.js 提供了 priority 属性来实现这一点：

jsx

这将使图片在页面加载时优先处理，即使它不在当前视口内。

图片占位符颜色

除了模糊占位符，你还可以使用颜色占位符。在 next.config.js 中配置 placeholder 为 color，然后使用 backgroundColor 属性：

module.exports = {
  images: {
    placeholder: 'color',
    backgroundColor: '#f0f0f0', // 自定义背景颜色
  },
};
jsx
<Image
  src="/path/to/image.jpg"
  alt="My Image"
  width={500}
  height={500}
  placeholder="color"
/>

处理SVG图片

Next.js 的 next/image 也支持SVG格式的图片。由于SVG是矢量图，所以不需要 width 和 height 属性：

<Image
  src="/path/to/image.svg"
  alt="My SVG Image"
/>

与其他库的兼容性

如果你的项目中使用了其他的图片库（如react-image或react-lazyload），可能需要处理与next/image的冲突。一种方法是在next.config.js中禁用Next.js的图片处理：

module.exports = {
  images: {
    disableStaticImages: true,
  },
};

这样，Next.js就不会处理 <img> 标签，你可以继续使用你喜欢的图片库。

项目实践

• 总是提供准确的 width 和 height，以优化性能。
• 使用懒加载和占位符，提供良好的用户体验。
• 根据需要选择合适的布局（fixed、responsive、intrinsic 或 fill）。
• 对于重要的图片，考虑使用 priority。
• 使用WebP格式，如果浏览器支持。
• 定期检查和优化图片大小，以减少加载时间。