网页优化
响应式图片：理解 srcset、sizes 和 picture
一个原图不适合所有屏幕
小屏幕加载桌面大图浪费带宽，高密度屏幕使用过小图片又会模糊。响应式图片让浏览器根据布局和设备选择资源，前提是提供真实的候选尺寸，而非几个相同文件的不同名称。
宽度描述符
srcset 中的 640w、1280w 等应对应文件真实像素宽度。sizes 描述图片在不同视口下占据的 CSS 宽度。浏览器结合此信息和设备条件选择候选资源，应用不应假设总会选中某一个文件。
像素密度描述符
固定显示尺寸的图标或头像可以提供 1x 和 2x 版本。密度描述符与宽度描述符是两种方案，不应在同一个候选列表中随意混合。选择方式应符合图片的实际布局。
picture 的用途
picture 的 source 可以按格式或媒体条件提供资源。格式后备用于 AVIF、WebP 与 JPEG 等之间的选择；按断点更换不同裁剪则用于艺术指导。最终的 img 仍应提供 src、替代文本和尺寸。
准备与测试
按布局准备少量合理尺寸，避免生成过多几乎相同的变体。检查移动端、桌面及高密度显示器上的网络请求，同时调整视口和 DPR。确保 sizes 与 CSS 保持同步，且图片加载前已经预留空间。
动手处理文件
保留原始文件，先用一个样本检查结果，再处理其他文件。imgpact 在您的浏览器中处理所选文件；首次加载软件仍需要网络连接。