From individual pixels to fully decoded images on your screen, raw pixel data gets transformed, compressed, and efficiently delivered. Learn about the techniques and optimizations that shrink image information without any perceivable loss in quality.

MDN Blog is a platform or publication associated with Mozilla Developer Network (MDN), offering articles, updates, and resources for web developers. Readers can find tutorials, documentation, and best practices for web development technologies such as HTML, CSS, JavaScript, and web APIs. With contributions from experts and community members, MDN Blog provides  insights and guidance to help developers build better web experiences.

MDN Blog

Explores how image data transforms from raw pixels to compressed files through encoding and decoding processes. Covers pixel fundamentals, image formats like JPEG, AVIF, and WebP, and compression techniques including chroma subsampling, spatial locality exploitation, prediction modes, DCT transformations, quantization, and entropy coding. Demonstrates practical JavaScript examples for pixel manipulation and explains how modern codecs achieve significant file size reductions while maintaining visual quality through various optimization strategies.

Pixel data from encoders to decoders