Historical Background
YUV and RGB are two color models (or color spaces) used in the image domain, with another color space used for printing called CMYK. Both YUV and RGB are widely used in image and video encoding, but their differences often lead to confusion. What exactly sets them apart?
What is YUV? History and Evolution of YUV Color Space
YUV (also known as YCbCr) originated in the 1930s, initially developed to be compatible with both black-and-white and color television. Black-and-white TVs only had the Y (Luma) channel, which represents brightness. When color TVs were introduced, the YUV format was used to encode the color image. The U and V channels (Chrominance) represent the color components. If the C (Chrominance) signals are discarded, the remaining Y (Luma) signal is essentially the same as the black-and-white signal. This design allowed for compatibility with both black-and-white and color TVs, as well as bandwidth efficiency during signal transmission.
What is RGB? The Foundation of Digital Color Representation
RGB is based on the human eye’s perception of the three primary colors: Red, Green, and Blue. With the development of electronic display technology, RGB became the foundational color model for devices like CRT monitors and LCD screens. RGB is also widely used in computer graphics (like OpenGL), digital cameras, and image processing software (such as Photoshop).
RGB effectively represents the colors captured during imaging. For applications where transparency is needed, the RGBA model is used instead.
Advantages of YUV
Biologists have discovered that 95% of the light-sensitive cells in the human eye are sensitive to brightness (luminance), while only 5% are sensitive to color (chrominance). As a result, the human eye is less sensitive to high-frequency information (hue and saturation) but highly sensitive to low-frequency information (brightness and color transitions). High-frequency information refers to hues and saturation, while low-frequency information includes overall brightness and color shifts.
| source image | y component image | u component image | v component image |
 |
 |
 |
 |
Based on this characteristic, YUV was designed to reduce the chrominance (UV) components in order to efficiently transmit color video signals over limited bandwidth while maintaining relatively clear color images. Over time, several sampling formats have emerged, including YUV 4:4:4, YUV 4:2:2, YUV 4:2:0, and YUV 4:1:1.
Sampling Formats
For an 8-bit pixel depth in YUV, each component is stored in one byte. When the bit depth exceeds 8, more bytes are required (HDR images typically use a bit depth of 10 or more).
-
YUV 4:4:4
In this format, all components (Y, U, V) are sampled for every pixel, maintaining full resolution for all components.
-
YUV 4:2:2
This format maintains full sampling for the Y component but reduces the sampling rate for the U and V components horizontally (by a ratio of 2:1). The vertical sampling rate is not reduced.
-
YUV 4:2:0
In this format, both the horizontal and vertical sampling of the U and V components are reduced by a ratio of 2:1. The most commonly used 4:2:0 format is seen in standards like MPEG-2 and H.264.
 |
 |
The choice of sampling format significantly impacts the size of the data. For example, YUV 4:2:0 reduces the required storage space by half compared to YUV 4:4:4.
| Format | Chroma Resolution | Data Size | Typical Application |
|---|---|---|---|
| YUV 4:4:4 | Full Resolution (1:1:1) | Maximum | Professional video editing, film masters |
| YUV 4:2:2 | Horizontal Half Resolution (2:1:1) | Moderate | Broadcast-quality video, high-quality live streaming |
| YUV 4:2:0 | Horizontal and Vertical Half Resolution | Minimum | Streaming (H.264/H.265), web videos |
For network video, YUV 4:2:0 is preferred as it reduces the video file size, minimizing bandwidth consumption during transmission.
Converting Between YUV and RGB
Given the advantages of YUV and RGB, most image formats for internet transmission use YUV sampling. When image processing is involved, RGB is typically used. The conversion between YUV and RGB is depicted below:
Issues in YUV to RGB Conversion
Most image formats convert between different color spaces using the aforementioned relationships, but sometimes the conversion results in color shifts.
-
Downsampling in YUV:
This usually happens when converting images in formats like PNG or BMP (which use lossless RGB encoding) to lossy formats like JPG, WebP, or AVIF, which use YUV sampling. During the sampling process, downsampling can cause a slight loss of color accuracy, which may result in minor color differences. These differences are typically acceptable, but for those who need higher fidelity, lossless formats like PNG or BMP can be used. -
Color Space Inconsistency:
Different formats may use different color spaces (e.g., AVIF defaults to the BT.2020 wide color gamut, while WebP defaults to sRGB/BT.709, a narrower color gamut). Conversions between these color spaces can lead to color shifts, particularly if ICC color profile information is absent. -
Purple Fringing:
When converting between RGB and YUV, images may need to be aligned to a 2x2 grid. If this alignment is off, issues like purple fringing can occur around edges.
The Colorful World of YUV and RGB
YUV and RGB are two distinct ways of representing color. YUV samples can compress images effectively, making them ideal for network transmission, while RGB excels at accurately representing color variations, especially for image processing algorithms.
Thus, Tom sends a WebP image to John, where the image is first encoded using YUV sampling for efficient network transmission. After the image reaches John, it is automatically decoded into RGB format for display on the screen.
