响应式图片断点生成器 - 自动生成 srcset 尺寸

srcset 是 HTML <img> 标签的属性，允许您为不同屏幕宽度提供不同尺寸的图片。它包含一组图片URL及其对应的宽度描述符（如 image-640w.jpg 640w）。

浏览器会根据设备的屏幕宽度、像素密度以及 sizes 属性的值，自动选择最合适的图片进行加载。这意味着手机不会下载为桌面准备的大图，从而节省带宽、提升加载速度。

最佳实践： 始终配合 sizes 属性使用 w 描述符（而非 x 描述符），让浏览器做出最优选择。

w 描述符（如 640w）：指定图片的实际宽度（像素）。浏览器结合 sizes 属性和屏幕DPR来决定加载哪张图。这是现代推荐做法。

x 描述符（如 2x）：指定图片适用于的像素密度倍数。例如 2x 用于Retina屏幕。这种方式不够灵活，无法根据实际布局宽度优化。

推荐： 使用 w 描述符 + sizes，因为它同时考虑了视口宽度和像素密度，能做出更精确的选择。

选择断点取决于您的布局和用户设备分布：

• 移动端：320px - 480px（覆盖大多数手机）
• 平板：640px - 1024px
• 桌面：1280px - 1920px
• 大屏：2048px - 2560px（2x版本可达3840px）

通常3-5个断点就能覆盖90%以上的场景。过多的断点会增加维护成本，过少则无法充分优化。建议分析您的用户设备分布数据来做决策。

img + srcset：用于同一图片的不同尺寸版本（分辨率切换）。浏览器根据屏幕条件自动选择。这是最常见的响应式图片方案。

picture 元素：用于"艺术指导"场景——在不同断点显示不同的图片（如不同裁剪比例、不同构图）。也常用于提供不同格式（WebP、AVIF）的备选。

简单记忆：同一张图不同尺寸→srcset；不同图不同断点→picture。

sizes 告诉浏览器图片在页面布局中实际占据的宽度。例如 sizes="(max-width: 768px) 100vw, 50vw" 表示：屏幕≤768px时图片占满全宽，否则占半宽。

浏览器使用这个信息，结合当前视口宽度和DPR，计算出需要的像素宽度，然后从srcset中选择最接近的图片。如果没有sizes，浏览器默认按100vw处理，可能会加载过大的图片。

提示： sizes可以使用vw、px、calc()等CSS单位，非常灵活。

使用 <picture> 元素可以提供多种格式的备选：

<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="描述">
</picture>

浏览器会从上到下选择第一个支持的格式。WebP 可减少约25-35%文件大小，AVIF 可减少约50%。两者结合srcset可实现最佳性能和兼容性。

srcset 和 sizes 获得所有现代浏览器的良好支持，包括 Chrome、Firefox、Safari、Edge 的最近版本。全球覆盖率超过97%。

对于不支持的旧浏览器（如IE11），它们会回退到 src 属性加载默认图片，不会导致图片无法显示。这是一种优雅降级的方案。

几种验证方法：

1. 使用本工具的预览功能，拖动滑块查看不同宽度下的表现
2. 浏览器DevTools：打开Network面板，刷新页面，查看实际加载的图片请求
3. 在img元素上右键→检查元素，查看 currentSrc 属性（JavaScript可读取）
4. 使用Chrome的响应式设计模式（Device Toolbar）模拟不同设备
5. 在线工具如 PageSpeed Insights 会检查响应式图片的使用情况