first of all, let"s talk about the meaning of adaptive compression on my side: the src stores the bitmap in the img tag, the data-ori stores the address of the original image, and the page onload loads the big image according to the network status (src is replaced with the value of data-ori). The server has provided images with various degrees of compression.

two problems are encountered:

question 1: with regard to the judgment of network status, the current practice is to do a simple transferSize/responseTime calculation based on Web Performance Api. However, the Api is not fully compatible, and the bandwidth calculation is too simple to be accurate. Ask if there is any better bandwidth speed measurement scheme (without the introduction of third-party resources).

question 2: after the network state is calculated, a certain compression ratio is obtained according to the network state. When the data-ori image request is initiated, it will be followed by a compression logo. For example, a.jpg?q=100 indicates that the original image is loaded, and the server provides the corresponding compression ratio image according to the Q value. However, due to the change of url, there will be a problem of not caching: for example, the original image a.jpgpowerqroom100 has been cached locally, and the current network status is poor. After onload, it is calculated that the request to initiate a request from Qroom60data a.jpg?q=60 will request the cache instead of going to the cache.
I wonder if there is any good practice?