Edge Server Image Delivery via Interlaced Segmentation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web browsers face long startup wait times when loading webpages with many images, especially on higher-latency networks like 3G cellular networks, due to the need to completely download each image before rendering can proceed, leading to inefficient resource utilization and user experience issues.
Innovation Solution
Implementing a DOM virtualization engine that optimizes image delivery by converting non-interlaced images into interlaced formats and segmenting them for prioritized download, allowing partial rendering and bandwidth allocation to other webpage components, thereby reducing latency and improving user experience.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If the web browser completely downloads an entire image before rendering, then the image rendering quality is ensured, but the startup wait time becomes unacceptably long on higher-latency networks
Solution Approach 1:
The patent segments images into multiple progressive resolution versions (e.g., low-res, medium-res, high-res) and downloads them in sequence. The browser first downloads a low-resolution version for immediate rendering, then progressively downloads higher-resolution versions to replace or enhance the initial rendering, thereby reducing startup wait time while maintaining final image quality.
Solution Approach 2:
The patent performs preliminary action by downloading and rendering a low-resolution placeholder image before the complete high-resolution image is available. This preliminary rendering provides immediate visual feedback to users, and the image is subsequently replaced or enhanced as higher-resolution versions are downloaded, thus reducing perceived startup wait time.
2Productivity
If the web browser downloads multiple images concurrently, then the total loading time is reduced, but the network resources become insufficient on higher-latency networks
Solution Approach 1:
The patent segments the image loading process into multiple priority levels and phases. Critical above-fold images are downloaded first with high priority, while below-fold images are downloaded with lower priority or deferred. This segmentation allows efficient resource utilization on high-latency networks by ensuring important content loads first without overwhelming network resources.
Solution Approach 2:
The patent applies different quality levels and download priorities to different regions of the webpage. Above-fold content receives high-priority, high-quality downloads, while below-fold content receives lower-priority, lower-quality downloads initially. This local quality differentiation optimizes network resource usage by allocating bandwidth based on user visibility and importance.
3Speed
If the web browser prioritizes downloading critical webpage components, then the perceived loading speed is improved, but the complete page rendering time may increase
Solution Approach 1:
The patent performs preliminary action by downloading and rendering critical above-fold content first, providing immediate visual feedback to users. Non-critical below-fold content is downloaded and rendered in the background after the initial page load, thereby improving perceived loading speed without significantly impacting the overall completeness of page rendering.
Solution Approach 2:
The patent implements dynamic resource allocation where download priorities and quality levels are adjusted based on user behavior and network conditions. If users scroll to reveal below-fold content, the system dynamically prioritizes downloading those newly visible elements, balancing perceived loading speed with complete page rendering based on actual user needs.
Data Source
AI summary
A method of delivering images by an edge server to a web browser is disclosed. It includes receiving through an interface a request for an image file. It includes detecting by a processor the image file as a non-interlaced image file. It includes converting by the processor the detected non-interlaced image file to a corresponding interlaced image file. It includes sending a first segment of the corresponding interlaced image file in response to the request for the image file and delaying delivery of a second segment of the corresponding interlaced image file until a subsequent request for the second segment of the corresponding interlaced image file is received.