HDR and Wide-Gamut Images on the Web Without Banding

For most of the web's life, an image meant sRGB, eight bits per channel, and a brightness range that topped out at "white." That was a safe assumption because it matched what screens could show. It is no longer true. The phone in your pocket and the laptop on your desk can now display more colors and far more brightness than sRGB was ever meant to carry.

That upgrade is real, and it introduces failure modes that flat sRGB images never had. The most common one is banding: the smooth sky or gradient that suddenly shows visible steps, like a topographic map, instead of a continuous transition.

Banding is not random bad luck. It is a predictable result of too few bits spread across too wide a range, and once you understand where it comes from, you can prevent it. This is a primer on bit depth, color spaces, and gain maps, and on why moving to HDR changes the quality decision itself.

Key Takeaways

• Banding comes from quantization: too few distinct color values to represent a smooth gradient, made worse by wide color gamuts and HDR that stretch those values across a bigger range.
• Bit depth is the main defense. Eight bits per channel gives 256 steps; ten bits gives 1,024, which is why HDR formats specify at least ten bits (ITU-R BT.2100).
• Color spaces widened from sRGB to Display P3 and Rec. 2020, and modern browsers can now display wide-gamut images correctly (MDN, wide gamut color).
• Gain maps let one image render well on both standard and HDR displays by carrying a secondary map that reconstructs the bright range, standardized as ISO 21496-1.
• The practical shift: with HDR, "good enough compression" for sRGB can produce visible banding, so the quality decision has to account for bit depth and dynamic range, not just file size.

What causes banding in web images?

Banding is caused by quantization: when a smooth gradient has more tonal steps than the format can store, adjacent values get rounded to the same number, and the eye sees the boundary as a hard edge. It shows up most in skies, shadows, and soft backgrounds, exactly the regions where color changes slowly and small steps become visible.

The math is simple. An eight-bit channel holds 256 possible values. Spread those 256 steps across a gentle gradient wide enough, and each step covers a range the eye can resolve, so you see the staircase. Compression makes it worse, because lossy codecs discard the subtle high-frequency detail that would otherwise dither the boundary and hide the step.

This is a case where the number that usually reports success, file size, tells you nothing about the failure you can see. A smaller file with visible banding is not a win, which is the whole argument in why file size is the wrong metric. Banding is a perceptual defect, and only a perceptual check catches it.

How does bit depth fix it?

More bit depth means more distinct values to represent the gradient, so the steps shrink below what the eye can resolve. Going from eight bits to ten bits per channel raises the count from 256 to 1,024 steps, which is why every serious HDR standard specifies at least ten bits (ITU-R BT.2100).

The reason HDR needs the extra bits is not decoration; it is necessity. HDR stretches the tonal range far beyond standard dynamic range, so if you kept only eight bits and spread them across that larger range, each step would be even coarser and banding would get worse, not better. Ten and twelve bit depth exist to keep the steps invisible across the expanded brightness scale.

There is a second, cheaper defense: dithering. Adding a tiny, controlled amount of noise at the boundary breaks the hard edge into a random pattern the eye blends into a smooth transition. It is why a well-dithered eight-bit image can look cleaner than a naive one. Formats that support ten-bit color, like AVIF, remove the need for that trick in the first place (web.dev, AVIF).

What are Display P3 and Rec. 2020?

They are wider color spaces, meaning they can represent more saturated colors than sRGB can. Display P3 is the wide gamut Apple and many modern screens use; it covers noticeably more of the visible color range than sRGB. Rec. 2020 is wider still, the target gamut for HDR and ultra-high-definition video, and current displays only partly cover it (MDN, wide gamut color).

The important consequence for banding is that a wider gamut spreads the same number of bits across more color territory. If you widen the gamut without adding bit depth, you make each step bigger and invite banding, which is another reason wide-gamut and HDR pipelines go hand in hand with ten-bit color. Width and depth have to move together.

Browser support has caught up enough to rely on. Modern browsers can display wide-gamut images and honor color profiles, and CSS now has explicit wide-gamut color syntax (MDN, wide gamut color). The practical rule is to tag images with the correct color profile so the browser can map them properly, rather than letting a P3 image be interpreted as sRGB, which shifts every color.

What are gain maps, and why do they matter?

A gain map is a secondary map stored alongside a normal image that tells an HDR display how to brighten specific regions, so one file looks correct on both standard and HDR screens. The base image renders normally on an ordinary display; on an HDR display, the gain map reconstructs the extra brightness. The approach has been standardized as ISO 21496-1, and Google ships a version called Ultra HDR on Android (Android developers, Ultra HDR).

Gain maps solve a real distribution problem. Before them, you either shipped an SDR image, throwing away HDR entirely, or an HDR image that could look wrong or washed out on standard screens. A gain map lets a single asset serve both, degrading gracefully instead of forcing a choice, which is exactly the kind of adaptive behavior good delivery should have.

They are not free of caveats. Gain maps add data, support varies across browsers and viewers, and a poorly authored map can look worse than a clean SDR image. The point is that HDR on the web is no longer a single format decision; it is a set of decisions about depth, gamut, and how the asset adapts to the screen. That per-asset thinking is the theme of why blanket compression hurts your CMS.

How does HDR change the quality decision?

It raises the stakes of getting compression right, because the same aggressive settings that are safe for a flat sRGB photo can produce visible banding in a ten-bit HDR gradient. A quality decision that only watches file size will ship that banded result and call it a saving, because the metric it trusts never looked at the tonal steps.

This is where the older signal metrics quietly let you down. PSNR and SSIM were not built to flag banding reliably, and even VMAF, a strong video metric, has known trouble with it, which we note in VMAF explained. Banding is a perceptual artifact, so catching it needs a perceptual check that compares the output against the source the way a person would, not a byte count.

That is the core of Inverity's approach and why it extends naturally to HDR and wide gamut. Our Neural Media Orchestrator evaluates each asset, routes it to the path that fits its content, and verifies the result against a structural similarity floor of at least 0.975 before delivery, falling back rather than shipping a degraded image. When an asset carries HDR and ten-bit gradients, that verification is the difference between a clean sky and a banded one. The full framework is in the complete guide to perceptual media optimization, and how we test it is in how we benchmark.

Frequently Asked Questions

What causes banding in images?

Banding is caused by quantization: a smooth gradient has more tonal steps than the format can store, so nearby values round to the same number and the eye sees hard edges. Too few bits, a wide color range, and aggressive compression all make it more likely.

How many bits do I need to avoid banding?

Eight bits per channel gives 256 steps and can band on wide gradients, especially in HDR. Ten bits gives 1,024 steps and is the minimum for HDR standards like ITU-R BT.2100. Dithering can also hide banding in eight-bit images by adding controlled noise.

What is the difference between Display P3 and sRGB?

Display P3 is a wider color space that represents more saturated colors than sRGB, and it is common on modern Apple and high-end displays. Images must be tagged with the correct color profile, or a browser may interpret a P3 image as sRGB and shift every color.

What is a gain map?

A gain map is a secondary map stored with an image that tells an HDR display how to brighten specific regions. The base image renders normally on standard screens, while HDR screens use the map to reconstruct extra brightness. It is standardized as ISO 21496-1.

Does AVIF support HDR and wide gamut?

Yes. AVIF supports ten-bit and twelve-bit color depth, wide color gamuts, and HDR, which is why it is well suited to gradient-heavy and HDR content. The higher bit depth is exactly what keeps smooth transitions from banding across an expanded tonal range.

The point

HDR and wide gamut are a genuine upgrade to what the web can show, and like every upgrade they move the failure surface. The old assumption, sRGB and eight bits, hid banding by keeping the range small. Widen the color, stretch the brightness, and the steps become visible unless you add the bit depth, the color management, and sometimes the gain map to match.

None of that shows up in a file-size number. Banding is something you see, so preventing it means measuring what a person would see and verifying against the source before delivery. As more of the web goes HDR, that perceptual discipline stops being optional. It becomes the only reliable way to ship smaller without shipping worse, which is the case we make throughout the complete guide to perceptual media optimization.