指南
公众号配图的规则与坑：为什么图片会裂、会糊、圆角会丢
公众号配图最容易出的四类问题——裂图、糊图、圆角丢失、封面被裁——各有明确成因。这篇文章给出宽度只写自适应的理由、格式与体积的安全边界、圆角图注的正确做法，以及封面图三种比例的裁切逻辑。
公众号配图出问题的根因只有一条：图片进微信时会经过一次重新抓取与重新缩放，你对原始文件的控制到那一刻就结束了。 由此推出三条可执行规则——宽度只写 100% 不写死像素、只用 JPG／PNG／GIF 三种格式、圆角和图注都用内联样式而不是语义标签。下面把每类问题拆开说明成因与对策，包括封面图被裁这件事为什么几乎不可避免。
为什么粘过去图就裂了
裂图（显示成一个灰色小方块或者带问号的图标）通常不是图片本身有问题，而是微信拿不到那张图。
公众号后台处理粘贴内容时，会把 HTML 里的图片地址取出来，自己再去请求一次、转存到微信的图片服务上，最后正文里留下的是微信自己的地址（域名形如 mmbiz.qpic.cn）。这个过程意味着两件事：
| 你的写法 | 微信的反应 | 结果 |
|---|---|---|
完整的 https:// 图片地址，公开可访问 | 能抓到，转存到微信 | 正常显示 |
http:// 明文地址 | 多数情况会拦，或抓取失败 | 裂图 |
相对路径（./images/a.png） | 没有可请求的上下文 | 必然裂图 |
本地文件路径（file:///...） | 抓不到 | 必然裂图 |
| 需要登录／带防盗链的图床 | 微信的抓取请求被拒 | 裂图 |
| 粘贴时剪贴板里带着图片数据本身 | 直接上传，不依赖外部地址 | 正常显示 |
所以判断标准很简单：这张图在一个陌生浏览器里、不登录、直接打开地址能看见吗？ 能看见，微信就能看见。
第 4 条（图床防盗链）是最容易被忽略的。一些云存储默认开启防盗链，只允许自己的域名引用；微信的抓取请求不带你的 Referer，就被拒了。如果一定要用图床，把防盗链白名单放开，或者干脆先在公众号后台手动上传一次、拿到微信自己的图片地址再用。
最后一行的做法——粘贴时让剪贴板带着图片数据——是绕开这一切的办法。公众号后台其实接受直接粘贴图片，粘进去之后微信会替你上传。这也是「本地图片直接贴进编辑器」比「引用外部地址」更稳的原因。
宽度只写 100%，不要写死像素
公众号正文的可用宽度不是一个固定值，它随机型变：主流手机大致落在 375 到 430 这个区间，加上微信自己的正文边距，实际留给图片的宽度还会再小一点。
写死像素宽度会遇到两种情况，都不好：
- 写比可用宽度大（比如
width="600"）：微信把图缩到容器宽度，高度按比例缩。看起来没问题，但如果你同时给了圆角，圆角是按原始尺寸算的，缩放之后视觉上会变得不一致。 - 写比可用宽度小：图片在一行里居中，两侧留出空白。如果你同时设了背景色或边框，边界会露出来。
正确做法是宽度只写 100%，让它按容器自适应：
<img src="https://..." style="width:100%;display:block;border-radius:8px">两个细节值得单独说。display:block 不能省：图片默认是行内元素，会在下方留出几像素的行基线空隙，多张图连续排列时会出现莫名其妙的间隙。高度不要写死：写死高度会让图片变形，除非你确实在做固定比例的裁切容器（那样应该用背景图裁切而不是 <img>）。
格式与体积的安全边界
微信对图片格式的兼容顺序大致是：JPG 与 PNG 最稳，GIF 支持但有限制，WebP 在部分安卓客户端上有风险。
| 格式 | 什么时候用 | 注意 |
|---|---|---|
| JPG | 照片、渐变多、色彩连续的图 | 反复另存会累积压缩痕迹，别多次编辑 |
| PNG | 截图、带文字的图、需要透明背景 | 体积大，长图要注意别超过后台限制 |
| GIF | 短动图 | 帧数多、体积大时容易被压掉帧或转成静态图 |
| WebP | 不建议直接用 | 部分客户端不认，会显示成裂图 |
| SVG | 不能用 | 微信会清洗 <svg>，图直接消失 |
带文字的截图优先用 PNG——JPG 的压缩会在文字边缘产生彩色噪点，在手机小屏上尤其明显。反过来，照片不要用 PNG，体积会大好几倍而画质没有收益。
还有一个不常被提到的限制：超长图会被压缩。 一张高度远大于宽度的长图（比如整体截图、长图海报），微信在手机上显示时会限制它的高度，缩下来之后上面的文字可能就看不清了。长图要么提前按手机宽度切段，要么在正文里明确提示读者点开看原图。
圆角与图注：用内联样式，不要用语义标签
圆角本身在微信里是活的——border-radius 写在内联 style 里能保留。会出问题的是承载它的标签：
<figure>/<figcaption>：微信对这两个标签的处理不一致，有的版本会把<figcaption>改写成普通段落，图注样式随之丢失。<picture>/<source>：多分辨率图片的机制在微信里不生效，只会取其中一个源（或者什么都取不到）。
稳妥的写法是全程用 <img> 加内联样式，图注用一个独立的 <p>：
<p style="font-size:12px;color:#8c8c8c;text-align:center;margin-top:8px">图注文字</p>图注本身有两条排版上的建议。一是长度：超过两行就不像图注了，会被读成正文。二是位置：图注放在图下方比上方更符合阅读顺序——读者先看图，再找说明。
封面图为什么总被裁
封面是公众号里唯一一处你无法完全控制裁切结果的图片位置。原因在于同一张封面会被用在多个地方，而每个地方要的比例不一样：
| 出现的位置 | 大致比例 | 裁切方式 |
|---|---|---|
| 文章顶部首图 | 约 2.35:1（横长条） | 按中心裁切 |
| 分享到会话／朋友圈的卡片 | 约 1:1（方图） | 按中心裁切 |
| 订阅号列表里的小图 | 更小的方图 | 按中心裁切 |
三种比例都以中心为基准裁切，所以设计封面时要把关键信息（标题、图形）压在正中间的安全区里，四周留出可被切掉的余量。把文字铺满整张图，必然会在某一种比例下被切掉一半。
实际操作上有两个选择：上传时分别指定首图与分享图（微信支持给这两种位置分别设图，比例各按其要求），或者做一张中心构图、四周留白的通用图。前者效果更好，后者省事。无论哪种，都别把字排到边缘。
还要注意封面和正文首图的关系。很多账号习惯把封面原样再放一次到正文开头，读者看到的是一模一样的两张图，视觉上是浪费。更好的做法是封面用提炼过的图形或短语，正文首图用信息量更大的图。
常见问题
直接粘贴更好。粘贴时剪贴板里带着图片数据，微信会自己上传并转存，不经过任何外部依赖；引用图床地址则要赌对方的防盗链策略和可用性。
可以。给 <a> 包住 <img>，href 填完整的 https:// 地址。要注意公众号对外链有限制：非微信域名的外链在部分场景下不可点击，如果链接很关键，最好在正文里用文字再写一遍地址。
不需要，也不应该。只设宽度，高度按原始比例自动计算，这样在任何机型上都不会变形。
图里的字号要按缩小之后的尺寸来估。一张 1080 宽的图在手机上会显示成 375 宽左右，也就是缩到约三分之一——图里 36px 的字，读者实际看到的是 12px 左右。所以图内正文至少用 40px 以上，关键信息可以到 60px。