网页上的图片该多大？尺寸、体积与打开速度的参考值

结论先给：首屏大图 ≤200KB，文章配图 ≤120KB，缩略图 ≤40KB，图标优先用 SVG。 尺寸按「实际显示宽度的 2 倍」准备——这是兼顾清晰度与体积的通行做法。

位置	建议像素（宽）	建议体积	格式
首屏大图 / Banner	1600–1920	≤ 200KB	WebP（回退 JPG）
文章配图	800–1200	≤ 120KB	WebP / JPG
商品主图	800×800 或 1200×1200	≤ 150KB	JPG
缩略图 / 列表图	300–400	≤ 40KB	WebP
图标 / Logo	矢量优先	< 10KB	SVG，其次 PNG

为什么要按 2 倍准备

手机和大部分笔记本是高清屏，一个 CSS 像素对应 2 个物理像素。你在页面上放一张显示宽度 600px 的图， 如果只提供 600px 的图片文件，高清屏上会显得发虚。所以准备 1200px 的图，浏览器自己缩到 600 显示。

但别无限往上堆：3 倍图对肉眼几乎没有收益，体积却翻两倍多。

体积比尺寸更容易失控

一张 1920px 的图，压得好是 150KB，压得差能到 1.5MB——差别全在质量参数和格式。 同样的画面，WebP 通常比 JPG 小 25% 左右，比 PNG 小 60%–80%。

上传到平台会被二次压缩

淘宝、京东、公众号、小红书这些平台都会对上传图重新压缩。所以别指望「传一张巨大的高清图让它自己压」， 结果往往是被压得更糊。正确做法是按平台建议尺寸自己先压好再传。

• 主图：正方形，1000–1200px，白底，主体占 70% 以上
• 详情图：宽 750–1200px，单张 200KB 内，多图分段
• 公众号正文配图：宽 1080px，200KB 内，WebP 在部分旧版微信里不显示，用 JPG 更稳

按目标体积压图，用图片压缩工具； 需要 WebP 格式，用格式转换。