Progressive image rendering allows browsers to display partial images while loading. JPEG offers free progressive rendering with minimal decode overhead. AVIF's experimental layered mode provides early previews at ~4% file size but has limited configuration. JPEG XL promises sophisticated progressive rendering but current browser implementations are slow and lack progressive support. WebP renders top-to-bottom in Firefox/Chrome but not Safari. The author proposes AVIF should support a simpler progressive approach: embedding a small, blurred preview at the file start with configurable quality, offering zero decode overhead when the full image loads quickly while providing better user experience on slow connections.
Table of contents
The current state of progressive image rendering in browsersBut do we actually benefit from progressive rendering?What about progressive rendering instead of responsive images?Potential progressive rendering with JPEG XLA better 'progressive' feature for AVIF?2.4K Impressions