Blek NgossangaSoftware Engineering · AI Vision · Research

FR, Lire cette page en français

English interface, partly translated: navigation, lab, projects, series, about and contact are; the home page sections, the site search and the content itself (articles, tutorials, research) are still in French.

Interactive lab

Haar wavelets (DWT)

Decompose an image into LL, HL, LH and HH sub-bands over several levels, drop the small coefficients and measure what the reconstruction loses.

Level
Intermediate
Topics
DWT · Multirésolution · PSNR
Figure 1 — Original image (synthetic, 128 × 128).
Figure 2 — Coefficients: LL approximation top left, details HL, LH and HH (mid grey = zero).
Figure 3 — Reconstruction from the kept coefficients only.
Image
Decomposition
2
× 4
Compression
10 %

Measurements

non-zero coefficients
2560 / 16384
compression ratio
6.4 : 1
PSNR
38.5 dB
energy in LL
98.51 %

Seeing an image at several scales

The discrete wavelet transform (DWT) rewrites an image as a reduced version plus the details needed to recover it. With the Haar wavelet, the simplest one, each pair of neighbouring pixels (a,b)(a, b) becomes:

average=a+b2detail=a−b2\text{average} = \frac{a + b}{\sqrt 2} \qquad \text{detail} = \frac{a - b}{\sqrt 2}

Applied to rows then columns, the operation splits the image into four sub-bands:

Sub-band Rows Columns Content
LL average average approximation: the image, half the size
HL detail average horizontal variations: vertical edges
LH average detail vertical variations: horizontal edges
HH detail detail diagonal variations

Repeating on LL gives the next level: this is multiresolution analysis. The 2\sqrt 2 factor makes the transform orthonormal: energy (sum of squares) is preserved, and the inverse transform reconstructs the image exactly.

Why it compresses

In an image, flat areas dominate: almost all detail coefficients are close to zero, and most of the energy concentrates in LL. Small details can therefore be set to zero without visibly changing the image. Lower the kept-coefficients slider and follow the PSNR:

PSNR=10log⁡101MSE\mathrm{PSNR} = 10 \log_{10} \frac{1}{\mathrm{MSE}}

Above 40 dB, the difference is invisible; around 30 dB, blocks appear along edges — the signature of the Haar wavelet, which smoother wavelets (Daubechies, the CDF 9/7 of JPEG 2000) attenuate.

Beyond compression

The same decomposition is used to denoise (noise spreads over small detail coefficients, which thresholding removes), to detect contours at several scales and to build texture descriptors. In computer vision, the LL/LH/HL/HH sub-bands also serve as inputs or lossless downsampling layers in some neural networks.

Other demos

  • Pathfinding: BFS, DFS, Dijkstra, A*

    Algorithms, Beginner

    Four algorithms explore the same grid. Draw walls, add costly terrain and compare the visited cells and the cost of the path.

  • Gradient descent

    Artificial intelligence, Beginner

    Pick a function, a starting point and a learning rate, then watch the point walk downhill: convergence, oscillations, divergence, local minima.

  • Optimizers: gradient, momentum, Adam

    Artificial intelligence, Intermediate

    Three optimizers start from the same point on a two-variable surface. Compare their trajectories over the level curves: zigzag, momentum, adaptive step.