Web Page Image Rendering Prioritization via Compressed Proxy Loading
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing image optimization methods do not adequately consider which areas of a web page are initially viewable, leading to inefficient rendering and longer load times, as they treat all images equally regardless of their visibility status.
Innovation Solution
Prioritize image rendering by providing compressed proxy versions for images likely to be initially visible, deferring the loading of non-visible images until after critical page resources are loaded, and asynchronously loading full-resolution images once the initial proxy images are displayed.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If all images are loaded and rendered at full resolution simultaneously, then image quality is maintained, but page load time and time to interactivity increase significantly
Solution Approach 1:
The patent segments image loading into distinct categories: above-the-fold images are loaded first at full resolution, while below-the-fold images are loaded lazily after initial page rendering. This segmentation allows the system to prioritize image quality for visible areas while reducing overall load time by deferring non-critical image loading.
Solution Approach 2:
The patent implements preliminary action by pre-loading and rendering above-the-fold images at full resolution before the user scrolls or interacts with the page. This ensures that the most visible and critical images are ready immediately, while below-the-fold images are loaded only when needed, thus maintaining quality where it matters most without sacrificing overall load time.
2Loss of time
If compressed proxy versions of images are used for initial rendering, then page load time and time to interactivity are reduced, but image quality deteriorates until full-resolution versions are loaded
Solution Approach 1:
The patent applies local quality by providing different image quality levels to different regions of the page. Above-the-fold images are rendered at full resolution immediately, while below-the-fold images start as compressed placeholders and are upgraded to full resolution only when the user scrolls to view them. This ensures optimal quality is available where it is most needed without unnecessarily degrading quality everywhere.
Solution Approach 2:
The patent implements dynamics by making image quality adaptive and changeable over time. Images transition from compressed placeholder versions to full-resolution versions dynamically as the user scrolls or interacts with the page. This dynamic quality adjustment allows the system to optimize load time initially while providing high quality when the user actually needs to view the images.
3Device complexity
If image optimization does not consider visibility status, then implementation is simpler, but rendering efficiency and user experience deteriorate
Solution Approach 1:
The patent applies partial action by implementing image optimization only for above-the-fold images that are actually visible to users, rather than optimizing all images uniformly. This partial optimization approach maintains relatively simple implementation logic while significantly improving rendering efficiency for the critical visible portion of the page, avoiding the complexity of analyzing and optimizing every single image.
Data Source
AI summary
Viewing of web pages is improved by prioritizing image rendering based on positioning of images within a web page. For example, for images that are likely to be initially viewable upon presentation of the web page (i.e., prior to scrolling), compressed proxy versions are made available so that the images can be transferred and rendered more quickly. These compressed proxy images are later replaced with better quality renderings of the same images. Fetching of images that are not initially visible can be deferred until after other, more important page resources are loaded. Prioritization of page loading in this manner helps to ensure that the page becomes operational earlier, resulting in improved perceived speed and responsiveness, and greater ease of navigation.