本文旨在帮助写作者调整手机截图尺寸,使之呈现合适的大小。


在文章中加入几张手机截图,有助于说明一些操作和演示。但尺寸不合适的图片对读者而言很可能是一个噩梦——尤其是那些手机截图。如果你在深夜刷到过这种占据整个屏幕的图片,你会想起被贞子支配的恐惧▼

呼之欲出的大脸

写作者可以通过许多办法避免这种错误,下文就几种写作情景提供建议。

在博客

Markdown 语法逐渐成为 blogger 的主流选择,但多数使用者并不熟悉它和 html、css 的关系。其实用 Markdown 写作,有点手工制作网页的味道,而插入图片,也可以借鉴 html 的语法,多数博客是支持这么干的。

我的博客搭建在 bitcron 上,它支持常见的语法,可以这样固定图片宽度:

<img src="乃的图片地址" width="350" />

考虑写作者们使用的图床不尽相同,这种指定了大小的方法泛用性较好。

一般我们会在本地的编辑器里写好初稿,但是不能直接预览博客效果,更不用说 Drafts 那参差不齐的预览模式基本没啥用。想看到最终效果,只得老老实实去网页上。还有些编辑器是可以指定图片宽度的,但是导出成 Markdown 格式后会怎样就不得而知,还得依据发布平台要求的格式。

在少数派

你可以用 Markdown 写作,也能像写贴子一样,手动点选上传图片。

少数派的 Markdown 编辑器允许直接添加「w=像素」属性▼

图片来自少数派 slack 群

对于手机截图,350 像素是比较合适的尺寸。这个尺寸可以保证清晰度的同时,能在一屏之内显示完整的图片。

而在富文本模式下,也能点击图片进行修改▼

同样是 350 像素,生成的文章,在电脑端与移动端看起来都不错。

在公众号

目前我放弃了微信公众平台,它不是一个好的交流平台,但许多人还是有运营公众号这一需求的。

在官方编辑器里写东西实在折磨身心,第三方平台亦不过笑百步。上传图片后居然要到库里再选一次,才能插入到文中。小子建议 Markdown 语法使用者,将文章导成 CSS 格式后,再粘贴进公众号后台。如果不熟悉 Markdown,你可以在少数派编辑器里排版好再复制啊🤣

我使用的博客框架就可以一键生成公众号排版,自带了三个简单的样式,还能自定义一些模板。我只管创造,机器负责渲染▼

但即使有了方便的操作,发布前预览这一步,还是不可或缺。

结语

我不推荐修改原图的做法,而更喜调整图片呈现的方式。压缩图片往往会牺牲画质,而且在文章写多了以后,管理起压缩前后不同版本的图片,会演变成一场灾难。

何况,即使你把图片压缩到 200 像素宽度,它可能会自适应宽度而挤满屏幕。这毕竟不是在编辑 Word 文档,读者看见的东西和你点击「发布」时所认为的也许不一样。

不同的写作者,写作环境差别巨大,小子所列方法,也不见得能接入所有人的工作流,这里权作抛砖了。

希望手按键盘的人,都能肃然起敬,做出更好的版式。

共勉,以上。