About

Progressive image encoding transmits coarse pixel data first, then refines detail in subsequent passes. A standard (baseline) JPEG renders top-to-bottom line by line. A progressive JPEG delivers 4 - 10 scans of increasing frequency coefficients (DC first, then AC bands). The visual result: a blurry full-frame preview sharpens into the final image. This tool recreates that multi-pass refinement process on any input image using client-side Canvas pixel manipulation. You control the number of passes n, the effect type (JPEG-style blur refinement, PNG-style Adam7 interlacing, or block pixelation), and the output quality q. The tool approximates Gaussian blur via three-pass box blur (a well-known optimization where 3 box passes converge to a Gaussian kernel within 3% error). Note: this produces a visual simulation of the progressive loading aesthetic. It does not re-encode the file as an actual progressive JPEG at the byte level. For actual progressive JPEG encoding, a server-side tool like libjpeg with the -progressive flag is required.

Formulas

The progressive blur effect at pass k out of n total passes uses a blur radius that decreases linearly from maximum to zero:

r_k = r_max × n − kn

Where r_max = max(w, h) ÷ 8 is the maximum blur radius derived from image dimensions w and h.

The three-pass box blur approximation of a Gaussian kernel uses a box width computed as:

b = √12 × σ²p + 1

Where σ is the target standard deviation (blur radius) and p = 3 is the number of box passes. The box width is rounded to the nearest odd integer.

For the pixelation effect, the block size at pass k is:

s_k = max(1, floor(s_max × n − kn))

Where s_max is the initial block size (largest pixelation). At the final pass (k = n), s = 1 and the original image is restored.

For Adam7 interlacing, pixels are filled according to a fixed 8×8 grid pattern across 7 passes. Pass k fills pixels at coordinates (x, y) where x mod dx_k = ox_k and y mod dy_k = oy_k, using the standard Adam7 offset/stride table.

Reference Data

Effect Type	Algorithm	Typical Passes	Visual Character	File Format Origin	Use Case
Progressive JPEG	DCT coefficient layering	4 - 10	Blurry → sharp	JPEG (ITU-T T.81)	Web images, perceived speed
Interlaced PNG	Adam7 (7-pass grid fill)	7	Sparse dots → full grid	PNG (ISO 15948)	Large PNG assets
Interlaced GIF	4-pass row interleave	4	Every 8th row → fill	GIF89a	Legacy web graphics
Pixelation (Mosaic)	Nearest-neighbor downscale	3 - 8	Blocky → crisp	N/A (artistic)	Retro effects, censoring
Box Blur	Separable 1D convolution	3	Uniform softening	N/A (kernel filter)	Blur approximation
Gaussian Blur	2D normal distribution kernel	1	Natural soft focus	N/A (kernel filter)	Depth-of-field, smoothing
Lanczos Resampling	Sinc-windowed interpolation	1	Sharp upscale	N/A (resampling)	High-quality resize
Bilinear Interpolation	Linear weight of 4 neighbors	1	Smooth but soft upscale	N/A (resampling)	Canvas default resize
Nearest Neighbor	Copy closest pixel	1	Pixelated, crisp edges	N/A (resampling)	Pixel art, retro
Progressive WebP	Chunk-based refinement	2 - 4	Block → refined	WebP (Google VP8)	Modern web delivery
FLIF (Free Lossless)	MANIAC entropy + interlace	1 - 4	Responsive truncation	FLIF	Archival, responsive images
AVIF Progressive	AV1 scalable layers	2 - 3	Layer refinement	AVIF (AOM)	Next-gen web images

Frequently Asked Questions

A baseline JPEG stores image data in a single top-to-bottom scan. It renders line by line as it downloads. A progressive JPEG stores multiple scans of increasing DCT coefficient detail - typically 4 to 10 scans. The first scan contains only DC coefficients (average block color), producing a very blurry full-frame preview. Subsequent scans add AC coefficients, refining edges and texture. The total file size is roughly equivalent (sometimes 2 - 5% smaller for images over 10KB), but the perceived loading speed improves because the user sees content immediately.

The Central Limit Theorem states that convolving identical uniform distributions converges toward a normal (Gaussian) distribution. A single box blur is a uniform kernel. Three successive box blur passes produce a piecewise cubic approximation of a Gaussian with less than 3% peak error. This is computationally cheaper: a separable box blur runs in O(n) per pixel regardless of radius (using a sliding accumulator), while a true Gaussian kernel of radius r costs O(r) per pixel per axis.

No. Browser Canvas APIs do not expose JPEG scan ordering controls. The canvas.toBlob('image/jpeg', quality) method produces a baseline JPEG in all current browser implementations. This tool visually simulates the progressive loading aesthetic by applying decreasing blur/pixelation across animated passes. For true progressive JPEG encoding, use server-side tools: jpegtran -progressive, mozjpeg, or ImageMagick with -interlace Plane.

Adam7 uses a fixed 8×8 grid divided into 7 passes. Pass 1 samples every 8th pixel on every 8th row (starting at 0,0), filling 1/64 of pixels. Each subsequent pass fills in more positions with decreasing stride. By pass 7, every remaining odd-row pixel is filled. The pattern ensures spatial distribution: early passes give a coarse overview of the entire image rather than completing one region. The overhead is approximately 5 - 15% larger file size due to reduced compression context.

Canvas operations on images exceeding ~16384×16384 pixels may hit browser memory limits (the max canvas size varies: Chrome allows ~268 megapixels, Safari limits to ~16384px per side). This tool processes pixel data in a Web Worker for images over 1 megapixel to prevent UI thread blocking. If your image exceeds canvas limits, the tool will downscale it to the maximum supported dimension while preserving aspect ratio, and display a notification.

For photographic content, use Progressive Blur - it closely mimics how progressive JPEG scans render in a browser. For pixel art or retro aesthetics, use Pixelation - block sizes decrease geometrically, creating a distinctly digital feel. For technical accuracy mimicking PNG interlacing, use Adam7 Interlace - it produces the characteristic sparse-dot pattern. The number of passes n controls smoothness of the transition: fewer passes (3 - 4) create dramatic jumps between quality levels, while more passes (8 - 12) create subtle, gradual refinement.