Master Image Optimization for Touch Pages: Reduce Size, Merge Requests, and Smart Loading

General Image Optimization Techniques

Before implementing any loading strategy, reduce the amount of data transferred and the number of HTTP requests.

Reduce file size : compress or optimize the image and select an appropriate format (e.g., WebP, AVIF, JPEG‑2000). The article references a guide “Web Performance Optimization: Image Optimization” for tools and format selection.

Reduce request count : combine multiple images into a CSS sprite or embed images as Base64 data: URLs.

Reducing Image Requests

CSS sprites merge several icons into a single image file and display portions via background-position, cutting the number of HTTP requests. Data URLs convert an image to a Base64 string; when placed in CSS or JavaScript the string benefits from the caching of those files, whereas embedding directly in HTML does not cache the image.

Image Loading Strategies for Touch Pages

Touch‑oriented pages typically use one of three loading approaches: normal loading, preloading, or lazy loading.

Normal Loading

The browser loads images automatically without developer intervention. This is only viable when the page contains few, small images, because large or numerous assets increase load time and bandwidth consumption.

Preloading

Resources are fetched ahead of time so the page can be displayed only after critical assets are ready. Preloading can be classified by whether the user sees a progress indicator.

Explicit (visible) preloading : a progress bar, spinner, or other UI element informs the user of loading status.

Implicit (background) preloading : assets are loaded in the background with no visual feedback.

Example: the JD touch page “Ignite the Beast in Your Heart” uses explicit preloading with a progress bar to set user expectations.

Lazy Loading

Images are deferred until they are about to enter the viewport, reducing initial page weight and improving perceived performance. The article mentions lazy loading as a third category but does not provide implementation details.