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

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

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

变体	宽度	质量	用途
thumb	720	70	图集网格、快速预览
display	1600	76	弹窗主图、常规浏览
full	2560	82	查看大图、保留细节

为什么不是只保留一张

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

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

为什么都转成 WebP

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

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

模糊占位图也在这一步生成

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

小结

三档清晰度不是为了复杂而复杂。它把"照片很好看"和"网页要快"拆开处理：默认轻，点开清楚，需要时再给大图。这个边界一旦确定，后面的上传、缓存和内容生成都会顺很多。