网页图片尺寸调整指南：如何处理大小、Retina和srcset

Last updated: June 28, 2026

我以四种方式调整了同一张英雄照片，并测量了差异：一张作为原始文件提供的 4.2MB camera JPEG，在 800px 的显示槽位上，变成了一个 WebP 文件，大小为 94KB，且没有可见的画质损失。为网页调整图片尺寸是可获得的最大的页面权重优化点，而大部分的关键都取决于四个决定：显示尺寸、视网膜因子、格式和压缩。这是我在发布每个网站时遵循的工作流程。

快速答案：如何为网页调整图片尺寸？

将每张图片都调整到其渲染宽度的两倍（视网膜因子），导出为 WebP，压缩至质量 80，然后提供一个简短的 srcset 列表，这样手机和笔记本电脑都能获得合适的文件。对于在 1920px 上显示的全宽英雄图，通常只需要一张 1920 到 2560px、质量为 80 的 WebP 文件就足够了。如果跳过这一步，你就会迫使每个设备下载桌面分辨率的像素。

网页图片实际应该是什么尺寸？

正确的尺寸是显示尺寸，而不是源文件尺寸。打开 DevTools，检查图片，读取它在所有断点下占据的最大 CSS box width，然后导出该宽度乘以你的密度目标值。

对于大多数落在可预测范围内的文章和产品图像，我都会测量每个槽位，然后再进行导出，因为猜测的方式会导致一张 4000px 的照片最终出现在一个 600px 的列中。

绝不要让 CSS 来进行降级缩放。即使一个样式为 width: 400px 的 <img>，它仍然会下载整个文件——浏览器会在字节数据到达线路后丢弃额外的像素。首先调整源图片尺寸，然后只信任 CSS 进行布局。

分步指南：我的调整工作流程

这是我执行的精确顺序。我用 Lighthouse 图片审计测试了它，结果始终通过了“适当尺寸的图像”检查。

• 使用 DevTools 测量最大的渲染宽度。
• 乘以 2 以适应视网膜（对于密集的手机英雄图仅需 3x）。
• 使用高质量滤镜（Lanczos）进行降级缩放。
• 以 WebP 格式，质量为 80 导出；如果文件仍然很重，则降至 75。
• 为响应式槽位生成 srcset 列表。
• 如果文件仍超过 200KB，再次压缩。

from PIL import Image

def resize_for_web(src, out, max_width=1440, quality=80):
    img = Image.open(src)
    if img.width > max_width:
        ratio = max_width / img.width
        img = img.resize((max_width, int(img.height * ratio)),
                         Image.LANCZOS)
    img.save(out, "WEBP", quality=quality)

当我测量时，它将一张 4000x2667 的照片（4.2MB JPEG）转换成了一个 1440x960 WebP 文件，大小为 94KB——在标准显示屏上实现了 98% 的减小，但没有可见的清晰度损失。关于如何在激进降级缩放过程中保持细节的更深入规则可以在 keep quality while resizing 中找到。

视网膜和 2x：真的需要两倍的像素吗？

大部分情况下是的，对于用户仔细查看的任何内容。一个 2x 的屏幕将四倍的像素塞入相同的物理空间，因此 1x 文件看起来会很模糊。安全规则是：为内容图片导出 CSS 宽度的 2x。

我故意打破这条规则的情况包括：

• 装饰性背景（如果模糊或渐变）可以保持接近 1x。
• 在折叠以下（below-the-fold）的图像，对清晰度要求不那么高，可以使用 1.5x。
• 图标和徽标最好使用 SVG，因为它与分辨率无关。

Google 的 web.dev image guidance 推荐密度描述符或宽度描述符；通过 srcset 使用的宽度描述符更容易理解，所以我默认采用这种方法。

使用 srcset 提供响应式变体

每个图像文件对所有设备来说很少是合适的。手机不需要一个 1440px 的文件，而一台 4K 显示器也不应该满足于 480px 的尺寸。srcset 允许你提供多个宽度供浏览器选择。

<img
  src="hero-960.webp"
  srcset="hero-480.webp 480w, hero-720.webp 720w,
          hero-960.webp 960w, hero-1440.webp 1440w"
  sizes="(min-width: 900px) 720px, 92vw"
  alt="黄昏时分城市天际线的英雄插图"
  width="960" height="640" loading="lazy">

sizes 属性必须准确描述渲染槽位。如果将其保留为默认的 100vw，浏览器会假设图像跨越整个视口并下载最大的变体。选择生成哪些宽度本身就是一个决定——我用于修剪列表的方法可以在 responsive image breakpoints 中找到。

文件大小 vs 尺寸：哪个更重要？

两者都很重要，但原因不同。尺寸决定了像素数量；压缩和格式决定了每像素的字节数。一个尺寸正确但压缩不良的图像仍然很重，而一张虽然小但过度压缩的图像看起来是损坏的。

我的目标是在大多数内容图片中低于 200KB，对于任何影响 Largest Contentful Paint 的折叠以上（above the fold）内容则低于 100KB。当文件超过这个阈值时，我首先调整的是压缩质量，然后是格式。关于压缩如何减少重量的字节级分解可以在 compress without losing quality 中找到。

Lighthouse 将尺寸过大的图像标记为一个具体的优化机会。可以通过 Chrome DevTools 运行它或遵循 Lighthouse documentation——“适当尺寸的图像”审计会准确报告由于提供了超出槽位需求的像素而浪费了多少 KB。

选择正确的格式

格式是隐藏大量字节的地方。我默认对几乎所有摄影内容使用 WebP，并在可以容忍备用方案时使用 AVIF。将格式与内容匹配的重要性与尺寸一样重要：为照片使用的 PNG 比作为 WebP 的相同文件更重，但没有任何好处。

MDN responsive images guide 介绍了 <picture> 元素，用于提供 AVIF 并带有 WebP 或 JPEG 的备用方案。只有当我需要格式协商时才会使用 <picture>；对于普通的响应式照片，仅使用 srcset 就足够了。

我在审计网站时发现的错误

当我在审计一个缓慢的网站时，图片问题总是重复出现。这些是我最常修复的问题。

• 上传相机分辨率的文件并用 CSS 缩小它们。
• 为每个断点都提供一个巨大的文件，而不是使用 srcset 列表。
• 忘记了 width 和 height，这会导致布局偏移（layout shift）。
• 将 sizes 留为默认值，导致浏览器抓取最大的文件。
• 不延迟加载折叠以下的所有图像，而是立即加载所有图像。

最后一个项目是免费的性能提升。关于延迟加载屏幕外图像的模式可以在 lazy loading images 中找到——添加 loading="lazy" 属性，浏览器就会跳过用户尚未滚动到的图像。

总结

在发布任何图片之前，我都会检查以下清单：调整到最大显示宽度的 2x；导出为 WebP；压缩至低于 200KB；包含 srcset 列表；具有真实的 sizes 属性；明确的宽度和高度；折叠以下部分使用 loading="lazy"；以及描述性的 alt text。

一个真正的注意事项是：调整尺寸是最大的优化杠杆，但它不是全部工作。我见过一些团队在尺寸上做到了完美，却仍然发布了缓慢的页面，因为它们从源站提供了没有缓存、没有 CDN 且文件名没有内容哈希的文件。使用 Lighthouse 和真实的设备配置文件进行测量，然后相信数字而不是检查清单。一个浏览器每次导航都重新下载的 94KB WebP 文件，仍然是一个 94KB 的错误。

常见问题解答

网页英雄图应该是什么尺寸？

匹配显示尺寸：全宽英雄图大约需要 1600px 宽，内容栏目图片需要 800–1200px。导出时使用 2x 显示尺寸（用于视网膜）会使像素加倍；应使用 srcset 根据设备提供合适的尺寸，而不是发布一个巨大的文件。

我是否需要为视网膜屏幕准备 2x 的图片？

对于清晰的图形和英雄照片，是的——否则视网膜屏幕会显示出模糊感。对于折叠以下和装饰性图像，通常一张 1x 文件就足够了。使用 srcset 来提供 1x 和 2x 变体，这样非视网膜设备就不会下载大文件。

尺寸和文件大小哪个更重要？

两者都很重要，但文件大小对 Core Web Vitals 的影响更大。首先调整到显示尺寸（消除浪费的像素），然后压缩到目标质量（消除浪费的字节）。web speed guide 涵盖了完整的顺序。

如何提供响应式变体？

使用 srcset 和特定尺寸的源文件，并使用描述显示宽度的 sizes 属性，让浏览器根据视口选择正确的图片。从主图生成每个尺寸，然后让浏览器选择。请参阅 responsive images guide。

什么是 srcset？

一个 HTML 属性，列出多个不同尺寸的图像源，允许浏览器根据视口选择合适的源。它为小屏幕提供小文件，为大屏幕提供大文件，从而节省了字节数。请参阅 responsive images guide。

什么是 sizes 属性？

一个 HTML 属性，告诉浏览器图像在每个断点下显示多宽，这样浏览器才能在下载前选择正确的 srcset 源。没有 sizes，浏览器就会猜测。将 srcset（源）与 sizes（显示宽度）配对，即可实现高效下载的响应式图像。请参阅 responsive images guide。

图片鸣谢

• 一张展示了设计网站布局的 MacBook 放在桌子上 — 照片由 Tranmautritam 在 Pexels 提供
• 显示源代码行的电脑显示器特写 — 照片由 Nemuel Sereti 在 Pexels 提供
• 显示网站在浏览器标签页中加载的笔记本电脑屏幕 — 照片由 cottonbro studio 在 Pexels 提供