介绍

图片平均占网页总字节数的 50% 以上，因此优化对于性能至关重要。 Next.js 通过 next/image 组件及其内置图像优化 API 提供全面的图像优化管道。本文涵盖设置、配置和高级模式，重点关注 Core Web Vitals 的影响。

下一个/图像组件

next/image 组件通过自动优化功能扩展了 HTML <img> 元素：延迟加载、响应式 srcset 生成、宽度和高度强制执行以防止累积布局移位、模糊占位符和自动格式协商。

import Image from "next/image";

function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero banner"
      width={1200}
      height={600}
      priority
    />
  );
}

priority 属性标记首屏图像以进行预加载，这直接改进了最大内容绘制。

远程模式配置

为了安全起见，外部图像需要在 next.config.js 中明确加入域白名单。

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.example.com",
        pathname: "/images/**",
      },
    ],
  },
};

remotePatterns 配置支持通配符和路径匹配以进行细粒度控制。这可以防止对未知域的任意图像优化请求。

静态导入与动态 URL

静态导入的本地图像会自动进行全面优化。来自 CMS 或 API 的动态 URL 需要手动配置。

// Static import — full auto-optimization
import hero from "@/public/hero.jpg";
<Image src={hero} placeholder="blur" alt="Hero" />

// Dynamic URL — manual config required
<Image
  src="https://cdn.example.com/image.jpg"
  width={800}
  height={600}
  alt="Remote image"
/>

具有尺寸属性的响应式图像

sizes 属性告诉浏览器在不同视口宽度下加载的图像尺寸。正确的配置可以减少移动设备上百分之四十到百分之六十的图像负载。

<Image
  src="/image.jpg"
  fill
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Responsive example"
/>

从 CSS 布局断点派生 sizes 值，以实现准确的响应式图像交付。

格式支持：AVIF 和 WebP

Next.js 根据浏览器的 Accept 标头自动协商图像格式。优先顺序是 AVIF、WebP，原始格式作为后备。

module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
  },
};

在同等质量下，AVIF 的压缩率通常比 WebP 高 30% 到 50%，这使其成为现代浏览器的首选格式。

核心网络生命力影响

适当的图像优化直接影响所有核心网络生命。在英雄图像上使用 priority 并提供下一代格式以改进 LCP。始终指定宽度和高度，或使用 fill 和适当的容器大小来防止 CLS。通过延迟加载首屏图像来减少主线程工作以改进 INP。

结论

Next.js 的图像优化管道为性能关键型图像交付提供了坚实的基础。正确配置远程模式，对捆绑资源使用静态导入，使用 sizes 属性实施响应式图像策略，并利用 AVIF 和 WebP 的自动格式协商。这些实践产生了出色的 Lighthouse 分数和实际性能改进。