时间戳

首页 > 解决方案 > 响应式图像、浏览器和网络速度？

html - 响应式图像、浏览器和网络速度？

问题描述

我有一张目前只有一种尺寸 ( 600px x 300px) 的图像，我使用 CSS 来确保它响应视口宽度。在600px它的宽度下是100%，在600px它上面是固定的600px。

我现在想使用：

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

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

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

我可以提供多种图像尺寸，但某些手机上的像素密度意味着有时手机需要比台式机大得多的图像。我面前有两个连接互联网的设备：

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

使用srcset和sizes意味着桌面下载600px图像，而 iPhone 下载1125px( 375 * 3) 图像。

问题：

浏览器是否考虑了网络速度（我的 iPhone 在慢速 3G 连接上会选择较小的图像srcset，还是总是我们1125px）..？

我在网上搜索了答案，我找不到任何东西，我很高兴从链接中指出正确的方向。

标签： htmlimagebrowser

解决方案

我认为这还不可能。但是，有一个来自 W3C 的网络信息 API提案（草案），旨在为脚本提供一种在连接发生变化（蜂窝、WiFi、以太网等）时得到通知的方法。

与此同时，也许您可​​以使用延迟加载来按需加载图像资源。并不能真正解决您所描述的问题，但它确实减轻了设备上 Web 应用程序的初始网络负载。

更新：好的，所以根据Pete LePage，这还不可能：

上次听说，没有。未来也不是没有问题，请查看 http://crbug.com 获取功能请求，如果没有，请提交！

推荐阅读