案例：把公司內部的圖片文件變成人與 AI 都能閱讀的 HTML — GNA 工作守則

企業內部其實有許多僅以單張圖片形式存在的文件。工作準則、內部公告、組織架構圖、教育訓練資料——原始設計檔案早已遺失，只剩 JPG 圖片在通訊軟體和公佈欄上流傳。

對人眼閱讀來說看似沒問題，但一旦想對這份文件做點什麼時，問題就來了。想引用一行內容得手動重新打字；想搜尋「加班相關規定是什麼」卻什麼都找不到；想請 AI 協助處理，也沒有文字可以複製貼上。

以 GNA 的內部工作準則文件為例，以下各項數據皆為針對該案例實際測量的數值。

對象：內部工作準則公告

• 「辦公室禮儀 — GNA 工作準則」
• 參考畫布 853 × 3,612 px，圖片檔案 1 個 600 KB
• 涵蓋 8 個領域的 34 條準則，全都封死在像素中。

仍是圖片時無法實現的事

轉換為 HTML 之後

對使用者帶來的改變

• 可直接選取並複製文字。將準則引用到公告或電子郵件時，再也不需要重新打字。
• 可透過 Ctrl+F 搜尋。輸入「服裝」、「回報」、「資訊保護」即可立刻跳轉至該項目。
• 放大文字也不失真。不同於圖片放大會模糊破圖，純文字放大數倍依然清晰銳利。
• 手機上能舒適閱讀。無需橫向滑動查看，版面會自動適應螢幕寬度折行排版。
• 螢幕報讀軟體能順暢朗讀。9 張圖片皆已加上 alt 替代文字，清楚傳達圖片所呈現的內容。

對 AI 帶來的改變

這正是核心關鍵所在。AI 並非像人眼一樣看畫面，而是讀取結構。如果直接提供整張圖片，模型只能猜測文字；但這份文件現在具備了清楚的結構：

h1  GNA 辦公室禮儀
h2  工作態度            → li 7 個
h2  打招呼與協同合作     → li 4 個
h2  清潔與整頓          → li 7 個
h2  會議與回報          → li 4 個
h2  服裝與衛生          → li 3 個
h2  對外應對            → li 3 個
h2  公司財產與資訊保護   → li 3 個
h2  其他                → li 3 個

各條準則隸屬於哪個領域，都已透過標籤清楚標示。因此，當提出「請整理會議相關準則」、「請將服裝規定改寫為新進員工指引文句」等需求時，模型便能有憑有據地精確回答。將內部文件導入聊天機器人或搜尋工具時，也不再需要上傳圖片，直接提供這份 HTML 即可。

原始檔案 ↔ 還原成果

雖然進行了上述結構重整，但視覺呈現完全維持不變。左側為原始圖片，右側為重構後的 HTML 畫面截圖。兩側窗格會以相同比例同步捲動。

原始 ↔ 成果 查看 HTML 在新視窗開啟 ↗ 右側窗格的文字可選取·複製

原始檔案（單張圖片） 853×3,612

還原成果（即時 HTML） 可選取·複製

兩側截圖皆為 853×3,612 px — 相同的畫面，可複製的文字。

品質報告

檔案容量大幅減輕

原本在通訊軟體中轉傳的 600 KB 圖片，轉換為僅需 133 KB 的單一連結。若準則有所調整，無需重新製作圖片再四處發送，只需直接修改該頁面的文字即可。

準則變更時 — 真正的差異在此體現

內部文件本就以持續變動為前提而存在。新增一項規定、微調文句用詞、調整負責部門等情況隨時發生。若為圖片文件，每次修改都必須重複以下繁瑣流程：

這份文件將 34 條準則各自對應為一個 <li>，8 個領域各自對應為一個 <h2>。若要「在清潔與整頓中新增一項」，只需在該 <ul> 內增加一行，其餘 33 個項目與版面配置完全不受影響。

最大的轉變在於不再需要重新發布與散播。圖片文件每逢修改就必須重新發送新檔，即便如此，員工私下儲存的舊版本依然到處流傳。而 HTML 文件僅有唯一網址，一旦修改完成，所有人看到的即是最新版本。內部聊天機器人或搜尋工具所引用的原始內容，也會同步自動保持最新狀態。

總結

• 企業內部圖片文件雖然人眼看得到，但複製·搜尋·語音朗讀·AI 輸入等功能通通無法使用。
• 在維持相同視覺設計的前提下重構成 HTML，人類便能自由複製與搜尋，AI 也能依循語意結構精準讀取。
• 在此案例中，34 條準則與 8 個領域皆化為完整的語意標籤，畫面更精準通過像素比對驗證，與原圖別無二致。
• 維護成本產生了根本性的改變。準則若有變更只需修改一行文字，無須重新製作圖片或重新發送。網址始終如一，所有人看到的永遠是最新版本。

並列對照原始檔案 ↔ 還原成果 ↗

僅開啟重構後的 HTML 文件 ↗ — 歡迎開啟並親自體驗選取·複製文字。