HTML 响应式图片：srcset 与 sizes 策略

概述`srcset` 提供不同尺寸或像素密度的图片集合；`sizes` 描述图片在布局中的显示宽度，从而让浏览器选择最合适的资源。用法/示例<img src="/img/hero-800.jpg" srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w" sizes="(min-width: 1024px) 800px, 100vw" alt="Hero" decoding="async" /> <!-- 像素密度（x）写法 --> <img src="/img/[email protected]" srcset="/img/[email protected] 1x, /img/[email protected] 2x" alt="Hero" /> 工程建议提供清晰的 `sizes` 与尺寸标注，避免过大或过小资源；与 `fetchpriority` 协作提升 LCP 候选加载。统一文件命名与生成管线（如构建时生成多尺寸），并在真实设备上验证资源选择。与 `picture`/`source` 协作提供格式切换（WebP/AVIF），兼顾兼容与质量。参考与验证MDN：Responsive images — https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_imagesweb.dev：Responsive images — https://web.dev/learn/design/responsive-images