大响应背景图像 - 哪个分辨率？

Question

我正在为摄影师开发一个网站。着陆页由大响应背景图像和菜单组成。我知道如何制作响应式背景图像，但我的问题是：图像应该是哪种分辨率？我应该获得2-3种不同的尺寸并根据设备宽度或我会减少的尺寸应用它们吗？哪个应该是最大屏幕的最大尺寸？感谢。

Answer 1

更多关注压缩和格式而非分辨率。如果在服务器上使用缓存和压缩，则无需降低映像的分辨率。至于这个问题：

  

我应该获得2-3种不同的尺寸并根据设备宽度或我要减少的尺寸应用它们吗？

对所有屏幕使用相同的图像。另请注意，更改图像大小属性不会减少加载时间，只需在下载后调整图像大小

Answer 2

我不确定我是否同意随机用户100％。如果可能的话，我会针对不同的媒体大小使用不同大小的图像。由于屏幕尺寸范围很广，而且带宽限制范围很广，如果您可以为屏幕提供尽可能小的图像尺寸，它将对加载时间产生很大影响。虽然随机用户可能对压缩和大小属性是正确的，但如果用户第一次加载您的页面，那么缓存将无济于事。在3G连接上加载高分辨率图像会以某种方式挂断您的页面加载。

目前，浏览器本身并没有广泛支持响应式图像（尚未），例如srcset attibute or the picture element，但有Javascript替代品。我使用的是Interchange，Foundation框架的一部分。

你确实要小心，你没有为Javascript加载损失交换图像加载节省。但是，一般来说，javascript库相当小，并且通常不会因为未在移动设备上加载大量图像而节省的额外HTTP请求。我建议将你的Javascript组合并压缩成一个文件，但这完全是另一回事。