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

---

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

keywords:

• srcset
• sizes
• DPR
• 响应式图片
• 资源选择

description: 使用 srcset 与 sizes 为不同视口与 DPR 提供合适的图片资源，降低带宽与提升清晰度，并给出选择与验证建议。

categories:

• 文章资讯
• 编程技术

---

概述

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_images
• web.dev：Responsive images — https://web.dev/learn/design/responsive-images