微信分享缩略图须为640×640等正方形静态图，HTTPS绝对路径，≤300KB，置于head内og:image标签中，禁用srcset和JS生成，需内容居中、留白充足并经工具压缩。

微信分享缩略图要求图片尺寸不小于 300×300 像素，推荐使用 640×640 或更高（如 1280×1280），但文件体积需控制在 300KB 以内；H5 页面中若直接用大图作为 og:image，可能因未压缩或尺寸失配导致缩略图模糊、裁剪异常或加载失败。关键不是“响应式图片”本身，而是为微信分享单独准备一张合规的静态缩略图。

明确微信缩略图是独立资源，不走 srcset/picture

微信客户端读取的是页面 标签中的 og:image，它只接受一个确定的 URL，不会解析 srcset、sizes 或 picture 的响应式逻辑。所以：

• 必须在 中写死一个高清、等比、裁剪得当的缩略图地址，例如：
  
• 这张图不能是原图直出，也不能是浏览器端 JS 动态生成的 canvas 图（微信不执行 JS）
• 响应式图片（）仅影响页面内显示，对分享缩略图无任何作用

缩略图制作的 3 个硬性要点

实际生产中，最容易出问题的是尺寸、比例和压缩方式：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 尺寸固定为正方形：微信会强制按 1:1 裁剪预览图。若提供 750×1334 的手机截图，会被居中切掉上下，只剩中间 750×750 区域——很可能切掉标题或关键信息。务必导出 640×640 或 1280×1280 的正方形图
• 内容居中且留白充足：核心图文元素建议放在中心 500×500 区域内，避免被裁剪；四周保留至少 70px 安全区（以 640px 为基准）
• 用工具精准压缩到 300KB 内：不要依赖“另存为 Web 格式”，推荐用 Squoosh 或 sharp（Node.js）批量处理，格式选 JPEG（质量 75–85）、WebP（质量 70+）均可；实测 640×640 的纯色背景+简洁文字图，WebP 可压至 40KB 以内

自动化建议：构建时生成分享图

人工切图易出错，尤其多活动/多语言场景。可接入简单自动化流程：

• 设计稿统一用 Sketch/Figma 导出 1280×1280 PNG 源图（带透明底或白底）
• 构建脚本（如 webpack 插件或 GitHub Action）调用 sharp 自动转 WebP + 压缩 + 重命名，并注入 HTML 模板
• 示例代码片段：
  sharp('src/share.png').resize(640, 640).webp({ quality: 80 }).toFile('dist/share-thumb.jpg');
• 上线前用 微信调试工具 验证 og:image 是否可正常抓取并显示清晰

避坑提醒：常见失效原因

很多 H5 分享不出图或显示默认图标，往往卡在这几个细节：

• 缩略图 URL 是相对路径（如 ./thumb.jpg）→ 必须用完整 HTTPS 地址
• 服务器未配置 CORS，或 Nginx 拦截了 .jpg/.webp 请求 → 确保该图片能被微信爬虫（ua 含 MicroMessenger）直接访问
• 同一张图被多个页面共用，但内容不匹配（如 A 页面分享图写着“618大促”，B 页面也用了它）→ 缩略图需语义化、页面专属
• HTML 中 og:image 标签位置太靠后，或被 JS 动态插入 → 必须在首屏 HTML 源码中静态存在，且在 内