微信分享缩略图须为640×640等正方形静态图，HTTPS绝对路径，≤300KB，置于head内og:image标签中，禁用srcset和JS生成，需内容居中、留白充足并经工具压缩。
微信分享缩略图要求图片尺寸不小于 300×300 像素，推荐使用 640×640 或更高（如 1280×1280），但文件体积需控制在 300KB 以内；H5 页面中若直接用大图作为 og:image，可能因未压缩或尺寸失配导致缩略图模糊、裁剪异常或加载失败。关键不是“响应式图片”本身，而是为微信分享单独准备一张合规的静态缩略图。
明确微信缩略图是独立资源，不走 srcset/picture
微信客户端读取的是页面 <meta> 标签中的 og:image，它只接受一个确定的 URL，不会解析 srcset、sizes 或 picture 的响应式逻辑。所以：
- 必须在
中写死一个高清、等比、裁剪得当的缩略图地址，例如：
- 这张图不能是原图直出，也不能是浏览器端 JS 动态生成的 canvas 图（微信不执行 JS）
- 响应式图片（
<img srcset alt="H5 中响应式图片怎么实现微信分享缩略图的尺寸压缩规范" >）仅影响页面内显示，对分享缩略图无任何作用
缩略图制作的 3 个硬性要点
实际生产中，最容易出问题的是尺寸、比例和压缩方式：
- 尺寸固定为正方形：微信会强制按 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 源码中静态存在，且在内
