word markdown images docx accessibility

Word to Markdown with Images:提取、路径和替代文本

将带有图像的 Word 文档转换为 Markdown、提取 DOCX 媒体、创建可移植路径、编写有用的替代文本并防止损坏的图像链接。

W
WordToMD 团队
·

将 Word 文档中的文本转换为 Markdown 非常简单。转换图像是一项单独的工作:Word 将媒体存储在 .docx 包,而 Markdown 仅存储对图像文件的文本引用。

可靠的工作流程是转换文档结构,提取图像文件,给它们提供稳定的名称,然后使用相对路径和有用的替代文本将每个图像连接到 Markdown。 本指南展示了如何在不丢失资产跟踪的情况下做到这一点。

简短答案

如果您只有一个文档且只有几张图像:

  1. 转换 .docx 文本 WordToMD.
  2. 从 Word 文件的副本中提取图像。
  3. 将图像放入 images/ or assets/ 文件夹。
  4. 添加 Markdown 参考,例如 ![Login settings screen](images/login-settings.png).
  5. 在目标位置预览最终的 Markdown。

如果您有许多文档或许多嵌入图像,请使用 Pandoc with --extract-media. It can create the media files and references in one command, although you should still rename, optimize, and review the assets.

为什么图像的行为与文本不同

A .docx 文件是一个 ZIP 包,包含 XML、关系、样式和媒体。嵌入图像字节通常位于 word/media/,而关系文件告诉 Word 每个图像出现的位置。该文档还可以包含裁剪说明、浮动位置、标题、装饰形状以及没有直接 Markdown 等效项的链接。

Markdown 本身不嵌入图像字节。标准图像语法包含三部分信息:

![Alternative text](images/architecture-diagram.png "Optional title")
  • Alternative text 描述了看不见的图像。
  • images/architecture-diagram.png 告诉渲染器文件所在的位置。
  • 可选标题可能会显示为工具提示,具体取决于渲染器。

这种分离对于版本控制和发布很有用,但这意味着完整的迁移必须同时管理 .md 文件及其资产。

WordToMD 对嵌入图像的作用

WordToMD 可以在浏览器中转换标题、段落、列表、链接、强调、基本表格和支持的嵌入图片。找到图片后,结果包括 Markdown + 图像 ZIP 选项包含 .md 文件和 images/ 文件夹。

您的文档保留在本地,并且生成的 Markdown 图像引用使用打包的相对路径 images/ 文件夹。在发布之前查看替代文本、重命名通用资源并检查复杂的 Word 绘图对象。

选择正确的提取方法

方法最适合优点权衡
WordToMD Markdown + 图像 ZIP一份支持嵌入图片的文档无需安装;转换和图像打包保留在浏览器中复杂的绘图对象和最终资产命名可能需要审查
将 DOCX 副本重命名为 ZIP直接访问原始嵌入媒体 直接无需额外转换器文件名,例如 image1.png 不解释安置
从 Word 保存为网页喜欢 Word 界面的用户创建 HTML 文件和媒体文件夹生成的名称和 HTML 可能需要清理
Pandoc --extract-media许多图像、重复作业或自动化自动提取媒体并写入参考需要命令行安装和审查

工作流程 A:WordToMD Plus 手动图像提取

此方法可保持文本转换快速,同时让您可以控制资源名称和位置。

1. 转换并保存 Markdown

打开 Word到 Markdown 转换器,选择 .docx,查看可编辑结果,并下载 .md 文件。保持原始 Word 文档不变,直到迁移完成。

2. 从 DOCX 副本中提取图像

更改扩展名之前先复制一份。

在 Windows 上:

  1. 启用 文件扩展名 。
  2. 副本 handbook.docx 到工作文件夹。
  3. 将副本重命名为 handbook.zip.
  4. 提取 ZIP 存档。
  5. 打开提取的 word/media/ 文件夹。

在 macOS 或 Linux 上,普通的存档实用程序可以打开复制的文件 首页 .docx ,或者您可以复制该文件并将其扩展名更改为 .zip.

媒体目录可能包含 PNG、JPEG、GIF、SVG、EMF 或 WMF 文件。某些发布系统不处理特定于 Word 的矢量格式,因此在将不受支持的格式添加到 Markdown 项目之前,请将其转换为 SVG 或 PNG。

3. 将每个文件与其位置相匹配

名称,例如 image1.png and image2.jpeg 是包标识符,而不是有意义的资产名称。以缩略图形式打开提取的文件,并将其与 Word 文档进行比较。

在工作时创建一个简单的映射:

字位置提取的文件最终文件名
架构部分image3.pngsystem-architecture.png
登录说明image7.jpeglogin-settings.jpg
结果部分image9.pngconversion-result.png

不要假设数字顺序始终与视觉顺序匹配。标题、重复的徽标、背景和删除的内容可能会影响内部编号。

4. 创建便携式文件夹结构

一个简单的结构适用于 GitHub、Obsidian 和大多数静态站点生成器:

handbook/
├── handbook.md
└── images/
    ├── system-architecture.png
    ├── login-settings.jpg
    └── conversion-result.png

然后用相对路径引用文件:

![System architecture](images/system-architecture.png)

相对路径使文档保持可移植性。绝对路径,例如 C:\Users\Name\Desktop\image1.png 仅适用于一台计算机,并且永远不应出现在已发布的 Markdown 中。

5. 编写有意义的替代文本

Word 图像标题和 Markdown 替代文本有不同的用途。标题是可见的支持文本;替代文本是图像传达的信息的简洁替代。

弱:

![Image](images/image1.png)

更好:

![Three-stage publishing flow from Word review to Markdown repository to website deployment](images/publishing-flow.png)

对于屏幕截图,请标识相关接口和状态。对于图表,总结结论而不是列出每个视觉标记。对于不添加信息的装饰图像,请使用空替代文本:

![](images/decorative-divider.svg)

不要逐字重复周围的标题,除非它是最清晰的等效描述。

6. 在真实目的地预览

Markdown 渲染器有所不同。在以下情况下,在本地编辑器中工作的路径在部署后可能会失败:

  • 存储库使用区分大小写的文件名;
  • 网站重写资产 URL;
  • Markdown 文件移动到另一个目录;
  • 空格或非 ASCII 字符的处理方式不同;
  • 平台阻止文件格式。

在 GitHub、Obsidian 或通过网站的正常构建过程预览最终页面。检查桌面和移动设备宽度下的每张图像。

工作流程 B:使用 Pandoc 提取图像

当图像映射主导迁移时,Pandoc 更适合。

pandoc handbook.docx \
  -t gfm \
  --wrap=none \
  --extract-media=./assets \
  -o handbook.md

Pandoc 提取嵌入媒体并将引用写入生成的 Markdown。在发布之前检查生成的目录:生成的层次结构和名称在技术上可能是正确的,但难以维护。

转换后: 转换后的

  1. 删除重复或未使用的资源。
  2. 使用描述性小写名称重命名文件。
  3. 重命名后更新每个 Markdown 参考。
  4. 转换不支持的格式。
  5. 添加或改进替代文本。
  6. 压缩大文件。

对于重复转换,请参阅 批量 Word-to Markdown 指南.

常见目的地的图像路径

GitHub

将图像存储在存储库中并使用相对于 Markdown 文件的路径:

![Build status screen](docs/images/build-status.png)

文件名大小写很重要。 Build-Status.png and build-status.png 的行为可能类似于不同的文件。的 Word 到 GitHub 指南 涵盖了 GFM 清理的其余部分。

Obsidian

标准 Markdown 图像语法仍然是最便携的选择:

![Research model](attachments/research-model.png)

Obsidian 还支持 wiki 风格的嵌入,但这些是特定于应用程序的。在转换每个引用之前,确定可移植性或黑曜石本机行为是否更重要。请参阅 Word到黑曜石的工作流程.

静态站点发生器

站点可以解析与当前 Markdown 文件相关的资源, public/ 目录,或导入管道。在移动图像之前确认项目的约定。路径如 /images/guide/example.png 可以在一个站点上运行,但当该站点部署在子目录下时会中断。

阅读 Word到静态站点指南 并通过生产构建命令进行测试。

发布前优化资源

Word 文档经常包含比其显示尺寸大得多的图像。发布这些原件可能会减慢页面加载速度,而不会提高可见质量。

使用这些实用规则:

  • 导出前剪掉未使用的区域。
  • 对于摄影内容,更喜欢 JPEG 或 WebP。
  • 对于需要清晰文本的界面屏幕截图,更喜欢 PNG。
  • 更喜欢 SVG 来实现兼容的图表和徽标。
  • 将图像大小调整为合理的最大显示宽度。
  • 当源需要时删除敏感元数据。
  • 将原始高分辨率文件保留在已发布的资源目录之外。

避免自动将每个图像转换为一种格式。屏幕截图、图表、照片和透明插图有不同的要求。

常见图像问题和修复

Markdown 显示损坏的图像图标

检查相对于 .md 文件,包括大小写和扩展名。然后确认资产已提交、上传或复制到部署输出。

该图像可以在本地运行,但不能在线运行

本地路径可能指向项目外部,或者部署的站点可能使用不同的基本 URL。将特定于计算机的路径替换为存储库相对路径或站点批准的路径。

提取的图像看起来与 Word 不同

Word 可以应用裁剪、旋转、透明度、边框或颜色调整作为文档指令,而不是更改底层图像。在图像编辑器中重新创建最终外观并导出可供发布的资产。

缺少图表

SmartArt、图表、分组形状和绘图画布并不总是存储为普通光栅图像。将对象从 Word 导出为 SVG 或 PNG,然后手动引用导出的文件。

文件名更改但图像消失

重命名资产不会自动更新 Markdown。在项目中搜索旧名称并更新每个引用,包括引用样式的图像定义。

最终映像迁移检查表

  • Markdown 文件有一个匹配的资源文件夹。
  • 提取了每个携带信息的嵌入图像。
  • 文件名具有描述性、稳定且一致。
  • 路径是相对的或遵循目的地的记录约定。
  • Alt 文本传达每个有意义图像的目的。
  • 装饰图像使用空替代文本。
  • 转换了不受支持的 Word 矢量格式。
  • 超大资产已调整或压缩。
  • Markdown 中没有保留任何本地驱动器路径。
  • 所有图像均在最终渲染器中以移动和桌面宽度进行检查。

FAQ

WordToMD 可以下载 DOCX 中的图像吗?

是的。转换 DOCX 并选择 Markdown + 图像 ZIP. The archive contains the editable Markdown and supported embedded pictures in an images/ 文件夹。当您只需要原始媒体文件时,您还可以使用单独的 Word Image Extractor。

Markdown 可以将图像存储在 .md 文件?

标准 Markdown 存储引用,而不是二进制图像。一些编辑器接受 base64 数据 URL,但它们会使 Markdown 文件变得很大且不易移植。具有相对路径的单独资源文件通常更容易维护。

我应该使用绝对 URL 还是相对图像路径?

当图像属于同一存储库或站点时,使用相对路径。仅当图像有意在其他地方托管和维护时才使用绝对 HTTPS URL。避免使用您无法控制的 URL。

我应该如何处理 Word 标题?

将标题保留为图像附近的可见文本,并为图像的含义编写单独的替代文本。如果您的发布系统有图形或标题组件,请将其转换为该平台支持的语法。

结论

成功的 Word 到 Markdown 图像迁移将 Markdown 及其资产视为一个包。使用 WordToMD 对于快速、私密的文本转换,单独提取媒体,创建有意的名称和路径,并预览实际发布的结果。对于大型或可重复的迁移,请切换到 Pandoc 并自动执行提取步骤,而无需跳过最终的可访问性和路径审查。