srcset 属性定义了浏览器可以选择的图片资源集合，每张图片标注了它的固有宽度（使用 w 描述符，如 800w）或像素密度（使用 x 描述符，如 2x）。

sizes 属性告诉浏览器图片在页面布局中实际占用的显示宽度。它由一组媒体条件和对应的尺寸值组成。

协同机制：浏览器首先根据 sizes 计算出当前视口下图片的 CSS 显示宽度，再乘以设备的像素密度（DPR），得到所需的实际像素宽度，然后从 srcset 中选择最匹配的图片资源。这确保了高清屏获得清晰图片，普通屏不浪费带宽。

w 单位（宽度描述符）：指定图片的固有像素宽度，如 image-800.jpg 800w。浏览器结合 sizes 属性选择最合适的图片。推荐用于响应式布局，因为图片显示宽度随视口变化。

x 单位（像素密度描述符）：指定图片适用于的设备像素密度，如 image-2x.jpg 2x。适用于图片在布局中显示宽度固定的场景（如固定宽度的图标、logo）。

推荐：大多数场景使用 w + sizes 组合，更灵活且更符合响应式设计理念。x 单位适合简单场景但缺乏灵活性。

选择图片宽度时考虑以下因素：

• 分析你的布局断点：查看CSS中 @media 断点，图片宽度通常与布局变化点对应。
• 覆盖主流设备宽度：320px（小手机）、375px（iPhone）、414px（大手机）、768px（平板）、1024px（平板横屏）、1280px（笔记本）、1440px（桌面）、1920px（大屏）。
• 考虑图片在布局中的占比：全宽图片需要覆盖到1920px+，侧边栏图片可能只需400-800px。
• 步进策略：通常每200-400px一个档位，提供5-8个尺寸即可。过多的尺寸增加管理成本，过少则浪费带宽。
• 实际建议：宽幅图片使用 400, 600, 800, 1000, 1200, 1600, 2000；内容图片使用 300, 500, 700, 900, 1200。

非常重要！如果省略 sizes 属性或配置不当：

• 浏览器默认将 sizes 视为 100vw（图片占满整个视口宽度），这在大多数情况下不准确。
• 导致浏览器可能选择过大或过小的图片资源——在侧边栏中显示300px宽的图片，浏览器却可能下载1200px的版本。
• 最佳实践：始终提供准确的 sizes，最后一个值作为默认值（无条件），描述图片在最常见视口下的显示宽度。
• 对于无法确定精确尺寸的情况，100vw 是安全的回退值，但会牺牲性能优化效果。

浏览器的选择过程：

1. 计算显示宽度：根据 sizes 属性和当前视口宽度，确定图片在布局中的 CSS 显示宽度（如 400px）。
2. 应用像素密度：将显示宽度乘以设备像素密度 DPR（如 Retina 屏×2 = 800px 所需）。
3. 选择最佳匹配：从 srcset 中选择宽度≥所需宽度且最接近的图片。如果没有更大的，则选最大的。
4. 缓存友好：浏览器还会考虑已缓存的资源，优先使用已下载的图片。

注意：不同浏览器实现略有差异。Chrome 倾向于选择稍大的图片以保证质量，Safari 更倾向精确匹配。

srcset + sizes（分辨率切换）：同一张图片的不同分辨率版本，浏览器根据屏幕条件选择。图片内容、比例、裁剪完全相同，仅分辨率和文件大小不同。适合大多数场景。

<picture> 元素（艺术指导）：可以在不同条件下显示完全不同的图片——不同的裁剪、比例、甚至内容。例如：

• 移动端显示正方形裁剪的产品图，桌面端显示横向全景图
• 支持不同格式（WebP 回退到 JPEG）
• 根据设备方向切换图片

简单判断：同一图片不同尺寸 → srcset；不同图片 → <picture>。两者可结合使用。

正确实施响应式图片对SEO有显著正面影响：

• LCP（最大内容绘制）：通过为不同设备提供合适尺寸的图片，大幅减少图片加载时间，直接改善 LCP 指标。LCP 是 Google 排名因素之一。
• CLS（累积布局偏移）：配合 width/height 属性预留空间，避免图片加载时布局抖动。
• 移动优先索引：Google 使用移动端视角索引，响应式图片确保移动端获得优化体验。
• 带宽节省：移动设备下载更小的图片，提升页面速度——速度是排名因素。
• 最佳实践：始终包含描述性的 alt 文本，使用 loading="lazy" 延迟加载非首屏图片。

验证方法：

• Chrome DevTools：打开网络面板，刷新页面，查看实际下载的图片URL和尺寸。切换到不同设备模拟模式，观察下载的图片是否变化。
• 响应式图片测试工具：如 RespImageLint 浏览器扩展。
• 手动检查：在 img 元素上右键 → 检查 → 查看 currentSrc 属性（JavaScript: document.querySelector('img').currentSrc），显示浏览器实际选择的图片URL。
• Lighthouse 审计：会标记尺寸不合适的图片，提示可以优化的地方。
• 常见问题：始终下载最大尺寸图片 → 检查 sizes 是否准确；移动端下载桌面尺寸 → sizes 可能缺少小视口条件。