2026年网站最佳图像尺寸与格式

未优化的图像是网站变慢的头号原因。本指南基于图像在现代网站上的实际显示方式，为你提供关于图像尺寸、文件大小和格式的具体建议。

黄金法则：以显示尺寸提供图像

如果图像只会以800px宽度显示，就不要上传4000px宽的图像。浏览器会下载整张图像，但只以一小部分的尺寸显示——所有那些多余的数据都是浪费的带宽。

在上传前，请始终将图像调整为它们将被显示的最大尺寸。

各使用场景的推荐尺寸

图像类型	最大宽度	目标文件大小
全宽主图／横幅	1920px	200KB以下
博客文章特色图像	1200px	100KB以下
博客文章内嵌图像	800px	60KB以下
产品照片（电商）	1000px	80KB以下
缩略图／卡片图像	400px	25KB以下
徽标（位图）	200px	10KB以下
背景纹理	1000px（平铺）	30KB以下

最佳格式建议

• 照片和产品图像：优先使用WebP，或使用80%质量的JPG
• 徽标和图标：SVG（矢量）——在任何尺寸下都能完美缩放，文件极小
• 截图和UI图像：PNG或无损WebP
• 纯色插图：SVG或WebP

Core Web Vitals目标

谷歌根据Core Web Vitals对页面进行评分。对于图像而言，相关指标是Largest Contentful Paint（LCP，最大内容绘制）——即主要可见图像的加载速度：

• 良好：LCP低于2.5秒
• 需要改进：2.5–4秒
• 较差：超过4秒

如果你的主图超过200KB，它很可能是移动网络下LCP得分不佳的原因之一。

分步指南：图像优化工作流程

1. 确定显示尺寸 — 检查你的图像在CSS/HTML中实际渲染的最大宽度。
2. 按该宽度调整尺寸 — 使用我们的图像尺寸调整工具。如有需要，可包含视网膜屏幕的2倍版本。
3. 转换为WebP — 使用JPG转WebP或PNG转WebP。
4. 压缩 — 使用我们的图像压缩工具，质量设为75–80%。
5. 设置width和height属性 — 防止Cumulative Layout Shift（CLS），这是另一项Core Web Vitals指标。
6. 添加延迟加载 — 为首屏以下的图像使用loading="lazy"。

Retina／高分辨率屏幕

Retina屏幕（大多数现代手机和MacBook）以2倍或3倍像素密度显示。页面上400px宽的位置，在Retina屏幕上需要800px的图像才能显示清晰。使用HTML的srcset属性，根据屏幕密度提供不同尺寸：

<img
  src="image-400.webp"
  srcset="image-400.webp 1x, image-800.webp 2x"
  width="400" height="300"
  alt="描述文字"
>

Next.js用户须知

如果你使用Next.js，内置的<Image>组件会自动处理所有这些工作——它会调整尺寸、提供WebP格式，并原生添加延迟加载。你只需提供原始高分辨率图像，剩下的传输优化交给Next.js即可。