网站图片最佳尺寸：横幅图、博客图和缩略图指南

网站图片的最佳尺寸大约是图片显示宽度的两倍。作为参考，全宽横幅图用1920到2560 px宽，博客图片用1200到1600 px，缩略图用300到600 px。保存为WebP或压缩过的JPG，大多数图片控制在约200KB以内。

这些是实用的起点，不是官方标准。实际数字由你的主题和版式决定，下面的方法会告诉你怎么找到它们。

网站图片的最佳尺寸是多少？

先看每张图片在版式中占多大空间。在电脑浏览器里打开页面，右键点按图片，选择“检查”。开发者工具会显示以CSS像素计的渲染宽度。把这个数字乘以二，图片在高密度屏幕的手机和笔记本上就能保持清晰。

常见图片类型速查：

• 全宽横幅图或广告横幅：1920到2560 px宽。
• 博客文章或内容栏里的图片：1200到1600 px宽。
• 商品照片：长边1000到2000 px，如果商店支持放大查看就再大一些。
• 缩略图和卡片：宽300到600像素。
• 标志和图标：尽量用SVG，因为它在任何尺寸下都清晰。
• 社交分享（Open Graph）图片：1200 x 630像素是广泛使用的尺寸。

最常见的错误，是把手机或相机拍的4000 px照片上传到700 px宽的栏里。浏览器会下载每一个像素，然后把大部分扔掉。用手机网络的话，就是白白等上好几秒。

在网页上，只有像素尺寸才重要。屏幕会忽略文件里存储的DPI数值，所以网站图片不需要设置72或300 DPI。我们的300 DPI指南解释了这个数字什么时候才重要（打印时）。

横幅图尺寸：多宽、多高？

横幅图（hero图）是页面顶部的大图。因为它横跨整个屏幕，所以应该是网站上最宽的图片。

• 宽度：1920 px能覆盖大多数电脑屏幕。如果想在大尺寸高密度显示器上也清晰，可以用到2560 px。
• 高度：取决于你的设计。在电脑宽度下，很多横幅图的高度在600到1000 px之间。
• 形状：16:9或21:9这样的宽幅裁剪适合电脑。在手机上，同一张图片经常会被裁成中间部分，所以把主体放在中间。
• 文件大小：尽量控制在约500KB以内，越小越好。

横幅图往往是页面的“最大内容绘制”（LCP）元素，也就是Google用来判断页面显示速度的那个时刻。Google的web.dev建议LCP控制在2.5秒以内。过大的横幅图通常就是页面达不到这个标准的原因。

如果横幅图上有文字，稍微暗一些或模糊一些的图片能让文字更易读，也更好压缩，因为平滑区域比精细细节占用的字节少。

文章配图和特色图片的博客图片尺寸

对于文章里的图片，看看你的内容栏有多宽。大多数博客主题的内容栏在600到800 CSS像素之间。乘以二就是1200到1600 px，也就是上面说的博客图片尺寸范围。

• 文章内的图片：1200 px宽适合大多数主题。如果内容栏较宽，就用1600 px。
• 特色图片：查看主题的说明文档。很多主题使用宽幅裁剪，1200 x 630 px还可以顺便用作社交分享图片。
• 截图：如果比内容栏窄，就保持原始尺寸，以免放大后文字变模糊。
• 文件大小：照片的目标是100到200KB。保存为PNG的截图可能更大，可以试试WebP。

整个博客的特色图片统一用一种形状。形状不一会让归档页和分类页看起来参差不齐。

网站图片的文件大小应该是多少？

没有官方限制，但下面这些大致目标能让页面保持快速：

• 大多数内容图片：约200KB以内。
• 大横幅图：约500KB以内。
• 缩略图：通常为20到50KB。

如果被KB和MB的目标搞糊涂了，我们的1 MB等于多少KB指南会帮你理清。

尺寸正确就完成了大部分工作，剩下的交给压缩。一张1600 px的照片，以75到85的质量保存为JPG，或者保存为WebP，通常就能落在范围内。如果图片仍然太大，就用能设定目标大小的压缩工具，比如ConvertorLab的图片压缩。发布前以实际大小把结果和原图对比一下。

应该用哪种格式？

• 照片和图形用WebP。Google称有损WebP比同等的JPEG小25%到34%，无损WebP比PNG小26%。当前所有主流浏览器都支持它。
• 标志、图标和简单插图用SVG。
• JPG作为备用，或者在你的平台不接受WebP时使用。
• 只有在需要无损质量或透明，又不能用WebP时，才用PNG。

我们的WebP文件是什么说明介绍了浏览器和App的支持情况。要转换现有文件，请使用图片转WebP转换器。

如何一步步调整网站图片大小

1. 把原始的高分辨率文件放在单独的文件夹里。永远不要编辑唯一的一份副本。
2. 把每张图片裁剪成版面使用的形状，比如横幅用16:9，卡片用1:1。
3. 调整到目标宽度。调整图片大小工具可以给一整批图片设置精确宽度或长边，并输出WebP或JPG。
4. 压缩到目标文件大小，然后以实际大小检查几张图片有没有色块或色带。
5. 给文件起简短、有描述性的小写名称，比如 oak-dining-table.webp.
6. 上传后，在CMS里添加描述性的替代文字（alt）。

很多平台会在上传时自动调整大小和转换格式。即便如此，也请上传尺寸合理的文件。这样能节省存储空间，也给平台一个干净的起点。

响应式图片、延迟加载和速度检测

图片的加载方式和图片大小同样重要。几个HTML习惯就能解决大部分问题：

• 给页面靠下的图片添加 loading="lazy" ，这样浏览器会等读者滚动到附近时再加载它们。
• 不要延迟加载横幅图。web.dev的 LCP优化指南 指出永远不要延迟加载LCP图片，并建议改为给它加上 fetchpriority="high" 。
• 请始终为图片设置 width 和 height 。浏览器会预留出空间，页面加载时文字就不会跳动。
• 如果图片在手机和电脑上显示的尺寸差别很大，可以用 srcset 和 sizes提供多个版本。MDN的 响应式图片指南 详细讲解了语法。

要找出问题最严重的图片，可以用PageSpeed Insights或Chrome开发者工具里的Lighthouse面板检测页面。它们会标出比显示尺寸更大的图片、可以改用现代格式的图片，以及应该延迟加载的屏幕外图片。你也可以打开“网络”标签，按“Img”筛选并按大小排序。排在前面、超过几百KB的图片，都值得优先调整大小。

常见问题