Multi-Resolution & Responsive Strategy

Serving full 4K or 1080p uncompressed image sequences to mobile phones causes excessive network bandwidth consumption and memory exhaustion. Conversely, serving 720p images on a 5K display looks blurry.

Scrollsequence solves this with Adaptive Multi-Resolution Loading.

How It Works

When your application initializes a Canvas2d or Canvas3d element with a manifest, the engine calculates the required rendering resolution based on two factors:

1. Current Canvas Element Width (in CSS pixels).
2. Device Pixel Ratio (DPR) (e.g., Retina displays with window.devicePixelRatio = 2 or 3).

Target Width = Math.round(canvasWidth * window.devicePixelRatio)

The engine matches this against the available keys in your manifest’s imageSizes dictionary and automatically selects the closest optimal tier that does not exceed memory constraints.

Recommended Tiers

For standard web projects, we recommend generating two or three resolution tiers:

• 1280 px width: Ideal for mobile phones, tablets, and low-DPR laptops. Lightweight file size ensures instantaneous preloading.
• 1920 px width: Standard full-HD tier, delivering crisp visuals on standard desktop monitors and high-DPR laptops.
• 2560 px width (Optional): Ultra-HD tier for hero animations on wide 4K/5K desktop screens.

Zero-Flicker Preloading

When a user resizes their browser window or changes orientations, the Scrollsequence manager dynamically switches to the new optimal tier without tearing or dropping scroll frames. Frames already loaded in memory remain visible while new resolution frames stream in the background.