此案例將韓國美妝品牌 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 頁面的實際畫面截圖。兩側面板會以相同進度同步捲動。
原始檔案（單張純圖片頁面） 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 答詢引擎皆可讀取。圖片內的文字則無法被建立索引。
- 可被翻譯 — 僅需替換文字區塊。無須重新排版製作，拓展多語言市場幾乎零負擔。
- 隨時修改 — 修改價格或單行文案時，既不需要原始設計檔，也不需要仰賴設計師。
- 支援朗讀 — 螢幕閱讀器可讀取內容，使用者也能自由放大字體。
- 維護修改成本大幅歸零。無論價格或文案如何調整，都無須重新製圖，只要修改文字區塊即可；即使增加多種語言，也無須重構版面配置。
親自對比體驗
將原始截圖與重現成果並排呈現，可以相同比例與同步進度一起捲動進行檢視。
