图片与视频优化（WebP/AVIF、Responsive Images、CDN 转码与自适应码率）
系统梳理图片与视频的格式选择、响应式加载与 CDN 转码策略，提供可验证的实现与观测方法。
图片
响应式图片选择：picture/srcset/sizes 与 AVIF/WebP 回退
"介绍 `` 与 `srcset/sizes` 的协作，以设备与布局选择最优格式与尺寸，优先 AVIF/WebP 并为不支持的浏览器回退到 JPEG/PNG，提供示例与验证。"
图片优化实战：AVIF/WebP 与响应式 imagesrcset/sizes
对比 AVIF/WebP 在压缩与质量上的优势，结合响应式 `srcset/sizes` 与 `picture` 的使用，系统化提升图片加载性能与清晰度。
响应式图片实践：srcset/sizes 与 picture 的优化
"系统讲解 x/w 描述符与 sizes 的协作、DPR 与布局尺寸的选择逻辑，以及 picture 在艺术指导场景下的应用与 LCP 影响。"
ImageDecoder API：图片解码与动画帧管线
"介绍 ImageDecoder 的使用与帧读取，针对静态与动画图片（如 GIF/WEBP），将解码帧转为位图或 VideoFrame 并绘制，说明性能与内存管理。"
前端图片优化：AVIF 与 WebP 的取舍与落地
"结合压缩效率、画质与兼容性，评估 AVIF 与 WebP 的取舍，并提供对 LCP 的影响与工程化落地建议。"
Client Hints 实战：DPR/Width/Viewport-Width 与图片自适应
"介绍 Client Hints 的适用场景与服务端协商流程，说明 DPR/Width/Viewport-Width 的作用与 Content-DPR 要求，并给出图片自适应的工程建议。"
Async Clipboard API：文本/图片复制粘贴与权限
说明异步剪贴板 API 的用法与权限要求，支持文本与图片复制/粘贴，构建富交互的编辑体验。
Next.js 15 Client Hints DPR-Width 图片变体投递实践 Route Handler Accept-CH
使用 Client Hints（DPR/Width）在 Next.js 15 的 Route Handlers 中投递合适图片变体，通过 Accept-CH 与响应头协同提升图像加载效率与质量。
