Skip to main content

Progressive Loading

ImageSource.Progressive lets you show a blurred low-res thumbnail while the full-resolution image downloads — a pattern used by Medium, Facebook, and many modern apps.

Basic Progressive​

AsyncPic(
    source = ImageSource.Progressive(
        finalUrl = "https://example.com/photo-4k.jpg",
        thumbnailUrl = "https://example.com/photo-thumb.jpg"
    ),
    modifier = Modifier.fillMaxWidth().height(250.dp)
)

The thumbnail renders immediately, the hi-res image loads underneath. When ready, it takes over.

With Blur on Thumbnail​

AsyncPic(
    source = ImageSource.Progressive(
        finalUrl = "https://example.com/photo-4k.jpg",
        thumbnailUrl = "https://example.com/photo-thumb.jpg"
    ),
    modifier = Modifier.fillMaxWidth().height(250.dp),
    blurRadius = 15   // 0–25
)

The thumbnail layer automatically receives the blur transformation. The final image displays crisp.

Parallax + Progressive​

Combine with parallax for a cinematic effect:

AsyncPic(
    source = ImageSource.Progressive(
        finalUrl = "https://example.com/hero.jpg",
        thumbnailUrl = "https://example.com/hero-thumb.jpg"
    ),
    modifier = Modifier.fillMaxWidth().height(300.dp),
    parallaxIntensity = 0.05f
)

ImageSource.Progressive Fields​

FieldTypeDescription
finalUrlStringFull-resolution image URL
thumbnailUrlString?Low-res preview URL (shown immediately)
blurHashString?Reserved for future BlurHash support

Tip: Generate Thumbnails​

For best results, serve thumbnails at ~20–40px width. Most CDNs (Cloudinary, Imgix, Supabase Storage) support on-the-fly resize via URL params:

# Cloudinary example
https://res.cloudinary.com/demo/image/upload/w_40/sample.jpg