Next.js 15 图片格式协商 AVIF/WebP 与 DPR-Width Client Hints 协同治理实践

正文图片优化的核心是“按需选择格式与尺寸”。通过 `Accept` 协商 AVIF/WebP 与 `Sec-CH-DPR/Width` 客户端提示，可在边缘决定最佳变体并投递，显著降低字节量与提升画质。一、中间件启用 Client Hintsimport { NextResponse } from 'next/server' export function middleware() { const res = NextResponse.next() res.headers.set('Accept-CH', 'DPR, Width') return res } 二、路由处理图片协商export const runtime = 'edge' function pickFormat(accept: string) { const a = accept || '' if (a.includes('image/avif')) return { ext: 'avif', type: 'image/avif' } if (a.includes('image/webp')) return { ext: 'webp', type: 'image/webp' } return { ext: 'jpg', type: 'image/jpeg' } } function pickWidth(widthHint: string | null) { const w = Number(widthHint || '0') const candidates = [320, 640, 750, 828, 1080, 1200, 1920] const target = candidates.find((x) => w && x >= w) || 1200 return target } export async function GET(req: Request) { const url = new URL(req.url) const accept = req.headers.get('accept') || '' const dpr = Number(req.headers.get('sec-ch-dpr') || '1') const widthHint = req.headers.get('sec-ch-width') const fmt = pickFormat(accept) const width = pickWidth(widthHint) const effective = Math.max(1, Math.min(3, dpr)) const finalWidth = Math.round(width * effective) const key = url.searchParams.get('key') || 'hero' const cdn = `https://cdn.example.com/images/${key}-${finalWidth}.${fmt.ext}` const r = await fetch(cdn) return new Response(r.body, { headers: { 'Content-Type': fmt.type, 'Cache-Control': 'public, s-maxage=86400, max-age=600, immutable', 'Vary': 'Accept, DPR, Width', 'Accept-CH': 'DPR, Width' } }) } 三、治理要点Vary 管理：对 `Accept/DPR/Width` 设置 `Vary`，避免跨设备与浏览器格式互相污染缓存。尺寸候选：列出合理候选宽度并按提示向上取整，防止过多变体导致缓存碎片化。最终宽度：乘以 `DPR` 提升高密屏清晰度，同时限制最大值避免资源浪费。