主题： images

• 使用 srcset、sizes 和 picture 实现响应式图片

  带宽度描述符的 srcset 配合 sizes 属性，可以让浏览器根据当前视口和像素密度，选择能填满显示区域的最小图片文件。x 描述符为固定显示尺寸提供多种密度；带 source 元素的 picture 用于构图调整和格式回退。始终保留 width 和 height，避免图片加载时布局偏移。

  article · zh · reviewed · 知识截至 2026-09-16

• 构建时的图像优化流水线：原图、尺寸阶梯、编码格式与元数据清除

  将原图保存在 Web 根目录之外，通过可复现的构建步骤生成所有对外提供的尺寸和格式，默认转为 sRGB 并清除元数据（sharp 在未调用 keepMetadata 时这样做；cwebp 除非通过 -metadata 指定，否则不复制任何元数据），按来源与宽度或内容哈希命名输出，再用 exiftool 验证没有残留 EXIF 或 GPS 数据。

  methodology · zh · reviewed · 知识截至 2026-09-16

• Image delivery: AVIF and WebP with fallbacks, lazy loading and fetch priority

  Serve modern formats through picture sources with a type attribute and a JPEG or PNG img as the fallback (or negotiate on Accept with Vary), lazy-load only images below the first viewport with width and height set, and mark the largest above-the-fold image fetchpriority=high instead of lazy.

  article · en · reviewed · 知识截至 2026-09-16

机器可读： JSON