使普通 HTML 网页在 HiDPI 和普通屏幕上看起来不错

Question

我在 4k-monitor 上注意到字体看起来不错，但是使用 Chrome 或 Firefox 网站上的很多图像看起来很模糊.

如何使 HTML 网页（可能带有琐碎的 JavaScript）在所有显示器上看起来都不错，例如通过提供两张图片：

1. 对于普通显示器 (100%) 和

2. 对于 HiDPI 显示器 (200%)?

Answer 1

快速简单的解决方案是只使用一张比要求大的图片。 例如：

有缺点：

1. 传输的数据更多，下载时间更长
2. 一些较旧的浏览器可能会使尺寸不准确的图像变得模糊

有更复杂的多图像解决方案，它们通常需要额外的 javascript 代码和库。只需几个易于压缩的图像，此解决方案的下载时间仍然会更短。