第 5 章：静态资源与图片优化

第 5 章：静态资源与图片优化

在 Web 开发中，图片加载优化 是影响性能和体验的关键因素。Next.js 提供了多个工具用于处理静态资源与图片，极大提升了开发效率和页面性能。

---

5.1 使用 public/ 文件夹

Next.js 项目根目录下的 public/ 文件夹可用于存放静态资源，如图片、字体、文档等。

📁 结构示例：

public/
├── logo.png
├── images/
│   └── banner.jpg
└── docs/
    └── resume.pdf

✅ 使用方式：

• 访问地址：/logo.png ➜ http://localhost:3000/logo.png
• 引用图片（传统方式）：

jsx
复制编辑
<img src="/images/banner.jpg" alt="横幅" />

⚠️ 注意：路径不需要加 public/ 前缀，直接从根路径 / 开始写。

---

5.2 使用 next/image 优化图片

Next.js 内置了 Image 组件，它能自动处理图片：

• 懒加载（Lazy Loading）
• 响应式尺寸
• 自动格式转换（如 WebP）
• CDN 支持
• 提升 LCP 性能指标（对 SEO 有益）

✅ 安装依赖（如使用远程图片）：

npm install sharp

本地开发可选；Vercel 部署自动支持。

---

5.3 示例：使用 Image 组件

import Image from 'next/image';
import banner from '@/public/images/banner.jpg';

export default function Home() {
  return (
    <div>
      <h1>欢迎来到我的博客</h1>
      <Image
        src={banner}
        alt="博客横幅"
        width={800}
        height={400}
        priority={true}
      />
    </div>
  );
}

参数说明：

属性	说明
src	本地图片路径或远程图片 URL
alt	图片描述，推荐写，有助于 SEO
width / height	固定尺寸（必填或使用 fill）
priority	提前加载图片，提升首屏性能
placeholder="blur"	模糊加载效果（仅支持本地图片）

---

5.4 响应式图片尺寸

可以使用 layout="responsive" 或 fill + 父容器定位，自动适应不同屏幕：

<Image
  src="/images/hero.jpg"
  alt="Hero 图"
  width={1200}
  height={600}
  layout="responsive"
/>

或使用 fill：

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

---

5.5 使用远程图片（如 CDN）

使用远程图片时，需要在 next.config.js 中配置允许的域名：

// next.config.js
module.exports = {
  images: {
    domains: ['images.unsplash.com', 'cdn.example.com'],
  },
};

<Image
  src="https://images.unsplash.com/photo-123"
  width={600}
  height={400}
  alt="远程图片"
/>

---

5.6 和传统 <img> 的区别

特性	<img>	next/image
懒加载	❌ 手动实现	✅ 默认启用
响应式	❌ 需 CSS 控制	✅ 自适应布局
图片格式转换	❌ 无	✅ 支持自动转 WebP
CDN 优化	❌	✅ 支持
性能表现	普通	极优（提升 LCP）

🚀 建议：除了图标类小图，其他都使用 Image 替代 <img>。

---

5.7 其他静态资源使用（字体、PDF、音频）

• 字体文件（.woff/.ttf）放入 public/fonts/
• PDF 文件：<a href="/docs/resume.pdf" download>下载简历</a>
• 音频 / 视频资源也可放入 public/media/

---

✅ 小结

内容	方法 / 技巧
静态图片引用	放入 public/，通过 /xxx.jpg 访问
图片优化	使用 next/image，支持懒加载、自适应、WebP
远程图片	配置 next.config.js 中的 images.domains
响应式图片	使用 layout="responsive" 或 fill 模式
传统 <img> 替代	尽量使用 Image 组件以提升性能