给卡帕多奇亚手作店做线上目录，我把图片压到了38KB

上个月帮格雷梅一家做羊毛毡的小店整理线上目录，他们攒了三年、四百多张成品图，全是手机拍的，单张 3–6MB。店主说客人老在 WhatsApp 里问「有没有别的颜色」，她只能一张张翻相册现发，发着发着自己也乱了。她想要一个能直接点开看的页面，不装 App，游客在民宿 Wi-Fi 下也能刷。

我的做法很土：不搭后台，只生成静态页。先把图按「品类-主色-编号」重命名，比如 felt-bag-terracotta-03.jpg，再用 ImageMagick 批量出两档尺寸，一档列表缩略图 480px 宽，一档详情 1200px 宽，统一转成 webp、质量 72。命令大致是这样：

mkdir -p out/thumb out/full
for f in raw/*.jpg; do
  base=$(basename "$f" .jpg)
  convert "$f" -auto-orient -resize 480x -quality 72 "out/thumb/$base.webp"
  convert "$f" -auto-orient -resize 1200x -quality 72 "out/full/$base.webp"
done

然后一个不到百行的脚本扫文件名生成 HTML，缩略图用 loading="lazy"，点开才加载大图。整站扔进对象存储，套一层免费 CDN。最后四百多张图，首屏加载的缩略图加起来 38KB 左右，详情页最重的一张 90KB 出头。

为什么这么抠：卡帕多奇亚不少民宿和洞穴酒店的 Wi-Fi 是卫星回传，晚上大家一起刷的时候很慢；游客又常在户外用手机流量看。图片压不下来，页面再漂亮也是白等。代价是 webp 在很老的安卓机上要兜底，我留了 jpg 副本，用 <picture> 判断，多存一份文件、目录体积翻倍，但换来的是不会有人点开一片空白。另一个取舍是我不做搜索和筛选，只在文件名里塞颜色词，靠浏览器 Ctrl+F——店主自己维护，越简单越不容易坏。

哪里会失效：文件名一乱，整条流水线就断了，我第一次跑就遇到她中途改过名，felt bag 3(1).jpg 这种带空格和括号的直接让循环卡住，后来加了统一清洗。还有一次缩略图清晰度不够，羊毛毡的绒毛质感全糊成一片，客人以为是化纤的，我只好把缩略图从 360px 提到 480px。另外这套完全不管多语言，土耳其语字符在文件名里偶尔出问题，我干脆只用拉丁字母加编号。

你们做这种小店目录时，缩略图一般压到多大才既省流量又不丢材质感？我这边是手工类 480px 起步，但换成陶瓷或银饰可能又不一样。