网站各类型图片的最佳尺寸参考

← 返回博客

网站各类型图片的最佳尺寸参考

· 5 分钟阅读

Hero 图（首屏大图）

Hero 图是网站首屏最显眼的视觉元素，对访客的第一印象影响最大。推荐规格：宽度 1920px（覆盖 2K 显示器宽度），高度 600-1080px（根据设计决定），WebP 格式，文件大小控制在 200-400KB 以内。

Hero 图的优化尤其关键，因为它是 LCP（最大内容绘制）的主要元素，直接影响 Core Web Vitals 评分。建议对 Hero 图使用 fetchpriority="high" 属性，提示浏览器优先加载该图片。

博客文章封面图（OG 图）

博客封面图同时服务于两个用途：网页内展示和社交媒体分享预览（Open Graph 图）。推荐尺寸：1200×630px（16:9 近似，兼容所有平台分享预览）。格式：JPG 或 WebP，文件大小 150-300KB。

好的博客封面图应包含：清晰的标题文字（大号、高对比度）、与文章主题相关的视觉、品牌色或 Logo（可选）。在社交媒体分享时，封面图直接影响链接点击率，高质量封面图可以显著提升流量。

产品展示图

• 主图（Product Main Image）：1000×1000px（1:1），支持用户缩放查看细节，WebP 格式，文件 150-300KB
• 缩略图（Product Thumbnail）：300×300 或 400×400px，文件 30-80KB
• Gallery 大图：1500×1500px，允许用户放大查看，文件 300-600KB

电商网站的产品图质量直接影响转化率。研究表明，支持高清缩放（Zoom）功能的产品图比普通图片可以提升 10-30% 的购买转化率，值得为此提供更高分辨率的图片。

缩略图和卡片图

缩略图是网站上数量最多的图片类型，出现在博客列表、产品列表、搜索结果等页面。由于数量多，每张缩略图文件大小的优化直接影响整体页面加载速度。推荐规格：400×300px（4:3）或 400×225px（16:9），JPG 或 WebP，文件大小 30-60KB。

缩略图通常不需要超过 600px 宽，因为在列表页面中单个图片的显示宽度通常是 200-400px。上传更大的缩略图只是浪费带宽，不会提升视觉效果。

背景图片

用作 CSS 背景的图片有特殊考量：全屏背景图建议最大宽度 1920px，高度视设计而定（通常 900-1200px）。由于背景图往往会被文字和其他元素覆盖，图片本身不需要过高的细节分辨率，质量可以适当降低（JPG 质量 70-80 即可）。

对于需要在所有屏幕尺寸上铺满的背景图，推荐使用 CSS background-size: cover，同时提供 2x Retina 版本和普通版本，通过媒体查询按需加载，避免移动端加载不必要的大图。

图标和 Logo

图标和 Logo 强烈建议使用 SVG 矢量格式，而不是 PNG/JPG。SVG 文件极小（通常 1-10KB）、任意缩放不失真、在 Retina 屏幕上显示完美。如果确实需要使用位图格式，推荐：网站 Logo（PNG）：200×60px 以内；Favicon：至少提供 32×32 和 180×180 两种尺寸；App 图标：512×512px（iOS）/ 512×512px（Android 自适应图标前景层）。

响应式图片的最佳实践

现代网站需要在从 320px 宽的手机到 2560px 宽的 4K 显示器上都正确展示图片。使用 HTML 的 srcset 和 sizes 属性，可以让浏览器根据设备屏幕自动选择合适分辨率的图片版本，避免移动端加载桌面端大图的浪费。

实际案例：一张博客封面图，可以提供三个版本：800px（手机用）、1200px（平板用）、1920px（桌面用）。浏览器会根据当前屏幕宽度和设备像素比自动选择最合适的版本，用户感受是最佳图片质量，服务器感受是更低的带宽压力。

立即尝试在线工具，无需安装，免费使用。

打开工具 →