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

概述

srcset 提供不同尺寸或像素密度的图片集合；sizes 描述图片在布局中的显示宽度，从而让浏览器选择最合适的资源。

用法/示例

工程建议

• 提供清晰的 sizes 与尺寸标注，避免过大或过小资源；与 fetchpriority 协作提升 LCP 候选加载。
• 统一文件命名与生成管线（如构建时生成多尺寸），并在真实设备上验证资源选择。
• 与 picture/source 协作提供格式切换（WebP/AVIF），兼顾兼容与质量。

参考与验证

• MDN：Responsive images — https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• web.dev：Responsive images — https://web.dev/learn/design/responsive-images