Image Format in Computer

1 Basic concepts

1.1 Color depth

Color depth, also known as bit depth, is a unit used to represent the number of colors in a digital image using bits. The unit of color depth is bits. Color depth is represented using exponential powers of 2. As the number of bits increases, the color depth value increases, allowing the image to display a greater range of colors.

For example, an image with 1 bit color depth represents 2^1 (= 2) colors, which can only be black and white. An image with 2 bits color depth represents 2^2 (= 4) colors, which can include black, white, and two shades of gray. Similarly, an image with 3 bits color depth represents 2^3 colors, which includes 8 colors in a grayscale image.

Using the same calculation method, a 24-bit image can display 16,777,216 colors, which is very close to the range of colors distinguishable by the human eye. This is why it is referred to as “true color”. Nowadays, 24-bit color depth is considered the basic requirement for color scanners, and higher color depths such as 36-bit or 48-bit are also available.

RGB and RGBA are common color representation formats in image processing and computer graphics.

• 24-bit color depth with three channels: RGB

  RGB stands for Red, Green, and Blue. It’s an additive color mixing model used to represent colors by adjusting the intensity of these three primary colors. Each color channel typically ranges from 0 to 255, where 0 represents the absence of that color and 255 represents maximum intensity.

• 32-bit color depth with four channels: RGBA

  RGBA is an extension of RGB, where A stands for Alpha, representing opacity or transparency. In addition to the red, green, and blue channels, an alpha channel is added in RGBA. The alpha channel controls the transparency of a pixel, typically ranging from 0 (completely transparent) to 255 (completely opaque).

  RGBA is commonly used in scenarios where transparency effects are needed, such as layer compositing, semi-transparent objects, or image overlays. By controlling the alpha channel, a smooth transition between the image and the background can be achieved, creating richer visual effects.

  For example, consider a pixel with an RGB value of (255, 0, 0), representing red. In RGBA, if it’s represented as (255, 0, 0, 255), it means the pixel is fully opaque red. If represented as (255, 0, 0, 128), it means the pixel is semi-transparent red with 50% opacity.

1.2 Pixel

A pixel is the smallest unit of an image, used to represent discrete elements of the image. It is short for “picture element.” Each pixel can be thought of as a tiny colored square containing color information and potentially other attributes, such as transparency.

In digital images, an image is divided into individual pixels, each with its position in the image’s coordinate system, usually denoted by its horizontal and vertical coordinates. The dense arrangement of pixels forms the entire image.

Each pixel can be represented according to the color model of the image. In the most common color models, such as the RGB (red-green-blue) model, a pixel can be represented by the intensities of three components: red, green, and blue. The combination of these components determines the final color of the pixel. For example, (255, 0, 0) represents red, and (0, 255, 0) represents green.

The size and density of pixels can also impact the quality of an image. Smaller pixels can make an image appear more detailed but may also require more storage space. Image resolution is a measure of the number of pixels in an image and is typically expressed in the “width × height” format, such as 1920x1080, where 1920 pixels represent the width and 1080 pixels represent the height.

1.3 Resolution

Resolution refers to the level of detail that an image, display, or output device can represent or produce. It is a fundamental concept in both digital imaging and display technology. Resolution is often quantified as the number of pixels in an image or the density of pixels in a given area, such as a screen or print.

Dots Per Inch (DPI) or Pixels Per Inch (PPI) is used to determine the density of pixels in a printed image or displayed image on a screen. DPI is more commonly used in printing, while PPI is used for digital displays. For example, a display with a resolution of 300 PPI means there are 300 pixels in each inch of the screen. Higher DPI/PPI values generally result in sharper and more detailed images.

1.4 Primary colors

• Primary Colors of Light (Additive Primary Colors): Red🟥 Green🟩 Blue🟦

  Principle of Color Display: The light generated by a light source enters the human eye directly, and after the retina receives the light signals, they are formed into an image.

• Primary Colors of Pigment: Red🟥 Yellow🟨 Blue🟦

  Principle of Color Display: Different materials have different properties, and when white light is directed towards pigments, certain wavelength ranges are absorbed by the pigments. The reflected light only covers specific visible light wavelengths, leading to color perception in the human eye.

• CMYK Colors (for printing): Cyan Magenta Yellow Key/Black

  The four-color printing mode used in color printing is a color separation mode that employs the principle of mixing the three primary colors of pigments, along with black ink, for a total of four colors mixed and overlaid, resulting in what is known as “full-color printing.”

1.5 HDR, SDR and XDR

• High Dynamic Range (HDR) is a technique used to enhance the highest brightness levels within an image. Compared to regular images stored through RGB channels, HDR introduces an additional HDR channel, which represents HDR values using floating-point numbers.
• SDR, also known as Standard Dynamic Range, has a smaller information range compared to HDR. XDR is Apple’s display technology, described as having exceptional “Extreme Dynamic Range.”

2 Image format categories

2.1 Bitmap

File extensions: .bmp

A native image format utilized by Microsoft Paint program, storing graphics as a grid of individual pixels. This format does not support compression, resulting in larger file sizes.

2.2 JPEG (Joint Photographic Experts Group)

File extensions: .jpg, .jpeg

JPEG employs lossy compression based on Discrete Cosine Transform (DCT), selectively discarding image data to reduce file size. This compression process can lead to visible image artifacts and distortion, especially at high compression ratios.

JPEG does not support transparency inherently, and any transparency effects are achieved through workarounds like matting or separate alpha channels.

2.3 EXIF (Exchangeable Image File Format)

Images in this format can store metadata such as camera settings, date, and GPS information. This is particularly useful for photographers and image archiving.

2.4 PNG (Portable Network Graphics)

File extensions: .png

PNG uses lossless compression based on DEFLATE algorithm, preserving image quality without introducing compression artifacts. This format is suitable for images with sharp edges and text.

PNG supports variable levels of transparency, allowing for smooth blending of images over various backgrounds.

2.5 GIF (Graphics Interchange Format)

File extensions: .gif

GIF uses LZW compression, a form of lossless data compression. This format is best suited for simple graphics, line art, and images with large areas of uniform color.

GIF supports animation through multiple frames within a single file, making it a popular choice for simple web animations. It’s worth noting that GIF has a lower color depth, so the meme images we often see online tend to have more “monotone” colors.

2.6 WebP

File extensions: .webp

Developed by Google, WebP combines lossy and lossless compression methods. Lossy WebP uses techniques similar to VP8 video compression to achieve smaller file sizes. Lossless WebP is akin to PNG compression but usually achieves smaller sizes.

WebP also supports lossless + alpha, allowing images with both transparency and lossless compression.

2.7 Thumbnail

File extension: .db

A database file format used to store thumbnail images and other metadata for quick retrieval.

2.8 AVIF and HEIF (High-Efficiency Image Format)

File extensions: .avif .heic .heif

AVIF and HEIF are modern image formats that utilize advanced compression algorithms like AV1 for encoding, resulting in high compression efficiency without significant loss of quality.

These formats support various features like wide color gamut, HDR, and transparency. HEIF is more broadly supported, including Apple’s implementation, while AVIF is gaining popularity due to its open nature.

2.9 JXL (JPEG XL)

File extension: .jxl

JXL is a new image format designed to offer the best of existing formats. It combines the features of JPEG, PNG, GIF, and WebP, offering support for high color depths, lossless and lossy compression, animation, HDR, and partial transparency. The format aims to provide excellent image quality while keeping file sizes manageable.