"响应式图片实践：srcset/sizes 与 picture 的优化"

概述响应式图片通过 `srcset/sizes` 与 `picture` 让浏览器在不同 DPR 与布局尺寸下选择合适资源，降低带宽与提升首屏体验。x/w 描述符与 sizesx 描述符适配不同 DPR（1x/2x/3x），为高密度屏提供更清晰资源［参考5］。w 描述符结合 `sizes` 表达图片最终渲染宽度，让浏览器在不同布局尺寸下选择最合适资源，避免过大或过小［参考2,3］。`sizes` 默认 `100vw`，需明确给出不同视口下的渲染宽度提示，以便浏览器正确选择［参考1,2,3］。picture 的艺术指导当不同断点需要不同构图或比例时，使用 `picture/source media` 切换不同资源（如横竖版、裁切差异）。工程建议为首屏 LCP 图片选择合适尺寸与格式，并结合 `fetchpriority="high"`；避免过度使用高倍资源在低 DPR 设备上带来带宽负担。参考与验证［参考1］博客：响应式图片完整指南（DPR、sizes 与选择逻辑）：https://www.cnblogs.com/keatkeat/p/15878396.html［参考2］教程：srcset/sizes 的使用与 w 描述符实践：https://fedev.cn/html5/srcset-and-sizes-for-img-and-picture-element-part2.html［参考3］MDN：响应式图片概念与用法（srcset/sizes）：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images［参考4］教程：DPR 概念与选择候选资源说明：https://whoisguilty.com/developers/responsive_images/srcset_and_sizes［参考5］web.dev：响应式图片语法与 DPR 适配说明：https://web.dev/learn/images/descriptive关键词校验关键词聚焦响应式图片与选择逻辑，与正文一致。