概览`next/image` 提供占位符与解码控制。首屏大图使用 `priority` 与 `placeholder="blur"`，列表采用 `lazy` 与合适的 `sizes`，可显著优化 LCP 与视觉稳定性。首屏英雄图import Image from 'next/image' export default function Hero() { return ( <Image src="/images/hero.avif" alt="Hero" width={1200} height={800} priority placeholder="blur" blurDataURL="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'><rect width='100%' height='100%' fill='gray'/></svg>" sizes="(max-width: 768px) 100vw, 1200px" /> ) } 列表图像<Image src="/images/card.jpg" alt="Card" width={400} height={300} loading="lazy" decoding="async" sizes="(max-width: 768px) 50vw, 400px" /> 预加载与稳定布局export function HeadHints() { return ( <head> <link rel="preload" as="image" href="/images/hero.avif" fetchpriority="high" /> </head> ) } 治理要点为 LCP 候选设置 `priority` 与高优先级预加载；为非关键图像使用 `lazy/decoding=async`。总是提供 `width/height` 或通过布局属性稳定尺寸，减少 CLS。与 CDN/loader 协同按需输出合适格式与质量。验证与指标浏览器：现代浏览器；Next.js：15.0+LCP 降低，列表滚动加载平滑，布局无明显抖动
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复