公众号封面

头图/次图多比例模板

410 次访问
WECHAT MP COVER · 900×500

公众号封面

900×500 头图 / 次图标准尺寸 · 模板设计

🖼

拖入或点击上传背景图

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

📱

公众号首图制作

新媒体小编每天要推 2-3 篇推文,每篇都需要不同比例的头图和次图。手动裁剪耗时且容易比例出错。用本工具选好模板后,上传一张主视觉图,自动生成 900×383(头图)和 900×500(次图)等多比例成品,一套图 10 秒出完,排版效率翻倍。

🎨

活动海报封面

社群运营者做裂变活动时,需要统一风格的系列封面(主推文、朋友圈海报、社群分享图)。每次改文案都要重新设计太慢。本工具提供多比例模板库,换文案后一键同步生成所有尺寸,保持视觉一致性,活动上线时间从半天压缩到半小时。

🏢

企业品牌封面

公司公众号有严格的品牌规范(LOGO 位置、主色调、字体)。设计部出模板后,市场部同事用本工具填入活动标题和日期即可生成合规封面,无需每次找设计师排期。避免手动调整导致的 LOGO 移位或颜色偏差问题。

📊

专栏连载封面

知识博主做系列专栏(如「职场 100 问」),每期封面需要统一编号和标题样式。本工具支持模板复用,上传一次底图后,每期只改标题和期数,自动保持编号对齐和视觉连贯,读者一眼认出是系列内容,提升专栏完读率。

限时活动封面

电商运营做秒杀 / 拼团活动时,封面需要突出倒计时和价格信息。手动做图经常漏改时间或价格。用本工具预设好倒计时组件和价格占位符,每次活动只更新核心参数,自动生成带动态元素的封面,避免人为失误导致活动延期。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A(创客贴)传统方法(PS/AI)
数据隐私纯浏览器处理,不上传服务器需上传图片至云端本地文件,无上传
处理速度秒级出图依赖网络加载,2-5秒需手动操作,5-15分钟
离线可用完全离线需联网完全离线
模板数量仅头图/次图比例,无冗余模板海量模板,需筛选无模板,从零设计
操作门槛无需设计经验,一键生成需拖拽编辑,有学习成本需专业软件技能
收费模式免费无限制免费版有水印/导出限制需购买正版软件
输出格式直接下载 PNG需手动导出,格式受限可自定义多种格式

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
900x5001.91:1 头图(900x500)典型场景:公众号头图标准尺寸
1200x12001:1 次图(1200x1200)典型场景:公众号次图/分享卡片
1080x10801:1 次图(1080x1080)常见场景:小红书/朋友圈方图适配
1920x108016:9 头图(1920x1080)边界 case:宽屏设备头图裁剪适配
100x1001:1 次图(100x100)边界 case:极小尺寸,低于推荐像素
3000x20001.5:1 头图(3000x2000)边界 case:超大尺寸,可能被压缩
800x8001:1 次图(800x800)易错 case:用户误以为次图是 1:1
900x3832.35:1 头图(900x383)易错 case:电影宽幅比例,非标准尺寸

常见错误对照8 个常踩的坑 · 错误 → 修复

1. 上传非 16:9 的原图直接套用 1:1 模板

错误
上传一张 1920×1080 的图片,选择 1:1 模板后直接下载,未做任何裁剪或缩放
修复
上传前确认图片主体在 1:1 安全区内,或使用工具内置的裁剪/缩放功能调整后再下载

模板只改变输出画布比例,不自动裁剪图片内容。原图比例与模板比例差异越大,图片被拉伸或裁切的风险越高

2. 把次图模板当主图用,忽略尺寸差异

错误
用 300×300 的次图模板(1:1)直接作为公众号头条封面(要求 900×383)
修复
头条封面选 900×383 的 2.35:1 模板;次图封面选 300×300 的 1:1 模板

公众号头条封面比例 2.35:1,次图 1:1;混用会导致封面在消息列表中被严重裁剪或留黑边

3. 使用透明背景的 PNG 图片导致输出带黑底

错误
上传一个透明背景的 PNG 图标,选择白色背景模板,下载后发现图标周围是黑色方块
修复
上传前将透明 PNG 合并到白色背景图层,或选择支持透明通道的模板(如 PNG 输出格式)

工具默认输出 JPG 格式,不支持透明通道;透明区域会被渲染为黑色。需手动切换输出格式为 PNG 才能保留透明

4. 文字内容超出模板安全区

错误
在模板的标题区域输入 30 个中文字符,未预览直接下载
修复
输入文字后点击「预览」按钮,确认文字完整显示在安全框内;超长时缩短文案或换行

每个模板的标题/副标题区域有固定像素范围(如 600×80px),超出部分会被自动截断,不会自动缩小字号

5. 使用非标准字体导致排版错位

错误
在模板编辑器中输入「你好」,选择「华文行楷」字体,下载后发现文字偏移或乱码
修复
使用工具内置的字体列表中的字体(如思源黑体、Noto Sans SC);如需特殊字体,先在本地渲染后截图上传

工具仅预置了 5-8 种常用中文字体,未安装的字体在服务端渲染时会被回退为默认字体,导致字距、行高异常

6. 忽略公众号后台的封面裁剪机制

错误
设计一张 900×383 的封面,把关键信息放在右下角,发布后发现在公众号消息列表中被裁掉了
修复
把关键信息(标题、人物面部、LOGO)放在 900×383 的中心 600×383 区域(即左侧 150px 到右侧 150px 之间)

公众号后台对封面有二次裁剪:消息列表裁剪左右各约 150px,星标/置顶裁剪上下各约 50px;安全区是中心矩形

7. 使用低分辨率图片导致封面模糊

错误
上传一张 400×300 的图片,放大到 900×383 的模板中,下载后图片模糊
修复
上传图片分辨率至少为 900×383(头条)或 300×300(次图),建议 2 倍分辨率(1800×766)以适配 Retina 屏幕

工具不会对低分辨率图片做超分处理;放大后像素不足会导致锯齿和模糊,尤其在手机端高 DPI 屏幕下更明显

8. 多张封面使用相同背景色导致列表视觉疲劳

错误
连续 5 篇文章的封面都使用白色背景 + 蓝色文字模板
修复
每期封面更换主色调(如第 1 期蓝、第 2 期橙、第 3 期绿),或使用不同背景图片

公众号消息列表按时间倒序排列,相同色系的封面会降低用户辨识度,影响点击率;建议每期至少换色相

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

W = H × R, H = 900, R ∈ {1.9, 1, 0.8}

变量说明

  • W — 封面图宽度(像素)
  • H — 封面图高度(像素),固定 900
  • R — 宽高比,头图 1.9:1,次图 1:1,次图 0.8:1

示例

制作公众号次图(1:1 比例)。H=900,R=1,则 W=900×1=900。最终输出 900×900 像素的正方形封面。若制作头图(1.9:1),R=1.9,则 W=900×1.9=1710,输出 1710×900 像素的横版封面。

适用范围

适用于微信公众号官方规范:头图(1.9:1)用于文章顶部,次图(1:1 或 0.8:1)用于列表/转发卡片。固定高度 900px 为工具默认输出,可手动缩放至其他尺寸。

原理图

选择模板头图/次图/多比例(900×383 / 300×300)上传图片本地图片文件(不离开浏览器)本地裁剪Canvas 实时渲染拖拽调整位置导出下载PNG / JPG多模板切换保留裁剪状态
用户输入 本地处理 输出结果 辅助功能

开发者集成

3 种主流语言 · 复制即用

from PIL import Image, ImageDraw, ImageFont

# 公众号头图标准尺寸 900x383(2.35:1)
W, H = 900, 383
img = Image.new('RGB', (W, H), '#2b6cb0')
draw = ImageDraw.Draw(img)

# 添加文字(需本地字体文件)
try:
    font = ImageFont.truetype('NotoSansSC-Regular.ttf', 48)
except IOError:
    font = ImageFont.load_default()

draw.text((50, 140), '公众号封面标题', fill='white', font=font)

# 裁剪为次图比例 1:1(200x200)
img_square = img.crop((0, 0, 200, 200))
img_square.save('cover_square.png')
img.save('cover_primary.png')
print('已生成头图 cover_primary.png 和次图 cover_square.png')
package main

import (
	"image"
	"image/color"
	"image/png"
	"log"
	"os"

	"golang.org/x/image/font"
	"golang.org/x/image/font/basicfont"
	"golang.org/x/image/math/fixed"
)

func main() {
	// 公众号头图 900x383
	img := image.NewRGBA(image.Rect(0, 0, 900, 383))
	// 填充背景色
	for y := 0; y < 383; y++ {
		for x := 0; x < 900; x++ {
			img.Set(x, y, color.RGBA{43, 108, 176, 255})
		}
	}
	// 添加文字(使用内置字体,仅支持 ASCII)
	point := fixed.Point26_6{X: fixed.I(50), Y: fixed.I(200)}
	d := &font.Drawer{
		Dst:  img,
		Src:  image.NewUniform(color.White),
		Face: basicfont.Face7x13,
		Dot:  point,
	}
	d.DrawString("Cover Title")

	// 保存
	f, _ := os.Create("cover.png")
	defer f.Close()
	if err := png.Encode(f, img); err != nil {
		log.Fatal(err)
	}
	println("已生成 cover.png")
}
const { createCanvas, loadImage, registerFont } = require('canvas');
const fs = require('fs');

async function generateCover() {
  // 头图 900x383
  const canvas = createCanvas(900, 383);
  const ctx = canvas.getContext('2d');

  // 背景色
  ctx.fillStyle = '#2b6cb0';
  ctx.fillRect(0, 0, 900, 383);

  // 文字(需安装字体或使用默认)
  ctx.fillStyle = '#ffffff';
  ctx.font = 'bold 48px sans-serif';
  ctx.fillText('公众号封面', 50, 200);

  // 输出为 PNG
  const buffer = canvas.toBuffer('image/png');
  fs.writeFileSync('cover.png', buffer);
  console.log('已生成 cover.png');
}

generateCover().catch(console.error);

常见问题

9 个高频疑问

公众号封面图尺寸到底是多少?我上传后总被裁剪或变形,怎么解决?
公众号头图标准尺寸是 900x383 像素(比例 2.35:1),次图(分享卡片)是 300x300 像素。本工具预设了这两个比例模板,你上传图片后会自动裁剪/缩放至合规尺寸。如果上传后仍变形,检查原图是否比例差异过大(比如竖屏长图),建议先手动裁剪到接近比例再上传。注意:微信后台会压缩图片至 500KB 以内,所以原图质量高不等于显示效果好,建议用压缩过的图片上传。
为什么我生成的封面图在手机上看颜色变暗了?
微信后台对图片有二次压缩,会降低亮度和饱和度,尤其深色背景和渐变区域更明显。本工具不改变原图颜色,但建议:①上传前将图片亮度提高 5-10%,②避免使用纯黑背景(#000000),改用深灰(#333333 或 #444444),③文字部分加白色描边或阴影,防止压缩后文字模糊。如果颜色差异特别大,可以截图对比浏览器预览和微信后台预览,确认是微信压缩导致。
这个工具支持 PNG 透明背景吗?生成的图片会不会带白底?
支持。如果你的原图是 PNG 透明背景,本工具会保留透明度,生成结果仍然是透明背景的 PNG 文件。但注意:上传时选 PNG 格式,输出也选 PNG;如果选 JPG 输出,透明区域会被自动填充白色。另外微信后台对 PNG 透明背景支持有限——在订阅号列表页(次图)会显示白底,在文章正文头图位置则正常。如果次图需要透明效果,建议用纯色背景替代。
生成的图片分辨率够用吗?我放大后很模糊。
本工具按微信官方规范输出 72 DPI 的图片,适合手机端和电脑端阅读。如果放大到印刷或海报级别(300 DPI 以上)就会模糊——因为微信后台只接收 900x383 像素的图片,像素数固定,放大必然模糊。如果需要在文章内用高清图做配图,建议单独上传一张 1920x1080 以上的原图作为正文图片,封面另用本工具生成。
上传图片后提示『比例超出范围』,怎么办?
本工具预设了两种比例:头图 2.35:1 和次图 1:1。如果原图比例与目标比例偏差超过 3 倍(比如一张全景横幅图裁成 1:1),工具会提示比例超出,避免强行裁剪导致内容丢失。解决办法:①先手动裁剪原图到接近目标比例再上传,②或选择『自适应填充』模式(如果有),工具会自动添加纯色背景补齐空白区域。如果工具没有该模式,建议用其他图片编辑软件先裁剪。
工具支持批量生成多张封面吗?我一次要做几十张。
目前不支持批量上传。本工具是纯浏览器端处理,一次只能处理一张图片,处理完后可手动下载。如果需要批量生成,可以:①用浏览器开发者工具录制操作(Mac 按 Cmd+Option+I,Windows 按 F12),用脚本自动重复上传-下载流程,②或使用其他后端批量处理工具。注意:单次生成后刷新页面会清空当前结果,建议生成一张下载一张。
生成的封面图在电脑上看着正常,发到公众号后文字被裁掉了,为什么?
微信后台对封面图有『安全区域』要求:头图上下各留 30 像素(约 3%)的裁剪余量,次图四周各留 15 像素。本工具生成的图片是 900x383 完整尺寸,但微信在列表页和分享页会再次裁剪边缘。建议:①文字和关键元素放在中心 800x323 区域(头图)或 270x270 区域(次图),②文字字号不小于 28px,③用本工具的『安全框』预览功能(如果有)查看最终显示效果。
这个工具和公众号后台自带裁剪功能有什么区别?为什么还要用它?
公众号后台只能做简单等比例裁剪,不支持添加文字、叠加模板、调整颜色。本工具提供了多套预设模板(如标题位置、装饰元素、渐变背景),可以直接套用生成统一风格的封面,适合需要批量产出品牌化封面的运营者。另外本工具在浏览器内完成,不依赖微信后台的压缩算法,可以预览更接近最终显示的效果。如果只是临时裁剪一张图,用微信后台就够;如果要做系列化封面或加文字/Logo,本工具更方便。
为什么我用手机浏览器上传图片后,工具反应很慢或者卡死?
本工具是纯前端处理,图片处理在浏览器内完成,对手机性能有一定要求。如果图片超过 10MB 或分辨率超过 4000x4000,手机内存不足会导致卡顿甚至闪退。建议:①先用手机相册自带的编辑功能将图片缩小到 2000x2000 以内,②或使用电脑浏览器操作,③如果必须用手机,关闭其他后台 App 释放内存。另外 iOS Safari 对 WebAssembly 支持较好,Android 用 Chrome 或 Edge 浏览器体验更稳定。
选择 打开 +新窗口 esc关闭