Images as Shaders

Each picture below is one WGSL fragment shader. The shader holds an ordered list of 1,024 soft, rotated ellipses packed into an integer array; its minified source is about 11 KB gzipped. The page draws each ellipse as its own small quad and lets the GPU blend them in order, so a frame costs about as much as the ink on screen. The list was trained so that its first 16, 32, 64 and so on ellipses already make a coarser picture. Press "Paint it in" to watch the shader add them, or drag the splats slider to stop at a power of two. As compression it loses: on these six Kodak test photos, AVIF at the same size scores 3.9 to 6.8 dB higher in PSNR. The buttons under the picture show the original and the AVIF and WebP files of the same size.

shader

Bytes are the gzip size of the minified shader, measured at each power-of-two prefix; PSNR is against the Kodak original at 768×512, or against your image at the size it was fitted. The AVIF, WebP and JPEG comparisons are the best encodes at or under the full shader's size, allowing downscaling before encoding. Method and numbers: image-to-wgsl.