三档清晰度怎么定：thumb、display、full 的取舍

用 Sharp 生成 720、1600、2560 三档 WebP 图片，分别服务缩略图、页面展示和大图浏览，平衡清晰度与加载成本。

2026年5月4日约 445 字

内容系统性能优化

图片优化最容易陷入一个误区：先问"压到多小才好"，却没问"这张图会在哪里出现"。

我这次选择了三档清晰度：

为什么不是只保留一张

只保留大图最省事，但列表页会浪费流量。只保留小图也能快，但一进弹窗就露出模糊感。三档方案的好处是让每个 UI 场景拿刚好够用的图。

thumb 负责快，display 负责看得舒服，full 负责给愿意进一步查看的人。

WebP 在照片类图像上压缩率不错，浏览器支持也足够成熟。脚本用 Sharp 统一转 WebP，并打开 smartSubsample，避免手动处理不同原始格式的细节。

处理时还会 rotate()，让 EXIF 方向先落到像素上，避免页面里出现"文件方向和视觉方向不一致"的问题。

脚本还会生成一张 24px 内的小 WebP，然后转成 base64 Data URL。它很小，但对体验很有用：图片真正加载前，页面可以先显示柔和的色块，避免空白跳变。