image - 全屏缩放背景是否有最佳图像尺寸(宽度 x 高度 | 文件大小)？

Question

我正在构建一个投资组合网站，该网站依赖于在浏览器窗口中以全尺寸显示精美、高质量的照片。

我结合使用了 CSS3 background-size: cover 标签和这个可以用更高分辨率的图像替代更高分辨率设备的小片段:

http://www.bdoran.co.uk/2012/08/28/detecting-and-delivering-images-to-retina-displays/

根据那篇文章，我至少需要三个版本的图像，一个是 1x，一个是 1.5x，一个是 2x，但这些图像有可能变得非常庞大。

是否有最佳图像大小，可以在大屏幕上很好地缩放，但不会产生巨大的文件大小和下载时间？

用户在页面上停留的时间越长，我是否应该考虑逐步提高质量？所以首先加载低质量/分辨率的图像，然后用更高的图像替换？

Answer 1

根据这个browser statistic如果您想安全起见，1800 x 1080 对我来说似乎是一个合理的尺寸。也许您的目标受众使用更大的屏幕，如果可以的话，您应该发现这一点。

我不会像您描述的那样进行渐进式增强。每个用户都必须下载图像 3 次。

相反，您可以使用媒体查询来检查用户屏幕大小，如图所示 here .因此，用户正在下载适合他们的内容。

编辑:This也是一种有趣的方法。