Web Simulation

  

 

 

 

SVD Image Compressor — Rank-k Approximation

This simulation shows how Singular Value Decomposition (SVD) can compress an image by keeping only the most important components. An image is a matrix A; SVD factors it into A = U Σ VT, where U and V are orthogonal and Σ is diagonal with the singular values (σ1 ≥ σ2 ≥ …).

The formula

A = U Σ VT    and the rank-k approximation    Ak = Σi=1k σi ui viT

Using only the first k singular values and corresponding columns of U and V, we reconstruct an approximation that uses far less storage: original m×n pixels vs. m·k + k + n·k numbers for the compressed form.

Energy map

The singular value decay chart shows that the first few σi carry most of the image "energy." Low k gives a blurry base; increasing k adds detail but increases storage linearly.

Heatmap

With Heatmap on, the reconstructed image is shown in a thermal color scale (black → red → yellow) to highlight where intensity varies—useful for seeing approximation error and residual detail.

A = U Σ VT    →    Ak = Σi=1k σi ui viT
Original (grayscale)
SVD reconstructed (rank-k)
k = 1
Upload an image to start.
Singular value decay (red line = current k)
U (left singular vectors)
Σ (singular values)
VT (right singular vectors)

Usage

  1. Open image: Choose an image file (PNG, JPEG, etc.). It is resized to a maximum of 200×200 pixels so that SVD runs quickly, then converted to grayscale.
  2. k slider: Set how many singular values to keep. Low k = strong compression and a blurrier image; high k = more detail and more storage.
  3. Heatmap view: When checked, the reconstructed image is shown in a thermal scale (black → red → yellow) instead of grayscale.
  4. Singular value chart: Bars show the relative size of each σi. The red vertical line marks the current k (energy cutoff).
  5. Stats: Displays storage as a percentage of the original and rank k of the approximation.

Visualizations

  • Original (grayscale): The input image converted to a single luminance channel.
  • SVD reconstructed: The rank-k approximation Ak drawn as grayscale or heatmap.
  • Singular value decay: Bar chart of σi; the red line indicates how many values are kept.
  • Decomposed matrices (U, Σ, V): Full SVD factors in heatmap form. Dimensions are fixed (U: m×r, Σ: r×r, V: n×r with r = rank). Only the k slider changes which components are used for reconstruction—the decomposition itself does not change.

Controls

  • Open image (file input): Load an image from your computer.
  • k slider: Number of singular values (1 to full rank).
  • Heatmap view: Toggle thermal coloring of the reconstructed image.