根据布局选择输出宽度

先记录图片在主要页面断点下的实际显示宽度。普通内容图片可能需要 480、768 和 1200 像素版本，全宽主图还可能需要 1600 像素。不要生成超过原图宽度的版本，因为放大只会增加体积，不会增加真实细节。

浏览器会结合 srcset 的宽度描述、sizes 和设备像素密度选择文件。sizes 必须尽量准确：如果图片实际只占页面一半，却被描述为占满视口，浏览器可能选择过大的文件。

sizes 描述的是显示槽位

sizes 描述图片在布局中占据的空间，不是源文件尺寸。例如，图片在手机上占满视口、桌面上占一半宽度时，可以使用 `(max-width: 700px) 100vw, 50vw`。

代码应放回真实页面测试。浏览器开发者工具可以查看最终选择的图片，但重复测试时要注意缓存，浏览器可能继续使用已经下载的较大文件。

让代码与文件保持一致

使用可预测的文件名，并上传 srcset 中引用的每一个宽度。缺少文件会产生额外请求或回退行为。图片元素还应包含 width 和 height 属性，为加载过程预留空间，减少页面跳动。

图片承载信息时，应在最终页面填写有意义的 alt 文本；只有纯装饰图片才使用空的 alt 属性。

  • 只生成布局真正会使用的宽度
  • 所有版本保持相同格式和裁剪范围
  • 填写图片固有宽度和高度
  • 分别在手机和桌面检查浏览器选择的文件