next/image 解决了哪些图片性能问题？

next/image 是优化后的 <img> 替代，自动：

1. 懒加载（默认 loading="lazy"）
2. 防止布局抖动：要求显式 width/height（或用 fill）预留空间
3. 自动优化格式/尺寸：服务端按需转 WebP/AVIF、按设备分辨率提供 srcset
4. 占位：placeholder="blur" 生成模糊预览

import Image from 'next/image'
<Image src="/hero.png" alt="hero" width={1200} height={600} priority />  // priority 跳过懒加载（首屏大图）

远程图片需在 next.config 的 images.remotePatterns 里白名单。配 CDN 时图片优化由 Next 的 /_next/image 代理完成。

同分类其他题目