Method for determining long picture loading mode according to mobile terminal environment
By analyzing user's mobile environment data and dynamically adjusting the long picture loading method, the problem of difficulty in providing a consistent and optimal loading experience in multiple platforms and multiple environments is solved, and efficient optimization and personalized user experience is achieved.
Patent Information
- Application Number
- CN202411745336.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-02
- Publication Date
- 2025-03-21
AI Technical Summary
In complex multi-platform and multi-environment, how to accurately predict user needs and efficiently optimize long-picture loading methods makes it difficult to provide a completely consistent and optimal loading experience.
Dynamically adjust the loading method of long pictures by collecting and analyzing the user's mobile environment data, including network status, device performance, screen size and resolution. The specific steps include: analyzing the image structure and selecting the loading strategy, selecting the original image loading, cutting loading or progressive loading based on environmental information and image characteristics, and combining WebP image compression technology and image processing algorithms to monitor and adjust the loading method in real time to meet user needs.
It realizes efficient optimization under different devices, network conditions and user behavior habits, provides a more consistent and optimal long image loading experience, reduces loading time and traffic consumption, and improves the personalization of the user experience.
Smart Images

Figure CN119669592A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of mobile data, and more specifically, to a method for determining a long image loading method according to a mobile terminal environment. Background Art
[0002] A technical background for determining the loading method of long images according to the mobile terminal environment stems from the challenges of screen resolution differences, network bandwidth limitations, and device performance limitations of mobile devices. With the popularity of smartphones and mobile devices, users' demand for content has also become diversified, especially in the loading of long images (such as panoramas and long strips). Traditional image loading methods often have problems such as slow loading speed and high traffic consumption, especially when the network is unstable or the device performance is weak, which has a significant impact on the user experience. In order to solve this problem, developers have introduced a variety of optimization strategies, such as lazy loading (a method for determining the loading method of long images according to the mobile terminal environment), segmented loading, and dynamic adjustment of loading methods based on network conditions. For example, lazy loading technology can only load the image content of the current visible area according to the user's scrolling behavior, thereby saving traffic and increasing loading speed; while segmented loading divides the long image into multiple small blocks and loads them step by step, avoiding loading the entire long image at one time, resulting in page freezes and resource waste. In addition, adaptive loading technology based on user device performance and network environment can automatically select the loading method according to different network speeds, such as loading high-definition images in a Wi-Fi environment and loading low-definition images in a 4G or worse network environment.
[0003] However, this technology also has some shortcomings. The biggest problem is that although adaptive loading technology can optimize image loading speed and traffic consumption to a certain extent, it is still a difficult problem to accurately predict user needs and optimize them efficiently in complex multi-platform and multi-environment environments. Different devices, network conditions, and even different user behavior habits will affect the choice of loading method, making it difficult to provide a completely consistent and optimal loading experience. Summary of the invention
[0004] The purpose of the present invention is to provide a method for determining the loading of long images according to the mobile terminal environment to solve the problems raised in the above background technology: although the adaptive loading technology can optimize the image loading speed and traffic consumption to a certain extent, it is still a difficult problem to accurately predict user needs and optimize them efficiently in complex multi-platform and multi-environment environments. Different devices, network conditions, and even different user behavior habits will affect the choice of loading methods, making it difficult to provide a completely consistent and optimal loading experience.
[0005] Technical solution: The method of determining a long image loading method according to a mobile terminal environment includes the following steps:
[0006] S1. Collect and analyze the user's mobile environment data, including network status, device performance, and screen size and resolution; evaluate the network environment by detecting the user's current network connection type and network speed, and evaluate the device's processing capabilities, including CPU, memory, storage space, and GPU;
[0007] Determine the image display requirements based on the device's screen resolution and physical size;
[0008] S2. Analyze the structure of the image and select a loading strategy; evaluate the characteristics of long images and determine the loading method; evaluate the loading requirements based on the length, width and file size of the image; split and load larger images, and load smaller images directly as original images; the long image includes multiple view area strips and panoramic images;
[0009] S3. Based on the collected environmental information and image characteristics, original image loading is adopted when the device performance is strong, the network environment is good and the image size is moderate; for large and long images, the images are cut into multiple small pieces, and the cut pieces are gradually loaded according to the user's scrolling situation; progressive loading is adopted when the network is slow and the device performance is low, and low-definition images are initially loaded, and higher-definition image areas are gradually loaded when the user scrolls and zooms in;
[0010] The dynamic strategy loading combines the original image loading, the cut loading, and the progressive loading, and dynamically adjusts the loading mode according to the network environment, device performance, and image characteristics, monitors the user's network status and device resources in real time, and flexibly switches the loading mode;
[0011] S4. Dynamically adjust the loading method by real-time monitoring and adjustment of network status, device performance and user behavior; intelligently identify and adapt to the user's personalized needs through the collected historical data and behavior of users; use image compression technology WebP and image processing algorithms to reduce the loading time and traffic consumption of large file images.
[0012] Preferably, detecting and analyzing the user mobile terminal environment data includes the following steps:
[0013] S1-1. Use the API provided by the operating system to obtain the device's network connection type; iOS uses the Network framework to obtain the connection type; Android uses ConnectivityManager to obtain the current network connection type; use the Ping test to evaluate network latency and detect response speed; download fixed-size file images and JSON data to measure the download time and calculate the network bandwidth; use the speed test library to obtain network speed data;
[0014] S1-2. Operate the API provided by the system to obtain the processor information and memory capacity of the device; iOS obtains the number of CPU cores and memory information through sysctlAPI; Android obtains the memory data of the device through ActivityManager; Operate the API of the system to obtain the GPU performance information of the device; iOS obtains the GPU model and memory information through the Metal framework; Android uses the hardware detection API to obtain GPU related information; Obtain the total storage capacity and available storage space of the device by operating the API of the system; Both iOS and Android provide FileSystemAPI to obtain device storage data;
[0015] S1-3. Get the screen information of the device to adapt the loaded image to the display requirements of the screen; obtain the physical size of the device screen by operating the API provided by the system; iOS obtains the width and height of the screen through UIScreenAPI; Android obtains the screen resolution through DisplayMetrics; calculates the actual resolution of the screen according to the pixel density of the screen; iOS obtains the pixel density of the screen through the scale property of UIScreen; Android obtains the density and resolution of the screen through the DisplayMetrics class;
[0016] Calculates the actual screen resolution of the device based on the device's screen size and pixel density.
[0017] Preferably, the calculation formula for calculating the image file size and the image size and loading time in S1 is as follows:
[0018] Get the size of the image file in bytes through the image loading library; if the image size is S, convert it using the following formula:
[0019]
[0020] The file loading time is closely related to the file size and network speed; the loading time T is estimated by the following formula:
[0021]
[0022] Wherein, S is the file size in bytes; B is the network bandwidth, which is obtained through speed measurement.
[0023] Preferably, the comprehensive evaluation formula is as follows:
[0024]
[0025] Wherein: α, β, and γ are weight coefficients, which are adjusted according to specific needs; Indicates network loading efficiency; Indicates compression efficiency; the adaptation rate indicates the degree of matching between the resolution and the screen.
[0026] Preferably, the S2 monitors the user's network status in real time and defines the network status:
[0027] High speed means bandwidth > 5Mbps, which is used to load high-resolution images and original images; medium speed means bandwidth 1-5Mbps, which is used to load segmented images and progressive images; low speed means bandwidth < 1Mbps, which is used to load low-resolution images and segmented thumbnails first;
[0028] The download speed is calculated by regularly requesting a small file of 100KB via HTTP to obtain the actual network bandwidth B and latency L. The calculation formula is as follows:
[0029]
[0030] Preferably, the S2 memory status detection obtains the available memory M of the device. available , and total memory M Total , determine whether there is pressure:
[0031]
[0032] Use performance monitoring tools to evaluate the current CPU load C load ;
[0033] If the C load >80%, the device processing capacity is considered to be limited, and the complexity of the loading task is reduced; the screen resolution and physical size are detected, the pixel density DPI is calculated, and the image resolution is determined to be too high; if the image resolution exceeds the screen resolution by 2×, thumbnails are loaded first and compressed.
[0034] Preferably, when a slow network speed and low device performance are detected and judged as a "poor environment", a pop-up window asks the user whether to select the clarity independently; if the user chooses to select the clarity independently, the system pauses image loading and prepares to display a window asking the user to select the clarity; the window asking the user to select the clarity provides options of low definition, medium definition and high definition; if the user does not select any option, the selection is made based on the system's intelligent judgment.
[0035] Preferably, S4 adjusts the compression quality in real time, and dynamically adjusts the WebP compression quality parameter formula according to the network bandwidth and device performance as follows:
[0036]
[0037] Comparing the loading time of using the WebP and traditional JPEG formats, the compression ratio and the time saved are calculated as follows:
[0038]
[0039] Measure the traffic consumption of the WebP and other image formats at the same resolution.
[0040] Compared with the prior art, the advantages of the present invention are:
[0041] (1) The original solution focused more on the dynamic adjustment of the loading method, and a new step was added to use WebP image compression technology, which can further reduce the file size under the same network conditions, fundamentally optimizing the loading efficiency; WebP's excellent performance in balancing compression ratio and image quality reduces the amount of transmitted data, and combined with dynamic adjustment strategies, it is more suitable for weak networks and low-performance devices.
[0042] (2) Before loading the image, new steps are added to preprocess the image, such as denoising, resolution adjustment, and content-aware compression. Through these algorithms, the loading priority of important areas can be dynamically determined based on the image content; the original solution mainly focuses on the overall image loading strategy, while the new preprocessing optimizes the loading of key areas, improving resource utilization and user experience.
[0043] (3) Based on traditional progressive loading, a new progressive loading mode based on WebP multi-frame support is added, and fragment loading is introduced to make the loading of very long images more efficient; this allows image loading to not only be limited to overall optimization, but also to load the user's currently visible area on demand, significantly reducing user waiting time.
[0044] (4) Dynamically adjust the compression quality of the image based on the real-time performance of the device, network bandwidth, and loading time target. This is a further refinement of the original "fixed strategy" or "dynamic switching strategy". This makes the loading method more targeted and can achieve the best balance between performance and visual experience under different conditions.
[0045] (5) A new intelligent format switching mechanism has been added for browser compatibility. When the WebP format is not supported, it will automatically switch to JPEG or PNG; this enhances the system's adaptability and avoids loading failures due to device or browser limitations.
[0046] (6) Real-time monitoring of user network conditions and device performance, and optimization of image rendering efficiency in combination with background decoding. This mechanism is particularly important in weak network or high-load scenarios; it ensures the stability of the loading process, while using idle time to complete the loading of high-priority images, improving the smoothness of user operations.
[0047] (7) Specific quantitative formulas and indicator evaluations for loading time and traffic consumption were added to clarify the optimization effect; a data-driven optimization path was provided so that the pros and cons of the solution can be directly verified through quantitative analysis, which is helpful for subsequent improvement and optimization.
[0048] (8) Combine user historical data and behavior preferences to intelligently adjust the loading strategy. For example, predict the user's preferences for image quality and speed, and dynamically adapt the loading strategy. This improves the personalization of the user experience and reduces invalid loading operations. BRIEF DESCRIPTION OF THE DRAWINGS
[0049] Figure 1 This is a schematic diagram of an overall system for determining a long image loading method according to a mobile terminal environment according to the present invention; DETAILED DESCRIPTION
[0050] For examples, see Figure 1 A method for loading a long image according to a mobile terminal environment includes the following steps:
[0051] S1. Collect and analyze the user's mobile environment data, including network status, device performance, and screen size and resolution; evaluate the network environment by detecting the user's current network connection type and network speed, and evaluate the device's processing capabilities, including CPU, memory, storage space, and GPU;
[0052] Determine the image display requirements based on the device's screen resolution and physical size;
[0053] S2. Analyze the structure of the image and select a loading strategy; evaluate the characteristics of long images and decide on the loading method; evaluate the loading requirements based on the length, width and file size of the image; split and load larger images, and load smaller images directly as original images; long images include multiple view area strips and panoramas;
[0054] S3. Based on the collected environmental information and image characteristics, original image loading is adopted when the device performance is strong, the network environment is good and the image size is moderate; for large and long images, the images are cut into multiple small pieces, and the cut pieces are gradually loaded according to the user's scrolling situation; progressive loading is adopted when the network is slow and the device performance is low, and low-definition images are initially loaded, and higher-definition image areas are gradually loaded when the user scrolls and zooms in;
[0055] Dynamic strategy loading combines original image loading, cut loading, and progressive loading, and dynamically adjusts the loading method according to the network environment, device performance, and image characteristics. It monitors the user's network status and device resources in real time and flexibly switches the loading method.
[0056] S4. Dynamically adjust the loading method by real-time monitoring and adjustment of network status, device performance and user behavior; intelligently identify and adapt to the user's personalized needs through the collected historical data and behavior of users; use image compression technology WebP and image processing algorithms to reduce the loading time and traffic consumption of large file images.
[0057] Analyzing user mobile environment data includes the following steps:
[0058] S1-1. Use the API provided by the operating system to obtain the device's network connection type; iOS uses the Network framework to obtain the connection type; Android uses ConnectivityManager to obtain the current network connection type; use the Ping test to evaluate network latency and detect response speed; download fixed-size file images and JSON data to measure the download time and calculate the network bandwidth; use the speed test library to obtain network speed data;
[0059] Specifically, network latency is represented by the round-trip time (RTT) from when a request is sent to when a reply is received, and the calculation formula is as follows:
[0060] RTT=T reply-received _T request_sent
[0061] Among them, T reply-received is the timestamp of sending the request; T request_sent is the timestamp when the reply was received.
[0062] Record the PTT values of multiple Ping tests and calculate the statistics:
[0063] Minimum delay: RTT min ; Average delay: Maximum delay: RTT max ; Jitter: indicates the variability of the RTT value, and the calculation formula is:
[0064] S1-2. The API provided by the operating system obtains the device's processor information and memory capacity; iOS obtains the number of CPU cores and memory information through the sysctl API; Android obtains the device's memory data through the ActivityManager; the operating system's API obtains the device's GPU performance information; iOS obtains the GPU model and memory information through the Metal framework; Android uses the hardware detection API to obtain GPU-related information; the total storage capacity and available storage space of the device are obtained through the operating system's API; iOS and Android both provide FileSystem API to obtain device storage data;
[0065] S1-3. Get the screen information of the device to adapt the loaded image to the display requirements of the screen; get the physical size of the device screen through the API provided by the operating system; iOS gets the width and height of the screen through UIScreenAPI; Android gets the screen resolution through DisplayMetrics; calculate the actual resolution of the screen based on the pixel density of the screen; iOS gets the pixel density of the screen through the scale property of UIScreen; Android gets the density and resolution of the screen through the DisplayMetrics class;
[0066] Calculates the actual screen resolution of the device based on the device's screen size and pixel density.
[0067] S1 calculates the image file size and the image size and loading time using the following formula:
[0068] Get the size of the image file in bytes through the image loading library; if the image size is S, convert it using the following formula:
[0069]
[0070] The file loading time is closely related to the file size and network speed; the loading time T is estimated by the following formula:
[0071]
[0072] Among them, S is the file size in bytes; B is the network bandwidth, which is obtained through speed measurement.
[0073] Specifically, get the image resolution:
[0074] The resolution is expressed in pixels by the width W and height H of the image;
[0075] The aspect ratio R is used to determine the shape characteristics of the image:
[0076]
[0077] If R>3, the image is judged as a long image.
[0078] Screen adaptability evaluation requires comparing the image resolution with the device screen resolution; assuming the screen width and height are W s and H s , the formula is as follows:
[0079]
[0080] If the adaptation rate is <1, it means that the image loading resolution is too high, so it will be loaded in a smaller size;
[0081] If the adaptation rate is ≥ 1, it means that the image is directly adapted to the screen.
[0082] Image compression ratio C is an important parameter for lossless compression and lossy compression:
[0083]
[0084] Among them, S 原始 is the file size of the original image; S 压缩 The size of the compressed image file.
[0085] JPEG and WebP formats support a quality factor (QF) ranging from 0 to 100. The higher the value, the better the visual quality but the larger the file size. By adjusting the QF, you can dynamically control the clarity of the loaded image:
[0086] High quality description: QF>85; Standard mode: 70≤QF≤85; Low quality mode: QF<70
[0087] Image clarity is positively correlated with resolution, and the clarity index D is estimated according to the following formula:
[0088]
[0089] Where: P is the total number of pixels in the image, P = W × H
[0090] A is the actual display area of the image (screen area and viewing area); when D exceeds a certain threshold (such as 300 pixels, square millimeters), it can be considered that the clarity is high.
[0091] The comprehensive evaluation formula is as follows:
[0092]
[0093] Among them: α, β, γ are weight coefficients, which can be adjusted according to specific needs; Indicates network loading efficiency; Indicates compression efficiency; adaptation rate indicates the degree of matching between resolution and screen.
[0094] S2 monitors the user's network status in real time and defines the network status:
[0095] High speed means bandwidth > 5Mbps, which is used to load high-resolution images and original images; medium speed means bandwidth 1-5Mbps, which is used to load segmented images and progressive images; low speed means bandwidth < 1Mbps, which is used to load low-resolution images and segmented thumbnails first;
[0096] The download speed is calculated by regularly requesting a small file of 100KB via HTTP to obtain the actual network bandwidth B and latency L. The calculation formula is as follows:
[0097]
[0098] S2 memory status detection, obtain the device's available memory M available , and total memory M Total , determine whether there is pressure:
[0099]
[0100] Use performance monitoring tools to evaluate the current CPU load C load ;
[0101] If C load >80%, the device processing capacity is considered to be limited, and the complexity of the loading task is reduced; the screen resolution and physical size are detected, the pixel density DPI is calculated, and the image resolution is determined to be too high; if the image resolution exceeds the screen resolution by 2×, thumbnails are loaded first and compressed.
[0102] When the network speed is slow and the device performance is low and it is judged as a "poor environment", a pop-up window will ask the user whether to select the clarity independently; if the user chooses to select the clarity independently, the system will pause image loading and prepare to display a window asking the user to select the clarity; the window asking the user to select the clarity provides low definition, medium definition and high definition options; if the user does not select any option, the selection will be made based on the system's intelligent judgment.
[0103] S4 adjusts the compression quality in real time, and dynamically adjusts the WebP compression quality parameter formula according to network bandwidth and device performance as follows:
[0104]
[0105] Compare the loading time of WebP and traditional JPEG format, calculate the compression ratio and time saved, the formula is as follows:
[0106]
[0107] Measure the traffic consumption of WebP and other image formats at the same resolution;
[0108] The above shows and describes the basic principles, main features and advantages of the present invention; those skilled in the art should understand that the present invention is not limited to the above embodiments, and the above embodiments and descriptions are only preferred examples of the present invention and are not used to limit the present invention. Without departing from the spirit and scope of the present invention, the present invention may have various changes and improvements, and these changes and improvements all fall within the scope of the present invention to be protected; the scope of protection claimed by the present invention is defined by the attached claims and their equivalents.
Claims
1. A method for determining a long image loading method according to a mobile terminal environment, characterized in that: The method of determining a long image loading method according to a mobile terminal environment comprises the following steps: S1. Collect and analyze the user's mobile environment data, including network status, device performance, and screen size and resolution; evaluate the network environment by detecting the user's current network connection type and network speed, and evaluate the device's processing capabilities, including CPU, memory, storage space, and GPU; Determine the image display requirements based on the device's screen resolution and physical size; S2. Analyze the structure of the image and select a loading strategy; evaluate the characteristics of long images and determine the loading method; evaluate the loading requirements based on the length, width and file size of the image; split and load larger images, and load smaller images directly as original images; the long image includes multiple view area strips and panoramic images; S3. Based on the collected environmental information and image characteristics, original image loading is adopted when the device performance is strong, the network environment is good and the image size is moderate; for large and long images, the images are cut into multiple small pieces, and the cut pieces are gradually loaded according to the user's scrolling situation; progressive loading is adopted when the network is slow and the device performance is low, and low-definition images are initially loaded, and higher-definition image areas are gradually loaded when the user scrolls and zooms in; The dynamic strategy loading combines the original image loading, the cut loading, and the progressive loading, and dynamically adjusts the loading mode according to the network environment, device performance, and image characteristics, monitors the user's network status and device resources in real time, and flexibly switches the loading mode; S4. Dynamically adjust the loading method by real-time monitoring and adjustment of network status, device performance and user behavior; intelligently identify and adapt to the user's personalized needs through the collected historical data and behavior of users; use image compression technology WebP and image processing algorithms to reduce the loading time and traffic consumption of large file images.
2. According to claim 1, a method for determining a long image loading method according to a mobile terminal environment is characterized in that: Detecting and analyzing user mobile environment data includes the following steps: S1-1. Use the API provided by the operating system to obtain the device's network connection type; iOS uses the Network framework to obtain the connection type; Android uses ConnectivityManager to obtain the current network connection type; use the Ping test to evaluate network latency and detect response speed; download fixed-size file images and JSON data to measure the download time and calculate the network bandwidth; use the speed test library to obtain network speed data; S1-2. Operate the API provided by the system to obtain the processor information and memory capacity of the device; iOS obtains the number of CPU cores and memory information through sysctlAPI; Android obtains the memory data of the device through ActivityManager; Operate the API of the system to obtain the GPU performance information of the device; iOS obtains the GPU model and memory information through the Metal framework; Android uses the hardware detection API to obtain GPU related information; Obtain the total storage capacity and available storage space of the device by operating the API of the system; Both iOS and Android provide FileSystemAPI to obtain device storage data; S1-3. Get the screen information of the device to adapt the loaded image to the display requirements of the screen; obtain the physical size of the device screen by operating the API provided by the system; iOS obtains the width and height of the screen through UIScreenAPI; Android obtains the screen resolution through DisplayMetrics; calculates the actual resolution of the screen according to the pixel density of the screen; iOS obtains the pixel density of the screen through the scale property of UIScreen; Android obtains the density and resolution of the screen through the DisplayMetrics class; Calculates the actual screen resolution of the device based on the device's screen size and pixel density.
3. According to claim 1, a method for determining a long image loading method according to a mobile terminal environment is characterized in that: The calculation formula of S1 for calculating the image file size and the image size and loading time is as follows: Get the size of the image file in bytes through the image loading library; if the image size is S, convert it using the following formula: File size File size The file loading time is closely related to the file size and network speed; the loading time T is estimated by the following formula: Wherein, S is the file size in bytes; B is the network bandwidth, which is obtained through speed measurement.
4. According to claim 3, a method for determining a long image loading method according to a mobile terminal environment is characterized in that: The comprehensive evaluation formula is as follows: Wherein: α, β, and γ are weight coefficients, which are adjusted according to specific needs; Indicates network loading efficiency; Indicates compression efficiency; the adaptation rate indicates the degree of matching between the resolution and the screen.
5. According to claim 1, a method for determining a long image loading method according to a mobile terminal environment is characterized in that: The S2 monitors the user's network status in real time and defines the network status: High speed means bandwidth > 5Mbps, which is used to load high-resolution images and original images; medium speed means bandwidth 1-5Mbps, which is used to load segmented images and progressive images; low speed means bandwidth < 1Mbps, which is used to load low-resolution images and segmented thumbnails first; The download speed is calculated by regularly requesting a small file of 100KB via HTTP to obtain the actual network bandwidth B and latency L. The calculation formula is as follows:
6. According to claim 1, a method for determining a long image loading method according to a mobile terminal environment is characterized in that: The S2 memory status detection obtains the available memory M of the device available , and total memory M Total , determine whether there is pressure: Use performance monitoring tools to evaluate the current CPU load C load ; If the C load >80%, the device processing capacity is considered to be limited, and the complexity of the loading task is reduced; the screen resolution and physical size are detected, the pixel density DPI is calculated, and the image resolution is determined to be too high; if the image resolution exceeds the screen resolution by 2×, thumbnails are loaded first and compressed.
7. According to claim 1, a method for determining a long image loading method according to a mobile terminal environment is characterized in that: When it is detected that the network speed is slow and the device performance is low and it is judged as a "poor environment", a pop-up window will ask the user whether to select the clarity independently; if the user chooses to select the clarity independently, the system will pause image loading and prepare to display a window asking the user to select the clarity; the window asking the user to select the clarity provides low definition, medium definition and high definition options; if the user does not select any option, the selection will be made based on the system's intelligent judgment.
8. According to claim 1, a method for determining a long image loading method according to a mobile terminal environment is characterized in that: S4 adjusts the compression quality in real time, and dynamically adjusts the WebP compression quality parameter formula according to network bandwidth and device performance as follows: Comparing the loading time of using the WebP and traditional JPEG formats, the compression ratio and the time saved are calculated as follows: Measure the traffic consumption of the WebP and other image formats at the same resolution.