FIELD NOTE / 06

博客头图：横屏与手机裁剪实作

用三张可下载的真实导出结果，比较裁剪损失与完整留边。

LumenLab 编辑台 · 更新于 2026 年 10 月 17 日

先写清图片在页面中的位置

这个练习为一篇介绍虚构陶瓷设计的博客配图：桌面横图 1200 × 800，竖版预览 800 × 1200。这是案例选定的尺寸，不是网站必须遵守的规格。文章标题放在图片上方，用网页文字呈现。把标题烧进图片后，手机上可能太小，翻译后的长标题也无法自由换行。先确定文章中的展示位置，再决定是否需要重新生成。

对照三张实际导出图

横版居中裁剪填满画布，杯身形状没有拉宽，但台座下方被裁掉更多。横版完整放入将方图缩到 800 × 800，左右各留 200 像素透明边；留边显示的是网页背景，不是新生成的场景。竖版裁剪则移除左右内容，也无法恢复原图本来就没有的台座底部。下方下载文件能直接对照取景差异，不要只凭文件大小做决定。

在工具里复现，而不是盲套尺寸

加载陶瓷杯样图，选择横图、居中裁剪、WebP 82%，生成下载文件，同时保存图片与处理记录。随后只将适配方式改为完整放入，再导出一次。最后选择竖图和居中裁剪。全过程沿用已加载的原图；如果重新打开第一次压缩后的文件，会增加一次有损编码。1024 像素原图导出 1200 像素包含放大，并不会获得新的真实细节。

本案例怎样选，以及何时应舍弃

如果文章讨论的是杯形容器，横版裁剪可作为概念配图，因为主体仍完整可见，正文也不声称展示完整台座。如果要求展示台座完整结构，三张导出图都不合格，应该重做原图。手机端先尝试让同一横图等比例缩小，宽度 100%、高度自动。竖版是可选构图，不是手机网页的必需品。最终应在窄屏页面检查标题、图片与说明是否挤压重叠。