sxsphinxstack

Skills / Working / Implement progressive image loading

Working Web skill

Implement progressive image loading

Implement progressive image loading with responsive sources, reserved layout, meaningful placeholders, priority, lazy loading, accessibility, and failure handling.

Load the right image at the right priority without hiding essential content.

When to use

  • Use for editorial, product, gallery, dashboard, and user-generated images.
  • Do not lazy-load the primary above-the-fold image or replace meaningful alternative text with file names.

Procedure

  1. Inventory image roles, intrinsic dimensions, display sizes, formats, crop rules, density, themes, and content priority.
  2. Generate responsive variants with explicit width and height, controlled quality, supported modern formats, and a reliable fallback.
  3. Configure srcset and sizes from actual layout breakpoints and verify browser selection.
  4. Reserve aspect-ratio space to prevent layout shift and use a neutral, nonmisleading placeholder.
  5. Prioritize the likely largest-content image; lazy-load only below-the-fold images with appropriate distance.
  6. Preserve useful alternative text, captions, links, zoom behavior, and high-contrast or reduced-data needs.
  7. Handle decode, network, missing asset, and unsupported format failure without infinite retry.
  8. Measure transferred bytes, selection, loading, layout shift, and visual quality across devices and networks.

Related skills

  • Implement offline first ui — Implement an offline-first interface with explicit freshness, queued writes, conflict handling, and recovery.
  • Implement responsive images — Implement responsive images with accurate intrinsic size, source selection, art direction, formats, and accessibility.
  • Implement http security headers — Implement HTTP security headers from an application threat model, route inventory, browser behavior, and staged enforcement evidence.