为什么next/image组件加载图片的速度比原生img标签慢？

原因说明 #

1. 默认懒加载机制延迟了请求发起 #

next/image 默认开启懒加载能力，底层通过 IntersectionObserver 监听组件是否进入视口，只有组件进入/即将进入视口时才会发起图片下载请求。而原生 img 标签默认是页面解析到对应节点就立刻触发下载，首屏范围内的图片使用默认配置的 next/image 会多一段监听检测的等待时间，直观表现就是加载启动更晚、整体加载速度更慢。

2. decoding="async" 不影响下载速度 #

该属性控制的是图片下载完成后的解码时机，异步解码是为了避免大体积图片解码阻塞主线程渲染其他页面内容，完全不会影响图片下载阶段的耗时，因此不是你观测到加载慢的原因。

3. 自带的图片优化逻辑增加了处理链路 #

默认配置下 next/image 会走 Next.js 自带的图片优化服务，请求会先经过 Next 服务端完成尺寸压缩、格式适配等处理后再返回资源，相比直接请求静态 webp 资源多了一层服务端处理耗时，也会拉长整体加载时间。

优化建议 #

• 首屏内的展示图片手动关闭懒加载：给 next/image 组件添加 loading="eager" 属性，跳过交叉监听逻辑，页面解析到组件就立刻发起下载请求，和原生 img 的请求触发逻辑对齐。
• 核心首屏图片添加 priority 属性：Next 会自动提升这类图片的请求优先级，同时自动注入预加载逻辑，进一步加快资源加载速度。
• 不需要自动优化的图片关闭优化能力：给组件添加 unoptimized 属性，直接使用你传入的原始图片地址，跳过 Next 服务端的图片处理环节，和原生 img 请求静态资源的逻辑完全一致。
• 静态资源可托管到就近 CDN，减少资源下载的网络耗时。

内容的提问来源于stack exchange，提问作者NikolayDavidof