The Mason's Pointing Trowel: On the Solid Fill of a Progressive JPEG

There is a quiet moment in the restoration of an old brick wall, after the major stones are set but before the job is truly done, where the mason takes up a smaller, finer tool: the pointing trowel. With it, they press mortar into the gaps between the bricks, a patient, iterative process that transforms a structurally sound but rough assembly into a finished, coherent whole. This act of gradual filling, of revealing detail through successive layers, is a perfect analogue for one of the web’s more elegant, and often overlooked, image formats: the progressive JPEG.

In our rush to mollify the metrics of Core Web Vitals, we often pit two philosophies against each other: the all-at-once delivery of a baseline JPEG versus the layered reveal of a progressive one. The baseline image is a straightforward affair. It paints itself from top to bottom, a slow-rolling curtain of pixels. It’s predictable. You see what you get, as you get it. The progressive JPEG, by contrast, is a series of impressions. The entire image area appears almost instantly as a blurred, low-fidelity placeholder, a ghost of the final picture. Then, over successive passes, the details sharpen, the edges crisp, the image resolves into its full clarity. It’s not delivered in spatial chunks, but in layers of quality.

The choice between them feels like a choice between patience and urgency. The baseline scan offers a kind of linear patience; you wait for the content to arrive in orderly rows. The progressive scan offers a different kind—the patience of refinement. It gives the viewer the entire composition immediately, however rough, allowing them to understand the whole before the particulars are fully defined. For a user on a faltering connection, this can be the difference between staring at a blank white space for seconds and engaging with a recognizable, if pixelated, image in a fraction of that time.

Yet, the critique of the progressive path is the potential for a phenomenon often called “reflow.” If the initial low-quality pass is sized incorrectly, the subsequent sharpening can cause a jarring shift in the layout, pushing other elements down the page as the image settles into its final dimensions. This is where the mason’s care is paramount. Just as they must ensure their mortar mix is right to avoid shrinkage and cracking, we must ensure our images are properly sized with explicit dimensions in our HTML. With that simple constraint in place, the progressive JPEG doesn’t reflow; it simply clarifies. The layout is stable from the first blurred impression to the final sharp detail.

In the end, the decision isn’t about declaring one format universally superior. It’s about intent. The baseline JPEG is a careful, literal transcript. The progressive JPEG is an artistic proof, moving from gesture to finished work. It understands that perception is not merely about the final pixel, but about the journey of understanding. It uses the initial, quick-drying mortar of a low-resolution pass to hold the visual structure in place, then meticulously points the joints with data until the wall—the image—stands complete, solid, and intelligible from the very first moment.

Notes & further reading

A few pages I came back to while writing this: