图片怎么裁成圆形？圆形头像透明背景与导出格式指南

圆形裁剪是怎么做出来的？

圆形裁剪分两步：先居中取一块正方形，再给正方形套一个圆形蒙版。蒙版以内保留原像素，以外把透明度设为 0。图片本身仍然是方的，只是四个角变成了看不见的透明区。

这四个角占多大比例，可以直接算：圆面积是正方形的 π/4，约 78.5%，剩下的 21.5% 全是透明像素。拿一张 400×400 的头像实测，完全透明的像素占 21.1%，完全不透明占 78.1%，差出来的那一小部分，正是圆边上的一圈过渡像素。

边缘那一圈为什么决定了观感

像素是方格，圆是曲线，边界总会切过一些格子。如果这些格子只能“全留”或“全删”，圆边就是一级一级的台阶，也就是锯齿。抗锯齿的做法是按格子落在圆内的面积，给它一个 0～255 之间的半透明值。

同一张 400 像素的头像里，这样的半透明像素实测有 1252 个——几乎正好等于直径 400 像素的圆周长（约 1257）。也就是说，边缘恰好只过渡了一圈像素：既不发毛，也不会糊成一片。头像缩到 50 像素以下时，这一圈过渡对观感的影响比原图清晰度还大。

原图不是正方形，构图怎么保住？

先把图处理成你想要的正方形，再裁圆。圆形裁剪一律居中取正方形，横图会切掉左右两边，竖图会切掉上下两端，人物偏在一侧时脸可能直接被裁出圈外。

人像头像的留白配方

圆会切掉四角，方图里原本贴边的头发和肩膀会被削掉。实用的比例是：脸部（头顶到下巴）约占圆直径的一半到六成，头顶留出一点空隙，下方带到锁骨附近。这样缩到小尺寸时脸仍然是视觉重心，也不会显得“顶天立地”。

补白边时，补边颜色尽量和原图背景接近；打算保留透明的话，补边之后再裁圆，四角照样会变成透明，补的颜色只会出现在圆内靠边的位置。

导出 PNG、WebP 还是 JPG？

要透明就选 PNG 或 WebP，不要透明才用 JPG。差别主要在体积：照片类头像存成 PNG 会非常大，因为 PNG 是无损压缩，照片里连续变化的色彩几乎压不下去。

下面是用同一张人像实拍图（原图 512×512）裁成正圆后，在小鹿 Image 里导出不同格式的实测体积：

透明 WebP 的体积只有 PNG 的十五分之一左右，而且保住了那 1252 个半透明边缘像素，边缘观感和 PNG 一致。注意这是照片头像的数据；Logo、图标这类色块简单的图，PNG 本身就压得很小，差距不会这么大。

各格式怎么选

• PNG：兼容性稳，Word、PPT、各种老软件都认。还要继续编辑、或者不确定对方用什么软件打开时选它。
• WebP：网页、小程序、App 里展示的首选，体积小、带透明，主流浏览器都已支持。下载 PNG 后用格式转换改成 WebP 即可。
• AVIF：体积与 WebP 相近，但有损编码会把边缘过渡抹宽一点（实测半透明像素从 1252 个变成 2286 个），老设备支持也不如 WebP 普遍，头像场景不必强求。
• JPG：不需要透明、背景就是固定颜色时用，比如白底简历。关掉“圆外透明”并选好填充色，导出后再转 JPG 即可。
• GIF：不建议。GIF 的透明只有“全透明”和“不透明”两档，实测转换后半透明边缘像素变成 0 个，圆边重新出现锯齿；同时只能用 256 色，体积反而比 WebP 大三倍。

圆外为什么会变成白色或黑色？

几乎都是透明通道在某一步被丢掉了。按下面的顺序查，一般能在前两条找到原因：

1. 中途存成了 JPG。JPG 没有透明通道，任何软件把透明图存成 JPG 时都只能填一个底色，多数填白，少数填黑。这一步不可逆，重新转回 PNG 也找不回透明。
2. 看图软件把透明显示成了白色。很多系统相册和看图器用白色代替棋盘格。把图拖到深色背景的页面或 PPT 里一看就知道文件本身有没有问题。
3. 聊天软件或平台重新压缩了图片。不少平台在上传或发送时会把图片转码成 JPG，透明区随之变成底色。需要保留透明时，以文件形式发送，或者让对方用你给的原文件。
4. 用截图代替了导出。截屏得到的是屏幕像素，透明区在屏幕上显示成什么颜色，截图里就是什么颜色。

透明背景的更多排错思路，以及为什么抠完图边缘会有一圈白边，可以看透明背景图片怎么做。

圆形裁剪、圆角和抠图有什么区别？

三者解决的问题不同：圆形裁剪改的是外轮廓，抠图去的是背景内容，圆角则是介于方和圆之间的外轮廓。

第四种组合适合证件照一类纯色背景的人像：先去掉蓝底或白底，再裁成圆，圆内外就都是透明的，可以放到任何颜色的版面上。

做网页的话，其实可以不裁

网页上显示圆形头像，用 CSS 的 border-radius: 50% 就能让方图显示成圆形，图片文件保持方形 JPG 或 WebP 即可，体积更小，以后要改成圆角也只需改一行样式。需要真正裁成圆形文件的，是 Word、PPT、海报、打印这类没法写样式的场合。

哪些场景需要自己裁圆？

判断标准只有一个：实际显示的形状由谁控制。平台控制的，交给平台；你自己排版的，才需要自己裁。

• 微信、QQ、微博等头像：平台按自己的头像框显示，上传清晰方图即可。
• 简历照片、PPT 人物介绍、海报嘉宾头像：需要自己裁圆，保留透明，叠在彩色版面上不露白角。
• 网站、小程序：优先用 CSS 圆角；必须用图片时导出透明 WebP。
• 打印物料：导出 PNG，尺寸按印刷精度算，比如 3 厘米的圆按 300dpi 需要约 354 像素。

选好场景后直接去圆形头像裁剪处理；各种图片格式在透明、体积和兼容性上的完整对比，可以看图片格式怎么选。