如何在图文混排文章中调整图片尺寸与排版位置
为了让文章更具可读性，应根据每张图片的作用来确定其尺寸：承载关键证据或背景信息的图片要有足够的展示空间，而当周围文字已说明要点时，辅助性图片则可以排得小一些。将图片放在其所阐释的段落旁边，保持清晰的阅读顺序，并在窄屏宽度下检查排版效果。本指南重点介绍数字文章中的图片排版；这种以目的为先的选择同样适用于印刷排版，但屏幕上的展示效果需要单独进行检查。
从图片的作用入手
在移动或调整图片尺寸之前，先确定读者应该从中获得什么。它是读者需要仔细查看的证据、让段落更易于想象的示例，还是纯粹的装饰？这种区分比直接套用预设的图片宽度更有用。
如果图片承载了文字未包含的信息，应给予它足够的空间，使相关细节清晰可辨。如果读者无法仔细查看文档、实物或流程的微缩图片，它可能就无法完成其主要任务。如果图片仅仅是用来阐明正文中已解释的观点，较小的尺寸可能就足够了——或者根本不需要这张图片。这是根据图片目的推导出的实用设计原则，而非通用的尺寸标准。GOV.UK 设计系统的图片指南同样指出，图片应满足用户的真实需求并起到视觉辅助作用，而必要的信息仍应以文字形式提供。其建议是针对政府在线服务编写的，因此应将其视为有益的参考，而非适用于所有类型文章的硬性规定。
一个实用的决策辅助方法是为每张图片分配三种角色之一：细查、插图或装饰。“细查”通常需要更大的展示空间，以及引导读者关注相关细节的说明或说明文字（caption）。“插图”通常可以以适中的尺寸放在其支持的段落附近。“装饰”没有任何传递信息的作用；可以考虑省略它，或者在视觉上保持克制。这些分类是一种实用的编辑工具，而不是参考来源所规定的术语。
根据重要性和可用空间选择尺寸
以文章的文字栏作为初始边界。贯穿通栏的图片很容易引人注目，并能为细节内容提供更多空间；请将这种处理方式留给其重要性值得引起视觉停顿的图片。较小的、与栏对齐的图片可以支持附近的观点，而不会与标题或正文争夺注意力。避免仅因为原始文件较大就选择大尺寸：显示的尺寸应适合排版以及读者需要了解的信息。
这里有一个说明性的决策示例，并非经过测试的现成模板：假设一个 700 像素宽的内容栏中包含一张展示两部分物体的图片，两者的差异是该段落的核心内容。接近全栏宽度的展示可能更容易进行对比。如果同一张图片只是用来烘托总体场景，而段落中已包含解释，那么较窄的展示尺寸可以保留文字的重点。700 像素的数值仅仅是栏宽的一个示例，并非推荐标准。
在宽屏上，当图片出现在文字旁边时，应将两者视为一组搭配单元。给图片足够的宽度以展示其主体，给文字足够的空间以保持舒适的阅读体验。如果任一方显得拥挤，应采用上下堆叠的方式，而不是缩小图片并将文案挤压成狭窄的长条。在较小的屏幕上，单栏排版通常是最清晰的布局：先显示文字，然后是相关的图片，接着是下一个段落。W3C 对 WCAG 2.2 重排（Reflow）的解释说明了许多文章页面如何自适应单栏，并阐述了在常规阅读内容中避免双向滚动的目标。它还指出了对于其含义或用途需要二维布局的内容的例外情况。文章排版的要点是确保图文组合不会迫使读者左右平移来阅读文字。
将每张图片放置在其关联明确的位置
将图片放在解释其为何出现在此处的句子或段落附近。如果读者必须向下滚动浏览几个无关的段落才能找到图片，两者之间的关联可能会变得模糊。同样，在一句话的论点中间插入大图会打断逻辑。利落的排版通常是在介绍该主题的第一个段落之后，或者紧接在需要该图片的步骤之前。
在说明文字能补充具体内容时再使用它：标明主体、指出细节或解释该图片为何重要。不要使用说明文字逐字重复周围的句子。如果图片需要仔细观察，在附近的文字以及说明文字中说明应该看什么；读者不应该仅凭排版位置去推测其意图。
图片与其文字之间的关系对于非视觉阅读同样重要。W3C 的图片教程指出，信息型图片需要能够传达其核心信息的替代文本，而装饰性图片可以使用空的替代文本，以便辅助技术可以直接跳过。W3C 的信息型图片指南强调，替代文本应在上下文中表达图片的含义，而不仅仅是列出可见的物体。作为一个实用的检查方法，请思考：如果有人看不见这张图片，他们会错过什么信息？将关键信息写在文章正文中，并为图片提供恰当的替代文本。如果图片在相邻文字之外没有增加任何新信息，那么重复其描述可能毫无必要。
保留图片的有效构图
图片的宽高比决定了它所占用的空间以及保留可见的内容。首先尝试将整张图片完整置入选定区域内。只有在主体依然清晰且裁剪不会删去读者所需的细节时，才进行裁剪。横向裁剪可能适合宽幅的首图；纵向图片在栏内以较窄的宽度展示效果可能更好。这些是构图上的取舍，而非固定规则。
如果裁剪去除了背景信息、改变了原本的含义，或者遮挡了文章中讨论的细节，请采用不同的裁剪方式或按原始比例展示。对于图表、标签或文档，检查最终的显示尺寸：嵌入在图片中的文字可能会变得太小而无法阅读。GOV.UK 图片指南通常建议不要在图片中放置文字，因为这些文字可能难以阅读、复制、调整大小或通过屏幕阅读器访问；当文字对图片必不可少时，也应在相邻的书面内容中提供其含义。
按读者使用的尺寸检查排版
在宽屏桌面端和窄屏移动端宽度下预览文章。检查图片是否超出文字栏、遮挡内容，或导致其旁边的文字过于拥挤。顺着从标题到段落再到图片的阅读顺序浏览：当布局变为垂直堆叠时，图片仍应出现在其所阐释的段落附近。此外，还要在实际显示尺寸下检查说明文字以及图片中的所有重要细节。
对于网页而言，显示尺寸和文件大小是不同的决策。大尺寸展示可能需要较大的源文件，但向较小的屏幕发送过大的图片文件会浪费流量。Google web.dev 的响应式图片指南解释了浏览器如何在不同的显示条件下选择图片尺寸，并指出图片版本并没有单一固定的正确数量。这是针对网页发布的技术实施指导，并不决定图片在文章中的位置。
快速决策流程
明确其作用。该图片是为了供人细查、用于插图说明文字，还是仅用于装饰页面？
找到其锚点。找出介绍该图片或依赖该图片的段落，然后将图片放在该段落旁边。
设定显示宽度。给关键证据留足空间；如果细节并非必不可少，可让辅助性图片占用较少空间。
检查裁剪效果。确保主体和所有相关的背景信息依然可见。
按顺序通读排版。在窄屏上确认文字和图片的先后顺序合理，且文字依然清晰易读。
描述信息内容。在有帮助时添加说明文字，并根据图片的角色提供替代文本。
实用原则很简单：用重要性决定突出程度，用关联文字决定排版位置，通过窄屏预览检查排版是否依然有效。如果在选定的尺寸下图片难以看懂，请将其放大、简化裁剪，或在正文中解释相关的细节。