Next.js 图片优化实战:next/image 的 sizes、priority 与 CLS 修复

Next.js 图片优化实战:next/image 的 sizes、priority 与 CLS 修复页面加载时图片「跳一下」,把下面的文字往下顶——这就是 CLS(累积布局偏移),Lighthouse 里扣分最狠的指标之一。用 Next.js 的人常以为把img换成next/image就万事大吉,结果打开控制台一看:图片还是懒加载得莫名其妙,首屏大图迟迟不出来,LCP 还是很差。这篇把next/image里最容易用错的三个点——sizes、priority、布局偏移——一次讲清楚,配可直接抄的代码。先看错误写法:为什么 next/image 也会跳很多人这么写:// ❌ 定宽定高,响应式布局下必翻车 import Image from next/image export default function Hero() { return Image src/hero.jpg width{1200} height{600} altbanner / }问题在于:width/height是给浏览器算宽高比用的,不是最终显示尺寸。如果外层容器是响应式的(比如width: 100%),图片会按容器缩放,但浏览器一开始不知道它到底占多高,等图片信息回来才撑开——布局就跳了。正确姿势一:用 fill 容器控制尺寸响应式图片的正确做法是让图片填满一个已知尺寸的容器:export default function Hero() { return ( // 容器给定高度和 relative,图片用 fill 填满 div style{{ position: relative, width: 100%, height: 400px }} Image src/hero.jpg fill altbanner sizes100vw // 关键,见下文 style{{ objectFit: cover }} / /div ) }容器高度是确定的,图片fill进去,浏览器从一开始就知道要占多大空间,不会跳。objectFit: cover保证图片不变形。正确姿势二:sizes 决定加载哪张图,别省next/image会自动生成多种分辨率(srcset),但浏览器靠sizes来决定下载哪一张。不写sizes(且用了fill),浏览器会默认100vw,在移动端也去下载超大图,白白浪费流量、拖慢 LCP。sizes描述的是「这张图在不同视口下实际占多宽」:Image src/card.jpg fill altcard // 手机全宽、平板半宽、桌面三分之一宽 sizes(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw /浏览器读到这段,在手机上就只下载接近屏幕宽度的那张,而不是桌面的大图。列表卡片、网格图这类小图,sizes写对能省一大半流量。一个判断标准:图片实际显示宽度只有屏幕的 1/3,却下载了全宽大图,就是sizes没写或写错了。正确姿势三:首屏大图加 priority,别懒加载next/image默认所有图片都懒加载(loadinglazy)。这对列表图是好事,但对首屏的 LCP 图片是灾难——它会被推迟加载,直接拉高 LCP 时间。首屏关键图(Banner、封面)必须加priority:Image src/hero.jpg fill altbanner priority // 关闭懒加载 预加载,专治首屏 LCP sizes100vw /priority做两件事:关闭懒加载、在head注入link relpreload让图片尽早开始下载。注意别滥用:一个页面只给真正的首屏 LCP 图加priority,全加了等于没加(预加载太多反而抢带宽)。判断依据是 Lighthouse 里标出的 LCP 元素是哪张,就给哪张加。远程图片记得配 remotePatterns用远程图(CDN、对象存储)时,不配白名单会直接报错。在next.config.js里配:// next.config.jsmodule.exports{images:{remotePatterns:[{protocol:https,hostname:cdn.example.com,pathname:/images/**,},],},}远程图同样要给容器定尺寸 sizes,规则和本地图一致。用占位符再抹平一次跳动本地静态图(import 进来的)可以开模糊占位,加载过程更顺滑,也进一步降低感知上的偏移:import hero from /public/hero.jpg // 静态 import 才能自动算 blur Image src{hero} altbanner placeholderblur priority /远程图没有构建期信息,想要 blur 得手动传blurDataURL(一段 base64 缩略图)。小结next/image的核心就三条:响应式图用fill 定高容器,别用裸width/height让布局自己撑,那会跳(CLS)。sizes必须写对——它决定浏览器下载哪张分辨率,写错就是移动端下大图,拖慢 LCP、费流量。首屏 LCP 图加priority关掉懒加载,但只给那一张加,别全加。一句话记忆点:容器定尺寸治 CLS,sizes治流量,priority治 LCP——三个各管一件事,缺一个都白优化。