响应式图像,浏览器和网络速度?

时间:2018-11-15 11:59:05

标签: html image browser

我有一幅目前只有一个尺寸(600px x 300px)的图像,并且我使用CSS来确保它响应视口宽度。在600px下,其宽度为100%,在600px上,其宽度固定为600px

我现在要使用:

<img src="" srcset="" sizes="" />

...实现可响应的图像,希望移动用户可以下载较小的文件大小的图像。

很快我就遇到了“小屏幕与网络速度”的问题。

我可以提供多种图像尺寸,但是某些手机的像素密度意味着有时手机会要求比台式机更大的图像。我面前有两个与互联网相连的设备:

  1. Windows桌面,宽屏显示器,非常快速的网络连接,像素密度x1。
  2. iPhone X,3G连接,375px视口,像素密度x3。

使用srcsetsizes意味着桌面将下载600px图像,而iPhone将下载1125px375 * 3)图像。

问题:

浏览器是否考虑了网络速度(我的iPhone在速度较慢的3G连接上会从srcset中选择较小的图像,还是总是1125px?)??

我已经在网上搜索了答案,但找不到任何东西,很高兴能通过链接指向正确的方向。

1 个答案:

答案 0 :(得分:0)

我认为这还不可能。但是,有一个针对Network Information API from the W3C的提案(草案),旨在为如果连接(蜂窝,WiFi,以太网等)发生变化的通知脚本提供一种方法。

同时,也许您可​​以使用lazy-loading来按需加载图像资源。并不能真正解决您所描述的问题,但是可以减轻设备上Web应用程序的初始网络负载。

更新:好的,因此根据Pete LePage,这还不可能:

  

Last I heard, it does not. It's not out of the question for the future, check http://crbug.com for a feature request, and if there isn't one, file it!