前面我们学习了样式处理，本节来聊聊图片优化。图片通常是网页中最大的资源，优化图片能显著提升页面加载速度和用户体验。
Image 组件概述
Next.js 的 Image 组件提供了强大的图片优化功能：
- 自动优化 - 按需调整大小、格式转换
- 懒加载 - 默认支持，提升性能
- 响应式图片 - 自动适配不同屏幕
- 防止布局偏移 - CLS 优化
使用 Image 组件比使用传统的 img 标签有很多优势。
基本使用
本地图片
对于本地图片，Next.js 会自动确定宽高：
import Image from 'next/image'
import profilePic from './profile.jpg'
export default function Profile() {
return (
<Image
src={profilePic}
alt="个人照片"
width={500}
height={500}
/>
)
}
远程图片
对于远程图片，需要明确指定宽高：
import Image from 'next/image'
export default function Page() {
return (
<Image
src="https://example.com/photo.jpg"
alt="远程图片"
width={800}
height={600}
/>
)
}
配置远程图片域名
使用远程图片时，需要在配置中允许的域名：
// next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/images/**',
},
],
},
}
图片优化功能
自动格式转换
Next.js 会自动选择最佳格式：
原始格式 → 优化后格式
PNG → WebP / AVIF
JPEG → WebP / AVIF
这样能大幅减少图片体积，同时保持视觉质量。
响应式图片
自动适配不同屏幕尺寸：
import Image from 'next/image'
export default function ResponsiveImage() {
return (
<Image
src="/hero.jpg"
alt="Hero"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
style={{ objectFit: 'cover' }}
/>
)
}
懒加载
Image 组件默认使用懒加载，只有当图片接近视口时才会加载：
<Image
src="/photo.jpg"
alt="照片"
width={500}
height={300}
loading="lazy" // 默认值
/>
高级用法
fill 属性
让图片填充父容器：
export default function Page() {
return (
<div style={{ position: 'relative', width: '100%', height: '500px' }}>
<Image
src="/hero.jpg"
alt="Hero"
fill
style={{ objectFit: 'cover' }}
/>
</div>
)
}
优先加载
对于首屏图片，可以设置优先加载：
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // 禁用懒加载
/>
图片质量
控制图片质量：
<Image
src="/photo.jpg"
alt="照片"
width={500}
height={300}
quality={80} // 1-100，默认 75
/>
占位符
在图片加载时显示占位符：
<Image
src="/photo.jpg"
alt="照片"
width={500}
height={300}
placeholder="blur" // 模糊占位符
/>
图片配置
域名配置
配置允许的图片域名：
// next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.example.com',
},
],
},
}
设备尺寸
配置支持的设备尺寸：
// next.config.js
module.exports = {
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
},
}
图片格式
配置支持的图片格式：
// next.config.js
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
},
}
常见模式
卡片图片
export default function Card({ image, title }) {
return (
<div className="bg-white rounded-lg shadow-md overflow-hidden">
<div className="relative h-48">
<Image
src={image}
alt={title}
fill
className="object-cover"
/>
</div>
<div className="p-4">
<h3>{title}</h3>
</div>
</div>
)
}
头像图片
export default function Avatar({ src, alt }) {
return (
<div className="relative w-12 h-12 rounded-full overflow-hidden">
<Image
src={src}
alt={alt}
fill
className="object-cover"
/>
</div>
)
}
图片画廊
export default function Gallery({ images }) {
return (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{images.map((image) => (
<div key={image.id} className="relative aspect-square">
<Image
src={image.src}
alt={image.alt}
fill
className="object-cover rounded-lg"
/>
</div>
))}
</div>
)
}
实用建议
这里分享几个在图片优化时特别有用的技巧。
使用适当的图片格式
实际开发中,选择合适的图片格式能大幅减少图片体积:
// 推荐这样做 - 使用 WebP/AVIF 等现代格式
<Image src="/photo.webp" alt="照片" width={500} height={300} />
// PNG 虽然兼容性好,但文件会大很多
<Image src="/photo.png" alt="照片" width={500} height={300} />
设置正确的尺寸
这个小细节很重要——使用实际显示尺寸,避免加载过大的图片:
// 推荐这样做 - 使用实际需要的尺寸
<Image src="/photo.jpg" alt="照片" width={500} height={300} />
// 避免这种情况 - 加载过大的图片浪费带宽
<Image src="/photo.jpg" alt="照片" width={2000} height={1200} />
使用描述性 alt 文本
这里有个小建议:使用描述性的 alt 文本,不仅对 SEO 有帮助,对无障碍访问也很重要:
// 推荐这样做 - 描述性 alt
<Image src="/dog.jpg" alt="一只金毛犬在草地上奔跑" width={500} height={300} />
// 避免这种情况 - 无意义的 alt
<Image src="/dog.jpg" alt="图片1" width={500} height={300} />
首屏图片设置优先加载
这个技巧特别有用——首屏图片设置优先加载可以提升首屏显示速度:
// 首屏 Hero 图片设置 priority
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />
// 非首屏图片使用默认的懒加载即可
<Image src="/photo.jpg" alt="照片" width={500} height={300} />
总结
本节我们学习了 Next.js 的图片优化功能，包括 Image 组件的使用、自动优化、响应式图片等。合理使用 Image 组件能大幅提升页面加载速度和用户体验。
如果你对本节内容有任何疑问，欢迎在评论区提出来，我们一起学习讨论。
