简体中文

图像和照片·社交图像调整器

为什么社交图像中的小文本在调整大小后变得难以阅读

· 为什么它很重要

图像质量 版式 辅助功能

大的可读字母在较小的框架中缩小为柔和的笔划
原始 ToolAcre 矢量图

一旦图像缩小到手机大小并压缩,在设计画布上可读的文本可能会变得难以辨认。这篇文章解释了易读性背后的像素算法以及如何在发布之前对其进行测试。

没人能读懂的信息图——手机屏幕上密集设计的具体失败

信息图表可以在宽阔的设计画布上完全可读,但在作为手机大小的社交图像交付时会失败。单词没有改变,但可用于描述每个字母的输出像素数量发生了变化。在观众有机会阅读之前,密集的支撑副本就变成了纹理。

测试导出的文件,而不仅仅是原始布局。 Social Image Resizer 以目标预设尺寸进行渲染,并提供生成的 Blob 供下载。该导数是易读性审查的正确工件,因为它包含浏览器做出的实际采样和本地编码决策。

文本也是像素——缩小如何缩小字母高度,以及为什么笔画比像素模糊或消失

图像内的文本不再是语义类型。它是彩色像素。当整个艺术作品缩小时,字母高度和笔划宽度与其他所有内容一起缩小。跨越多个源像素的笔画只能贡献输出像素的一小部分,迫使重采样器将其与背景混合。

高对比度边缘使损失明显,但在计数器关闭或相邻笔划合并后,仅靠对比度无法挽救结构。画布平滑旨在避免锯齿状别名,因此微小的字体可能会变得柔软而不是急剧破裂。效果取决于比例、字体、粗细、对比度和浏览器实现。

有损局部编码可以柔化精细细节;目的地压缩不在这个证据范围内

JPEG 和 WebP 导出在此工具中是有损的,并且它们的质量参数会影响精细的图像细节。 PNG 避免了有损输出阶段,但它不会恢复在缩小过程中已经混合的信息。为刻字选择 PNG 可以删除一个变量,同时保持基本像素预算不变。

该工作簿将另一个最后步骤归功于社交平台。 ToolAcre 不测试目标编码器,因此本文不承诺每个服务都以一种方式压缩文本。将批准的本地导出与真实的目标预览进行比较,以区分上传之前发生的情况与之后观察到的情况。

根据显示尺寸进行设计 — 在实际显示的像素高度检查类型,而不是在画布尺寸

设计审查应包括像素尺寸和人们实际遇到图像的比例。在相关手机上以正常演示文稿大小打开下载的文件,而不是缩放,直到文字变得可读。大显示器预览可以通过为艺术品提供更多的物理空间来隐藏失败。

将一对一的像素检查作为诊断,而不是作为观众体验。它可以揭示模糊的界限,但接受的问题是消息是否在上下文中毫不费力地阅读。没有规定通用的字体大小截止值,因为设备、布局和创意选择会改变结果。

更少的字数,更大的字体 - 将细节移到标题或链接页面中,并保留标题的图像

当文本失败时,请先减少字数,然后再尝试其他导出质量。宣传一个标题,删除限定词并将详细信息移至帖子标题或链接页面中。较大的字体和较少的行数为每个字符提供了更多的像素,并让图像发挥其视觉作用,而不是模仿文档。

还简化了与措辞竞争的细规则、小图标和装饰图案。它们消耗相同的有限输出网格。如果图形必须包含详细说明,请提供专为阅读而设计的可访问页面或文档,而不是依赖于单个光栅社交图像。

工作示例:比较最终大小的文本,而不声明通用的幸存点大小

准备一份 16:9 公告,其中包含标题、副标题和密集的页脚。以当前 1920×1080 工具预设导出它,然后以手机上目标的正常显示比例查看它。请注意哪个层次结构可以立即读取,哪个层次结构需要缩放或推理。

创建字数较少、笔划较大的修订版,然后通过相同路径导出。比较应该由读者来判断,而不是根据发明的最小像素高度来判断。记录目标尺寸、格式和质量,以便将来的修订可以重现通过的条件。

这不包括 - 屏幕阅读器辅助功能;图像中的文本需要替代文本,无论其大小如何,这是发布步骤,而不是调整大小的步骤

可读像素不会使屏幕阅读器能够访问图像文本。替代文本、字幕和任何特定于目的地的可访问字段仍然是发布步骤的一部分。 Social Image Resizer 适用于图像像素,并不创作这些语义描述。

避免仅将长的基本说明仅放置在图像内。使用辅助技术或翻译工具的人也可能无法识别大字体。裁剪器可以帮助生成清晰的图形,但可访问性需要位图之外的等效信息以及保存它的发布工作流程。

要点:测试最终尺寸的易读性 - 社交图像调整器为您提供调整大小的文件,以便您可以在发布之前在手机上检查它

在最终尺寸下测试易读性,并将失败视为内容设计问题,然后再将其视为编码器问题。更简洁的措辞、更强的层次结构和更大的笔划通常会创建更强大的工件,因为它们将有限的像素网格分配给必须理解的部分。

ToolAcre 提供该审核所需的确切输出。导出、在相关设备上打开文件、比较任何目标预览并从母版进行修改。仅在编辑器中放大时才有效的设计尚未准备好适应其本来要服务的小屏幕。