同一个场景,换一种画风,文件大小、黑白打印时的样子、放文字的难易都会不同。2026年10月26日,我们读取了本站当时公开的插画中记录了画风的 5,589 张,按 18 种画风分别测量了三项内容。

测量了什么
- 文件大小:本站提供的 WebP 文件的大小,以及把同一张图保存为 PNG 和 JPG(画质 92)时的大小
- 黑白后消失的边界:图中颜色切换的边界里,变成黑白后几乎没有明暗差的边界所占的比例。表示图中有多少部分只靠颜色来区分
- 可放文字的空白:把图分成细小的方格,只用没有线条和花纹的方格能拼出的最大长方形,占整张图的比例
表中的数字是中位数,也就是把该画风的图按数值排好后正中间的那个值。点击画风名称可以查看该画风的素材。
文件大小
全部插画的中位数为:WebP 143KB、PNG 1,302KB、JPG 227KB。同一张图保存为 PNG 约为 8.5 倍,保存为 JPG 约为 1.6 倍。
| 扁平插画 | 430 | 52KB | 473KB | 107KB |
| 柔和3D | 343 | 86KB | 1,101KB | 159KB |
| 简约线描 | 361 | 100KB | 766KB | 171KB |
| 等距视角 | 354 | 106KB | 957KB | 186KB |
| 柔和粉彩 | 393 | 106KB | 1,011KB | 180KB |
| 海报风 | 361 | 115KB | 1,019KB | 196KB |
| Q版 | 189 | 127KB | 1,222KB | 216KB |
| 随性卡通 | 264 | 132KB | 1,117KB | 215KB |
| 剪纸风 | 330 | 134KB | 1,387KB | 214KB |
| 像素画 | 276 | 142KB | 1,318KB | 241KB |
| 动画平涂 | 266 | 145KB | 1,322KB | 234KB |
| 水粉 | 358 | 181KB | 1,788KB | 265KB |
| 水彩 | 352 | 205KB | 1,902KB | 290KB |
| 手绘风 | 335 | 223KB | 1,682KB | 306KB |
| 彩铅 | 386 | 289KB | 2,281KB | 354KB |
| 复古印刷 | 341 | 347KB | 2,280KB | 405KB |
| 写实 | 126 | 348KB | 2,375KB | 410KB |
| 油画 | 124 | 547KB | 3,797KB | 604KB |
WebP 最轻的是扁平插画、柔和3D、简约线描,最重的是油画、写实、复古印刷。颜色涂得平整或平滑的画风较轻,连笔触、纸张颗粒、印刷的粗糙感都画出来的画风较重。
保存为 JPG 时增大的程度也因画风而异。增大最多的是扁平插画(约 2 倍),最少的是油画(约 1.1 倍)。平涂颜色的图在 WebP 下特别小,所以和 JPG 的差距更大。
想让博客或网站加载更快,直接使用 WebP 最有效。WebP 打不开时的处理方法,请参阅“WebP是什么?下载的图片打不开时的处理方法”。
变成黑白后消失的颜色边界
班级通讯和分发资料常常用黑白打印。在彩色屏幕上像红和绿这样明显不同的颜色,如果明暗接近,变成黑白后就是差不多的灰色,边界随之消失。下面是用两种画风画的同一个面试场景,在屏幕上转成黑白后的样子。




| 简约线描 | 361 | 1.7% |
| 手绘风 | 335 | 2.6% |
| 动画平涂 | 266 | 3.9% |
| 海报风 | 361 | 4.7% |
| 复古印刷 | 341 | 5.0% |
| Q版 | 189 | 5.1% |
| 水彩 | 352 | 5.1% |
| 随性卡通 | 264 | 5.3% |
| 柔和粉彩 | 393 | 5.5% |
| 彩铅 | 386 | 5.6% |
| 剪纸风 | 330 | 5.9% |
| 写实 | 126 | 6.2% |
| 水粉 | 358 | 6.3% |
| 柔和3D | 343 | 6.3% |
| 像素画 | 276 | 6.7% |
| 等距视角 | 354 | 7.5% |
| 扁平插画 | 430 | 7.8% |
| 油画 | 124 | 9.5% |
消失的边界最少的是简约线描、手绘风、动画平涂,最多的是油画、扁平插画、等距视角。用线条勾勒轮廓的画风,即使颜色差消失,形状也会靠线条留下来。不画轮廓线、用色块区分的画风,以及用颜色浓淡塑造形体的油画,容易把明暗相近的颜色并排放在一起,黑白时边界更容易消失。
在黑白印刷的版面上如何摆放和确认插画,请参阅“班级通讯・年级通讯的插画,大小和位置怎么定”。
可放文字的空白有多大
在缩略图或幻灯片封面上给图加标题时,放在没有线条和花纹的地方更容易阅读。全部插画的中位数是图的 6.3%,大多数图都画满了整个画面。空白占图的 20% 以上的图,占全部的 13.4%。


| 扁平插画 | 430 | 12.5% | 24.4% |
| 简约线描 | 361 | 12.5% | 24.4% |
| 柔和粉彩 | 393 | 8.2% | 19.6% |
| 海报风 | 361 | 7.0% | 15.8% |
| 等距视角 | 354 | 7.0% | 13.8% |
| 手绘风 | 335 | 6.3% | 10.4% |
| 随性卡通 | 264 | 6.3% | 8.3% |
| 剪纸风 | 330 | 6.3% | 18.2% |
| 柔和3D | 343 | 6.3% | 15.5% |
| 彩铅 | 386 | 5.9% | 9.6% |
| 水粉 | 358 | 5.5% | 11.7% |
| 复古印刷 | 341 | 5.5% | 10.9% |
| 像素画 | 276 | 4.7% | 6.2% |
| 水彩 | 352 | 4.7% | 13.4% |
| Q版 | 189 | 4.3% | 3.2% |
| 动画平涂 | 266 | 3.7% | 4.5% |
| 写实 | 126 | 3.1% | 2.4% |
| 油画 | 124 | 2.1% | 0.8% |
空白最多的是扁平插画、简约线描、柔和粉彩,最少的是油画、写实、动画平涂。油画和写实会一直画到画面边缘,几乎不留空白。
在空白少的图上放文字时,在文字后面加一条底色就能看清。使用缩略图・封面图制作,可以把图裁成需要的尺寸,加上底色和文字后保存。缩略图上放多少文字合适,请参阅“YouTube 缩略图的尺寸与放文字时的标准”。
按用途适合的画风
- 黑白打印的分发资料:简约线描、手绘风、动画平涂
- 要叠加文字的缩略图・封面:扁平插画、简约线描、柔和粉彩
- 想加快加载的页面:扁平插画、柔和3D、简约线描
三项都上榜的是简约线描。
不过,画风首先要看是否适合内容和读者。这些数字请在有两个以上候选、难以决定时作为参考。在同一份资料中放多张插画时如何统一,请参阅“把多张插画放进同一份资料,为什么会显得不协调”。
测量方法
- 对象是 2026年10月26日公开的插画中记录了画风的 5,589 张。不包括头像图片和图标。画风按制作时指定的画风区分
- 图的尺寸中,1024×1024、1408×768、1254×1254、1698×926 像素占 99%。各画风的尺寸构成略有不同,文件大小请看作每张的大致参考
- PNG 和 JPG 用图像处理库保存:PNG 使用默认压缩,JPG 画质为 92。文件大小会因使用的软件而不同
- 消失的边界:把图缩小后比较相邻两点的颜色,色差(CIE L*a*b* 色差)在 20 以上的算作边界,其中明度(L*)差小于 8 的算作消失的边界。实际打印效果也会因打印机和纸张而变化
- 空白:把图缩小后分成方格,方格内明暗和颜色变化小的算作空白。淡淡的纸张质感和平缓的颜色变化也算作空白
※2026年10月测量的数值。