Digital images consist of a grid of tiny units called pixels, each storing color information as numeric values. Devices interpret these values according to the image's format, converting them into visible light on screens. Understanding how pixels, color depth, and encoding interact is essential for developers working with web graphics, video, and UI design.
Pixel Fundamentals
The pixel is the smallest addressable element in a raster image. It represents a single point in a two‑dimensional coordinate system, identified by an (x, y) pair. Each pixel stores color data, often split into red, green, and blue components, and optionally an alpha value for transparency. Devices read the ordered array of pixel values to reconstruct the visual scene.
Color Depth and Bit Representation
Color depth defines how many bits are allocated to each color component of a pixel. The most common configuration uses 8 bits per channel, giving 256 possible values per component and roughly 16.7 million combined colors. Advanced formats can allocate 10, 12, or even 32 bits per channel, expanding the representable gamut and reducing banding in gradients. Higher color depth increases file size but improves visual fidelity, especially for professional photography and high‑dynamic‑range content.
Image Formats and Containers
Image formats such as JPEG, PNG, AVIF, WebP, and JPEG XL define both the encoding method and the container layout. A container stores the raw pixel data together with metadata like dimensions, color space, and ICC profiles. Many formats begin with a magic number-a short byte sequence that uniquely identifies the format, enabling browsers to select the appropriate decoder. For example, AVIF files start with the string ftypavif, while PNG files begin with ‰PNG.
Alpha Channel and Transparency
The alpha channel adds a fourth component to the typical RGB trio, representing opacity on a scale from 0 (fully transparent) to 255 (fully opaque) in 8‑bit representations. By manipulating the alpha value, graphics can blend images smoothly, create masks, or render complex UI elements without rasterizing background content. Some formats store premultiplied alpha, where color values are already scaled by opacity, simplifying compositing calculations.
Compression Codecs and Bitstreams
Compression is performed by a codec, which transforms raw pixel arrays into compact bitstreams. Intra‑frames (I‑frames) contain full image data, while inter‑frames (P‑ and B‑frames) store only differences relative to preceding frames, drastically reducing size for video. The resulting bitstream is divided into units such as OBUs in AV1 or NAL units in H.264, each carrying a specific type of information for the decoder.
Hardware Rendering and GPU Decoding
Modern GPUs can decode compressed image and video streams directly, offloading work from the CPU and reducing latency. The decoded pixel data is then written to the graphics memory, where the display controller scans out the values to the monitor. When the GPU handles decoding, the pipeline benefits from parallel processing, enabling smooth playback of high‑resolution video and real‑time image effects in web applications.