Retina Display Images：如何在高 DPI 屏幕上提供清晰图形

Last updated: June 28, 2026

视网膜和高 DPI 屏幕将更多的像素塞入相同的物理空间，因此为标准屏幕尺寸设计的图片在这些屏幕上看起来会模糊且有像素感。要在这些屏幕上提供清晰的图片，需要准备更高分辨率的版本，并告知浏览器何时使用它们。本指南涵盖了 2x 和 3x 的工作流程、用于传输正确文件的 srcset 标记，以及清晰度与页面重量之间的平衡。

快速答案：如何让视网膜屏幕上的图片保持清晰？

创建尺寸为显示像素维度两倍（对于手机则是三倍）的图片版本，然后使用 srcset 属性提供这两种版本。浏览器只在能够显示这些版本的屏幕上加载高分辨率文件，因此标准显示器不会下载额外的字节。一张以 400 像素宽显示的照片需要一个 800 像素 (2x) 的源图用于视网膜。请对两者都进行适当的压缩导出——2x 文件虽然更大，但并非是两倍大，因为随着分辨率提高，压缩效率也会提高。

什么是视网膜或高 DPI 显示器？

“视网膜显示器”是一个营销术语，指的是像素密度足够高，人眼在正常观看距离下无法分辨单个像素的屏幕。苹果公司创造了这个词汇，但这个概念适用于大多数现代手机、平板电脑和笔记本电脑。实际衡量标准是设备像素比 (DPR)——它表示多少个物理像素代表一个 CSS 像素。

• 2x 屏幕需要两倍的线性像素（总共四倍）才能看起来清晰。
• 3x 手机屏幕需要三倍的线性像素。
• 标准 1x 屏幕下载基础图片，不会浪费任何资源。

Mozilla guide to device pixel ratio 文档了浏览器如何报告和使用 DPR，这是所有视网膜图像策略的基础。

如何创建 2x 和 3x 的图片版本？

从高分辨率源图开始，将其缩小到每个目标尺寸，而不是放大一个小的文件。一张原本用于 400 像素宽显示槽位的照片需要一个 400px (1x) 版本、一个 800px (2x) 版本以及一个 1200px (3x) 的手机版本。

1. 从至少与你的最大目标（3x）一样大的源图开始。
2. 将其缩小到 1x、2x 和 3x 的宽度。
3. 对每个版本进行压缩——2x 和 3x 文件在像素级别上的压缩效果更好。
4. 以 WebP 格式导出，以获得最小的高质量文件。
5. 提供所有版本，让浏览器自行选择。

• 切勿将小图片放大到 2x —— 它仍然会模糊，只是更重了。
• 由于更好的压缩率，2x 文件通常小于 1x 文件的两倍字节数。
• 3x 版本对于屏幕小、密集的手机尤其重要。

如何使用 srcset 提供正确的版本？

<img> 标签上的 srcset 属性告诉浏览器根据屏幕的 DPR 来加载哪个文件。浏览器负责选择，所以你只需要提供选项和标记。

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="描述性替代文本"
  width="400" height="300"
/>

• 1x、2x、3x 描述符将文件映射到设备像素比。
• 浏览器只加载与屏幕匹配的版本。
• 始终包含 width 和 height 以防止布局偏移。
• src 属性是针对旧浏览器的回退机制。

对于尺寸也会随着屏幕宽度变化的响应式图片，请将 srcset 与 sizes 属性和宽度描述符（如 400w、800w）结合使用，而不是 DPR 描述符。responsive images guide 涵盖了这种更高级的模式，而 image SEO guide 则解释了清晰、尺寸正确的图片如何帮助搜索性能。

何时使用 SVG 而不是位图（raster）？

对于徽标、图标和具有平面形状的插画，你可以通过使用 SVG 来规避整个 2x/3x 的问题。矢量图形可以无限缩放而不会损失分辨率——相同的 SVG 文件在 1x 显示器和 3x 手机上都保持锐利，因为它不是存储为像素而是由数学绘制的。

当图片由形状而不是摄影细节构成时，SVG 是正确的选择。唯一的权衡是 SVG 需要进行优化——未使用的元数据和编辑器垃圾会使其膨胀——而 SVG to PNG guide 涵盖了当你确实需要在无法渲染矢量环境中使用位图回退时的工作流程。对于网站页眉中的徽标，使用 SVG 可以完全消除该元素的视网膜问题。

测试你的视网膜图片

生成文件只完成了工作的一半；验证它们是否实际加载正确是另一半。进行一些检查可以确认设置正在正常工作，而不是静默地提供错误的文件。

1. 在视网膜设备上打开页面或在开发者工具中将浏览器 DPR 设置为 2x。
2. 检查图片元素，并确认加载的 currentSrc 是 2x 或 3x 文件。
3. 切换到 1x DPR，并确认它加载了 1x 文件。
4. 查看网络标签页，以验证每个屏幕只下载了一个版本。
5. 在视网膜屏幕上查看 100%，并确认图片清晰，而不是模糊的。

浏览器开发者工具的设备像素比覆盖功能允许你在没有物理设备的情况下进行测试，尽管真实的视网膜屏幕才是最终证明。一个常见的故障模式是 srcset 中的标记错误，这会导致浏览器回退到基础 src，在视网膜上看起来会很模糊，但不会抛出错误。网络标签页会立即捕获这一点——如果你看到 2x 屏幕加载了 1x 文件，说明 srcset 没有正确配置。

平衡清晰度与页面重量

视网膜图片陷阱在于为每个屏幕提供高分辨率文件，这使得无法分辨差异的用户页面的重量翻倍或三倍。srcset 方法避免了这个问题，但这只有在你确实生成并引用了较小的版本时才成立。向所有人提供单个 3x 文件是最常见的错误。

web.dev guide to responsive images 文档了正确处理此问题对性能的影响，而 Core Web Vitals guide 则将图片重量与影响排名的 LCP 指标直接关联起来。目标是在需要的地方保持清晰度，在其他地方保持克制——让浏览器选择，并生成所有版本，以便它有足够好的东西可供选择。

常见问题解答

如何让视网膜屏幕上的图片保持清晰？

使用 srcset 在显示尺寸处提供 2x（以及可选的 3x）位图版本的图片，这样浏览器就可以根据设备像素比选择正确的版本。在视网膜屏幕上，1x 的图片看起来是模糊的；2x 版本恢复了清晰度。

我是否需要为每个图形都准备 2x 图片？

对于清晰的图形和主视觉照片，是的——否则视网膜屏幕会显示出模糊感。对于装饰性或折叠以下（below-the-fold）的图片，通常只需要一个 1x 文件。使用 srcset 提供两者，这样非视网膜设备就不会下载大文件。

我应该何时使用 SVG 而不是 2x 位图？

对于徽标、图标和平面图形，是的——SVG 是独立于分辨率的，无论尺寸如何都能保持清晰，且无需额外的文件。对于照片，位图（带有 2x 版本）仍然是正确的选择。请参阅 SVG to PNG guide。

我如何提供视网膜图片？

使用 srcset 并结合 1x 和 2x（以及可选的 3x）源图，让浏览器根据设备像素比进行选择。将 1x 作为默认 src 发送，以便旧浏览器可以干净地回退。浏览器只下载它需要的那个变体。

srcset 会减慢页面速度吗？

不会——浏览器只下载它需要的那个变体，所以小屏幕会获得小文件。没有 srcset，每个设备都会下载最大的文件。srcset 节省了字节，而不是增加了它们。