Next.js 15 next-image sizes 响应式 srcset 与布局治理实践

核心价值使用 `sizes` 告知浏览器不同视口下图片的占用宽度，自动选择最佳 `srcset`。结合 `fill` 与容器定位实现无障碍响应式布局，配合 `priority` 保障首屏关键图片获取。fill 布局与容器定位import Image from 'next/image'

export default function Hero() {

return (

<div className="hero">

<Image

src="/images/hero.jpg"

alt=""

fill

sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"

priority

placeholder="blur"

blurDataURL="data:image/svg+xml;base64,PHN2Zy8+"

/>

</div>

)

}

.hero { position: relative; inline-size: 100%; block-size: clamp(240px, 40vw, 560px); }

.hero :is(img) { object-fit: cover; }

固定尺寸与响应式 sizesimport Image from 'next/image'

export default function Card() {

return (

<Image

src="/images/thumb.jpg"

alt=""

width={640}

height={480}

sizes="(max-width: 480px) 90vw, (max-width: 960px) 50vw, 640px"

/>

)

}

治理建议`sizes` 中的宽度应反映真实布局占用比例，避免过小导致模糊或过大浪费带宽。首屏关键图使用 `priority`，避免滥用以免影响其他资源。与 `object-fit/object-position` 保持裁剪一致性，配合 `aspect-ratio` 或容器限定高度避免 CLS。结论合理配置 `sizes` 与容器定位，使浏览器根据视口与布局选择最合适的资源，提升首屏与总体带宽效率。