Next.js 图片优化（next-image）与缓存策略实战

引言`next/image` 在 App Router 下提供内置的图片优化与懒加载能力；合理配置远程域名与缓存头可显著提升首屏与滚动体验。能力与配置（已验证）图片优化：自动根据视口与 DPR 生成合适尺寸，并支持懒加载与占位。来源：Next.js 文档（Images）。远程图像：在 `next.config.js` 中配置 `images.remotePatterns` 或 `images.domains` 以允许远程源。来源：Next.js 文档。缓存与头：通过响应头与 CDN 缓存策略提升命中率；结合 `ImageResponse` 与边缘策略优化。来源：Next.js 文档与示例。实战建议资源策略：为常见尺寸生成预设；开启 `priority` 为关键图；在 DevTools 与 Speed Insights 中观测指标。安全与域名：白名单远程域名，避免开放性滥用；限制最大尺寸与格式转换（WebP/AVIF）。参考链接（验证来源）Next.js 文档：图片优化与配置（英文）：https://nextjs.org/docs/app/building-your-application/optimizing/images结语通过 `next/image` 的优化与缓存协作，页面图像可在保持质量的同时获得更快加载；建议在关键页面统一策略与观测。