mobile - 确定移动设备的图像质量

Question

在响应式网站上确定将哪些图像资产提供给移动设备和桌面设备的最佳做法是什么？期望的结果是为桌面用户提供大的高分辨率图像，为移动用户提供较小的图像。

Answer 1

上次我研究这个的方法是这样，我认为这仍然是解决问题的好方法。

• 尝试先加载低分辨率图像。这将很快为浏览器提供足够的数据。
• 然后，您可以使用 JavaScript（有这方面的库）来检测浏览器的功能（我是否有高像素比，我是否有大屏幕等）
• 然后确定是否加载更大的版本以及具体的图像（可能有用将各种 url 放在图像的数据属性中）

当然，您的解决方案可能会有所不同，但始终牢记渐进增强（首先加载更大的图像是没有意义的）。