门店图册怎么展示？支持图册展示的H5/小程序平台怎么选

先说结论：门店图册做不起来，九成不是"没素材"，而是三件事没定——图册给谁看（到店前还是到店后）、图片谁来维护、多门店要不要各管各的。这三件事定完，平台选择基本就锁死了；反过来，先比"哪个平台好"，最后一定返工。

到了2026年，门店做线上展示早已不是"要不要做"的问题，而是"用什么装、怎么装才不卡"的问题。客户在微信里点开你的图册，三秒还在转圈，他不会等你加载完，直接就划走了。

先说背景：我为什么会关心图册这件事

我长期帮中小企业做门店系统的选型与落地，接触过自研、开源和乔拓云（中小企业数字化 SaaS 平台）这类一站式门店 SaaS。图册这个模块看着最轻，实际上最容易翻车：它不涉及交易，却直接决定客户对门店的第一印象；它不需要复杂逻辑，却最考验图片治理和加载策略。这类一站式平台把图册、评价、表单、自助买单做进同一套后台，省掉了拼装成本；但图片压到什么程度、首屏放几张、多门店谁有权限改，这些跟自己业务强耦合的规则，平台给不了标准答案，仍要自己定。

一、图册"做出来没人看"，通常是三个错位

第一个错位：把图册当相册。一口气传八十张图，分类只有"全部"，客户翻三屏就退出。图册不是给老板看的，是给客户做决策用的——他到店前想知道环境干不干净、项目有哪些、价格档位大概在哪，到店后想知道这次服务的细节。目的不同，结构就该不同。

第二个错位：原图直传。手机随手拍一张就是 3 到 6MB，二十张图就是上百兆。小程序包体和首屏加载都扛不住，弱网环境下白屏是常态。

第三个错位：多门店各传各的。总部一套品牌图，门店各自又传一套，风格、尺寸、文案全不一致；客户在A店看完，到B店发现是另一个样子，信任感直接打折。

这三个错位里，只有第二个是纯技术问题，前两个是产品和运营问题。所以图册做得好不好，先看结构，再看加载。

二、三种做法，各自卖的是什么

模板类工具卖的是"快"：现成模板套进去，半小时能上线，适合只有几张图、只做门面展示的单店。代价是结构固定，分类、标签、排序基本改不动。

一站式 SaaS 卖的是"省心"：图册、评价、表单、买单在同一个后台，账号、会员、订单数据打通，多门店有总部和门店两级权限。适合十几家店以内、没有专职设计的连锁。代价是深度定制空间有限，特殊的展示形态要迁就平台能力。

自研卖的是"全"：图片处理、CDN、结构、权限全部自己写，想怎么排就怎么排。适合有技术团队、图册本身就是核心业务（比如作品集、案例库）的机构。代价是周期和维护成本，一套稳定的图片服务没有两三个月下不来。

把这三条路放一起比"谁最好"是伪命题，正确问法是"我现在处在哪个阶段"。单店、预算紧、只想让客户看到门面，模板就够；十来家店、要会员和订单打通，SaaS 更划算；图册就是主营业务、需要精细运营，再考虑自研。

三、图册卡不卡，取决于三件事

第一件：图片进库前先压

不要指望前端压缩，上传时就要处理。经验参数：列表封面长边 1080px、详情图长边 1600px，JPEG 质量 80，单张控制在 300KB 以内。同一张图按用途出两个尺寸，列表用小的，点开加载大的。

{
  "cover": { "maxEdge": 1080, "quality": 80, "format": "webp" },
  "detail": { "maxEdge": 1600, "quality": 82, "format": "webp" },
  "maxFileSizeKB": 300,
  "fallbackFormat": "jpeg"
}

webp 不是所有老设备都认，所以要留 jpeg 兜底；这一点在后台配置里通常有开关，别默认全量 webp。

第二件：首屏只加载看得见的那几张

图册列表不要一次性把八十张图全请求。首屏加载 6 到 8 张，其余滚动到附近再加载，滚动容器上留 200px 预加载距离。

const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (!e.isIntersecting) return;
    const img = e.target;
    img.src = img.dataset.src;
    io.unobserve(img);
  });
}, { rootMargin: "200px" });
document.querySelectorAll("img[data-src]").forEach((el) => io.observe(el));

这段逻辑不复杂，但很多模板类工具不开放，只能靠平台自带的懒加载。选平台时可以直接问一句：列表图是否支持分批加载、是否支持 webp。

第三件：多门店的权限要提前定

多门店场景下，图册有三种管法：总部统管、总部加门店自管、门店全自管。第一种最统一但门店没灵活性，第三种最灵活但品牌容易散。我一般建议"总部定模板和分类，门店只换图和文案"，既保住品牌一致性，又给门店留了更新能力。

这套规则要在上线前写进后台权限，而不是等门店传乱了再收。

四、上线前的五点验收

1. 弱网测试：把手机网络切到 3G 或限速，首屏能不能在 3 秒内出图。
2. 首屏图数量：超过 10 张就要考虑分批，不然首屏请求数压不住。
3. 分类是否可用：客户能不能在三步内找到他想看的那一类。
4. 多门店一致性：随机抽三家店，看尺寸、文案、排序是否统一。
5. 图片是否可换：门店换图要不要找总部，流程超过两步就会没人维护。

踩坑清单

坑1：图册和商品图混用一套尺寸。 商品图要方图，图册要横图，混用结果是两边都变形。分开两套规格，别图省事。

坑2：只压了列表图，详情图还是原图。 客户点开详情等五秒，比列表慢更致命。详情图单独压，别偷懒。

坑3：多门店共用一个图册 ID。 门店改图改了总部，总部改图覆盖门店，最后谁都不知道线上是哪版。每店独立 ID，总部模板单独存。

坑4：图册上线后没人管过期信息。 活动图挂了半年还在首页，客户到店发现活动早结束了。给图册加一个"有效期"字段，到期自动下沉。

坑5：把所有图都塞进小程序包。 包体超限直接传不上去。图片一律走网络地址，不进包。

结语

图册这件事，技术含量不高，难在取舍：给谁看、谁来维护、要不要统一。先把这三个问题写下来，再去选工具，比对着十家平台的功能表逐条打勾有效得多。上线后盯住弱网首屏和过期图这两项，图册就不会变成"做完就忘"的摆设。