这是将韩国美妆品牌 REBEAUTY 的 EMS Brush Air mini 日语详情页重构为 HTML 的实际案例。原图为一整张长图，重构后则成为文本、图片和布局相分离的真实网页。以下数据均来自本案例的实际测算结果。
原图
- 参考画布
800 × 9,371 px—— 无法单屏展示的超长纯图片页面 - 1 个图片文件，
1.4 MB - 从标题、正文、价格到评价，页面上的所有文字均为像素。无法搜索、复制、翻译或修改。
重构结果
| 项目 | 结果 |
|---|---|
| 文档语言 | <html lang="ja"> —— 声明为日语文档 |
| 版块数 | 12 个 |
| 标题结构 | h1 1个 · h2 10个 · h3 3个 |
| 文本 | 将 103 个文本块 · 865 个字符还原为真实文本 |
| 分离图片 | 15 个（模特展示图、产品阵容、前后对比图、评价头像） |
| 样式 | 行内 CSS 27 KB —— 完美复原原有布局 |
原图 ↔ 还原效果
左侧为原版整张图片，右侧为重构后 HTML 页面的实时渲染截屏。两侧面板保持相同进度同步滚动。
原图（1 张整图）800×9,371
还原效果（实时 HTML）支持选中复制
page.html
加载中…渲染高度两侧完全一致，均为 9,371 px —— 上述质量报告中的 height ×1.000 即代表该数值。
质量报告
这是将还原效果与原图进行像素级比对的数值。
| 指标 | 数值 | 说明 |
|---|---|---|
| height | ×1.000 | 总高度与原图完全一致 |
| rows | 0.985 | 按横向行划分的亮度分布相关度 |
| struct | 6.13 | 结构误差（数值越低越接近原图） |
| bands | 23/24 | 垂直划分为 24 个区间中，有 23 个在容差范围内 |
| pxdiff | PASS | 通过像素级比对门禁 |
传输体积
| 类别 | 大小 |
|---|---|
| 原版整张图片 1 个 | 1,438 KB |
| 还原 HTML 文档 | 48 KB |
| 分离图片 15 个 | 403 KB |
| 重构合计 | 451 KB (约减少 69%) |
即便仅看总量也缩减到了三分之一以下，实际加载体验的提升则更为显著。纯图片页面需要一次性下载完 1.4 MB 才能完整显示，而重构后的页面仅需先加载 48 KB 的文档即可快速渲染，图片则在进入视口时逐个按需加载。
内容变更时 —— 维护方式彻底改变
详情页制作并非一劳永逸。换季价格、促销文案、配送说明、成分标注 —— 变动的大多只是“寥寥数行文字”。然而在纯图片页面中，哪怕只改一行字，也必须重新导出整张图片。
| 修改一行文案时 | 纯图片页面 | 重构后的 HTML |
|---|---|---|
| 原设计文件 | 需要寻找 PSD、AI 文件（若缺失则需重做） | 不需要 |
| 操作人员 | 设计师 | 业务负责人本人 |
| 工作内容 | 修改 → 重新导出 → 重新上传 | 仅修改对应语句 |
| 同步至多语言 | 按语言数量分别重新制作图片 | 仅替换对应位置的文本 |
| 改动范围 | 整个图片文件（1,438 KB） | 几行文字 |
该页面包含 103 个文本块，均以标签形式准确定位在对应位置。将“45%”更改为“60%”，只需修改该文本块即可完成，其余布局、图片和间距均无需改动。
Gumson 的文本编辑模式正是基于此需求打造的工具。它能从转换结果中提取文字并以表单形式呈现，修改保存后即可自动写回原位。由于不会触碰标签结构和 CSS，完全不必担心排版走样。
带来哪些改变
- 可被检索 —— 865 个字符均为真实文本，可被搜索引擎与 AI 问答引擎读取。图片中的文字则无法被索引。
- 轻松翻译 —— 仅需替换文本块。无需重新调整排版布局，拓展多语言版本的成本几乎为零。
- 修改便捷 —— 修改价格或单行文案时，既不需要原始设计文件，也无需设计师介入。
- 支持朗读 —— 屏幕阅读器可朗读页面内容，用户也可自由放大字号。
- 消减维护成本 —— 即使价格或文案发生变化，也无需重新制图，仅修改文本块即可；新增语言亦无需重新搭建布局。
亲自对比体验
原图截屏与还原效果并排展示，支持以相同倍率、相同进度同步滚动以供对比复核。
