案例：把公司内部的图片文档变成人和 AI 都能读的 HTML —— GNA 工作守则

在企业内部，仅以单张图片形式存在的文档出奇地多。工作守则、公司内部通知、架构图、培训资料 —— 设计源文件早已不知所踪，只有 JPG 图片在即时通讯软件和公告栏中流转。

人眼直接看并没有什么问题。但一旦想对这份文档做点什么，问题就来了：想引用其中一行，必须手动抄写；搜索“加班相关守则是哪条”，什么也搜不到；想向 AI 提问，连可以粘贴的文字都没有。

我们以 GNA 的公司内部工作守则文档为例。以下数值均为基于该案例实际测得的数据。

转换对象：公司内部工作守则通知

• 《办公室礼仪 —— GNA 工作守则》
• 参考画布 853 × 3,612 px，单张图片文件 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个

每一条守则归属于哪个领域，都有清晰的标签进行标记。因此，在面对诸如“只提取会议相关守则”、“将着装规定改写为针对新员工的告知文案”等需求时，模型能够有据可依地给出回答。将公司内部文档接入 AI 聊天机器人或检索工具时，只需导入这份 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 文档 ↗ —— 欢迎打开体验划选与复制功能。