LightNode Logo

使用 Next.js Image 组件优化网站性能

Wayne
作者 Wayne ·

介绍

在构建 Web 应用时，图片优化对性能和用户体验至关重要。Next.js 作为强大的 React 框架，提供了内置的 <Image /> 组件，让图片处理变得顺滑、高效且高度可定制。本文将介绍 Next.js Image 组件的工作方式、关键特性，以及如何在项目中使用它。

为什么使用 Next.js 的 Image 组件？

如果没有做好优化，图片往往会拖慢网站速度，包括文件体积过大、格式不合理、在不同设备上缩放不当等问题。<Image /> 组件通过以下方式解决这些问题：

  • 自动优化——在支持的情况下以现代格式（如 WebP）提供图片。
  • 自适应缩放——无需手动处理，图片可根据不同屏幕尺寸自适应。
  • 懒加载——图片仅在进入视口时加载，提升页面速度。
  • 内置缓存——优化后的图片会被缓存并复用，加快加载。

基础用法

要使用该组件，从 next/image 中导入：

import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      <h1>欢迎来到我的网站</h1>
      <Image 
        src="/images/hero.jpg" 
        alt="头图区域" 
        width={800} 
        height={500} 
      />
    </div>
  );
}

关键属性：

  • src：图片的路径或 URL。
  • alt：无障碍与 SEO 所需的替代文本。
  • width 与 height：定义尺寸（正确布局所必需）。

使用 layout="responsive" 实现响应式图片

对于需要适配不同设备的弹性图片，可使用 fill 或 responsive 布局：

<Image
  src="/images/banner.jpg"
  alt="Banner"
  layout="responsive"
  width={1200}
  height={600}
/>

This ensures the image maintains its aspect ratio while adjusting to the parent container’s size.

这能确保图片在根据父容器尺寸调整时保持纵横比。

使用远程图片

如果你的图片来源于外部（例如 CDN），需要在 next.config.js 中允许对应域名：

module.exports = {
  images: {
    domains: ['example.com'],
  },
};

然后你就可以这样使用：

<Image
  src="https://example.com/photo.jpg"
  alt="Remote photo"
  width={600}
  height={400}
/>

进阶功能

1. 模糊占位（Placeholder Blur）

为了获得更顺滑的体验，可以使用 placeholder="blur" 选项：

<Image
  src="/images/profile.jpg"
  alt="Profile"
  width={200}
  height={200}
  placeholder="blur"
  blurDataURL="/images/profile-blur.jpg"
/>

在主图加载期间，会先显示一张低分辨率的预览图。

2. 填充模式（Fill）

如果需要类似背景图的效果，可以使用 fill：

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/images/background.jpg"
    alt="Background"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

3. 优先加载（Priority）

对于关键图片（如 Logo 或首屏横幅），可以添加 priority：

<Image
  src="/images/logo.png"
  alt="Site logo"
  width={150}
  height={50}
  priority
/>

最佳实践

  • 始终为图片提供有意义的 alt 文本，以提升无障碍性。
  • 使用满足设计需求的最小图片尺寸。
  • 在可能的情况下优先使用本地图片，便于控制与优化。
  • 配合 Next.js 的静态优化一起使用，获得最佳性能。

如果你正在构建 Next.js 项目，掌握 Image 组件应该放在你的优先清单之首。

返回列表