图集页往往因大图导致首屏缓慢。aoglang 在构建阶段用 sharp 将 upload 原图转为 WebP，并区分列表缩略图与详情主图。本文详解参数选择、构建流程与对 Core Web Vitals 的影响。
为什么要两套尺寸
瀑布流列表可能同时展示数十张卡片，若每张都加载 4K PNG，移动网络下体验很差。本站规则：卡片用 *-thumb.webp（宽≤480px），单图页用 *.webp（宽≤1400px），原图仅保留在本地 upload 目录。
sharp 构建参数
在 tools/build.mjs 中：IMAGE_MAIN_MAX = 1400、IMAGE_THUMB_MAX = 480，WebP 质量主图 82、缩略图 78。若原图已小于目标宽度则跳过放大，避免无意义插值。运行 npm run build 时仅处理有变化的 upload 文件（已有 WebP 则跳过）。
HTML 中的 width/height
列表卡片与详情页 <img> 都填写 width 与 height，配合 CSS --thumb-ar 比例变量，减少布局偏移（CLS）。这是静态图集站提升体验分的低成本手段。
与 SEO 和 AdSense 的关系
更快的 LCP 有利于体验信号；Google 将页面体验纳入排名因素。AdSense 审核也会看「用户是否愿意停留」——首屏 3 秒内应出现内容而非空白。专题文章 + 轻量缩略图列表，比一次性加载数十张 4K 图更易通过质量评估。详见 SEO 复盘。
ImageObject 与图片 SEO
每张旗舰单图仍有 ImageObject JSON-LD；非旗舰单图 noindex 但保留可分享 URL。缩略图不参与 schema 的 contentUrl，主图 URL 指向 1400px WebP。
发布新图流程
将 PNG/JPG 放入 upload/picture/，运行 npm run build，脚本复制并优化到 assets/img/gallery/，并再生双语 HTML、sitemap 与搜索索引。更多结构见 静态网站搭建指南。
故障排查
若缩略图未生成：确认已安装 sharp（npm install）且 Node 在 PATH 中。Windows 下若 npm 报 node 找不到，使用完整路径或把 Node 加入系统环境变量。