三张文件都显示 400 × 400，不代表三张头像都合适。直接改宽高会让圆脸变窄，固定中心裁剪又可能切掉偏左的主体。这次只改变处理方式，比较它们各自牺牲了什么。
原图与目标
原图是本站自制的 1200 × 800 示意插画，圆形头部中心位于 (315, 345)，半径 125 像素，主体明显偏左；它不是人物照片。目标是 400 × 400 的正方形头像，优先保留主体比例与头部完整性，不要求保留右侧所有装饰。
三种方法，三个成品
- 直接拉伸：把整个 1200 × 800 图像缩到 400 × 400。水平方向变成原来的 1/3，垂直变成 1/2，两个缩放倍数不同。
- 固定中心裁剪：原图先取 x=200、y=0、宽高均为 800 的区域，再等比例缩到 400 × 400。人物头部左缘原在 x=190，所以会切掉左侧一小段，身体也更贴边。
- 按主体裁剪：先取 x=0、y=0、宽高均为 800 的区域，再等比例缩到 400 × 400。主体完整保留，右侧说明文字舍弃。这是一种构图选择，不是自动识别人脸。
| 处理方式 | 头部宽 × 高 | 结果 |
|---|---|---|
| 直接拉伸 ↓ | 约 83.3 × 125 px | 宽高比例改变 |
| 中心裁剪 ↓ | 完整圆本应 125 × 125 px | 左侧约 5 px 被裁掉 |
| 主体裁剪 ↓ | 125 × 125 px | 圆形比例与边界保留 |
实际用到头像时，还要检查什么？
先看成品头部是不是圆形，再看边缘有没有被裁。某些平台把正方形头像显示成圆形，四个角会被遮住，所以还要预览圆形遮罩后的效果。下面只是同一正方形成品的网页圆形预览，下载文件仍是 400 × 400 的正方形 PNG。
不要用网页 CSS 把横图硬显示成正方形，再误以为原文件已经完成裁剪。用图片查看器核对实际尺寸；需要提交到要求精确比例的平台时，文件本身应符合要求。
怎样用本站现有编辑器复现？
在完整编辑器中打开原图，先用 Crop 选取包含主体的正方形区域；鼠标框选未必能精确到 800 × 800，所以应用后先核对 Information 的实际宽高。需要严格重现本例坐标时，可参考 SVG 源文件和上面给出的裁剪矩形，不能把手拖选框称作精确坐标操作。完成正方形构图后，再用 Resize 等比例缩成 400 × 400。
简易尺寸工具仅缩放和换格式，不执行裁剪。锁定比例时，1200 × 800 改宽度为 400 会得到约 400 × 267；关闭比例锁填 400 × 400 则会拉伸。需要头像构图时，先到完整编辑器裁剪，再回来导出。
这组数据怎样得到？
2026 年 11 月 5 日，本站在 Windows 的 Chromium 156 浏览器中，用 Canvas 2D 绘制自有 SVG，再通过 canvas.toBlob() 导出。JPEG 的 0.82、0.35 是浏览器编码参数，不是通用画质分数；不同浏览器和版本可能生成不同字节数。所有文件均可下载，完整测量记录包含尺寸、文件体积和生成环境。
平均 RGB 绝对差的计算方式为：把编码文件重新解码，与相同尺寸、相同背景的导出前画布逐像素比较三个颜色通道，求绝对差平均值，取值范围为 0–255。它仅描述本组文件的编码变化，不代表视觉质量分数，也不能证明缩小图片没有损失信息。透明像素的不可见 RGB 不适合与不透明底图作直接质量比较。