第 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 组件以提升性能 |
