响应式图片：用合适的像素减少等待

一张图片可以很漂亮，也可能成为页面等待最久的部分。把大图简单缩成小尺寸显示，只改变了外观，不一定减少网络传输。图片优化应同时考虑构图、像素、格式和加载时机。

本篇目标： 为一张通用封面提供不同尺寸版本，让浏览器按布局选择，而不是每次都下载最大图。

srcset 给候选，sizes 说明布局

使用宽度描述符时，srcset 列出图片候选及其实际宽度，sizes 描述对应条件下图片的显示宽度。浏览器结合这些信息与设备条件作出选择。MDN：响应式图片

<img
  src="cover-960.webp"
  srcset="cover-480.webp 480w, cover-960.webp 960w"
  sizes="(max-width: 640px) calc(100vw - 36px), 420px"
  width="960" height="600"
  alt="用于说明构图的示例封面"
>

候选宽度必须与文件真实宽度一致，sizes 也要匹配实际 CSS 布局。写一组看起来合理的数字，却让图片在页面中占据另一种宽度，会削弱选择效果。

清晰度和构图是不同的问题

同一张图缩小后，主体可能变得难以辨认。需要不同裁切时，可以考虑 picture 与 source 提供不同构图，而不是只增加像素版本。

人物图片尤其要检查脸部、头饰和手部是否落在安全区域。object-fit 能控制填充方式，object-position 可以调整关注位置，但它们不会改变下载文件本身的体积。

首屏和正文采用不同策略

关键首屏图片应尽早加载，正文深处的图片可以延迟加载。为图片预留正确宽高比例，有助于减少加载后页面跳动。不要把所有图片都提高优先级，否则“优先”就失去区别。

检查时既看视觉清晰度，也看网络面板实际选择了哪张候选。分别在窄屏和宽屏、不同像素密度下确认资源大小，并测试图片加载失败时正文是否仍然清楚。

优化的目标是让每个位置得到足够好的图，而不是统一追求最大的分辨率。少传输没有被用到的像素，也是在为读者保留时间。