12451
|
fe5eaa51c4
|
feat(landing): 首页主图升级 + 补 og:image 社交分享图（用 Agnes Image 生成）
## 主图：906KB 平淡白底照 → 146KB 影棚级产品图
原 `hero-bg.png` 是 1312×736 的产品照，柜子偏在画面右侧、左侧大片死白，
且被 `background-size:100% 100%` 横向拉伸 34%（见上一提交的分栏改造）。
本次用 **Agnes Image 2.5 Flash 图生图**升级：
- 输入：原图压缩到 1024 宽（51KB）作 Data URI
- 提示词：保持 6×6 共 36 仓的矩阵布局（**产品规格是真的，不能改**），
柜体居中构图，换成干净现代的商业影棚环境，品牌蓝 #0366e6 轮廓光，
玻璃仓门反光、地面投影与倒影，明亮浅色基调
- 输出 2K 4:3（2304×1728）→ 压到 1800 宽 JPEG q87 = **145.9KB**
## og:image：从缺失到补齐
原页面**完全没有** og/Twitter 元信息 —— 链接被分享到微信/Twitter 时没有预览图。
现补全 `og:type/site_name/title/description/image/url` + `twitter:card=summary_large_image`
等，配图用 2K 16:9 生成后压到标准 1200×630 = 68.6KB。
## 文件
| 文件 | 变化 |
|---|---|
| `deploy/landing/hero.jpg` | 新增（145.9KB，1800×1350） |
| `deploy/landing/og-image.jpg` | 新增（68.6KB，1200×673） |
| `deploy/landing/index.html` | 主图 `hero-bg.png`→`hero.jpg`；补 og/Twitter 元信息 |
| `deploy/landing/hero-bg.png` | **删除**（905.9KB，已无人引用） |
首屏图片总体积：905.9KB → **214.5KB**（-76%）。
## 实测（发布后打真实 URL）
```
200 145.9KB image/jpeg app.anzhizhichong.com/hero.jpg
200 68.6KB image/jpeg app.anzhizhichong.com/og-image.jpg
200 21.1KB image/svg+xml favicon.svg
200 12.3KB image/svg+xml logo.svg
404 text/html hero-bg.png （文件确已删除）
```
HTML 已确认引用 `hero.jpg` 且含 `og:image` / `twitter:card`。
## 过程中修掉的 CLI 缺陷
生成时撞到 Windows **进程命令行 32KB 上限**（Data URI base64 走参数直接 `WinError 206`）。
已给两个 CLI 补上本地文件入参：`--image-file`（图像）、
`--image-file`/`--first-frame-file`/`--last-frame-file`/`--audio-file`（视频），
内部转 Data URI，不再走命令行。
## 备注
生成按 Agnes 的**串行**要求执行：两个任务一次一个，顺序完成（主图 → og 图）。
|
2026-09-21 02:31:55 +08:00 |
|
