A single photograph taken with a smartphone is actually a collection of millions of tiny dots. How are images converted into numbers, and why do they become smaller when saved as JPEG files? In this lesson, you will learn about resolution and color depth as measures of image quality, the two compression methods called lossless and lossy compression, and how to choose between file formats.
Pixels and Resolution
A digital image is represented by arranging tiny dots called pixels in a grid and expressing the color of each pixel as a numerical value. This method is called the raster format (bitmap format). The fineness of an image is indicated by its resolution. It can be expressed by the total number of pixels in the image, such as 1920×1080, or, for printing and similar purposes, by the number of pixels per inch, dpi／ppi. The more pixels there are, the sharper the image, but the amount of data also increases proportionally. There is also a method called the vector format, which represents lines and shapes using coordinates and mathematical formulas instead of collections of dots. Because vector images do not have rough edges or jaggies when enlarged, they are suitable for logos, illustrations, and maps. SVG is a representative vector format. The two formats are used for different purposes: raster formats are good at expressing complex color changes such as those in photographs.
Representing Color — The Three Primary Colors of Light and Color Depth
Display colors are created by combining the intensities of the three primary colors of light, RGB (Red, Green, and Blue). Light becomes brighter as more colors are added, and all three colors at their maximum produce white (additive color mixing). In contrast, printer ink uses the three primary colors of color, CMY (Cyan, Magenta, and Yellow), which become darker as they are combined; this is called subtractive color mixing (in practice, CMYK, which adds black K, is used). The number of bits used to represent the color of one pixel is called color depth. In 24-bit color, 8 bits (256 levels) are assigned to each RGB color, allowing the representation of 256×256×256＝approximately 16.77 million colors, which is called full color. The amount of image data can be calculated as “number of pixels × number of bits per pixel.” For example, a 1920×1080 full-color image contains 1920×1080×24 bits＝approximately 49.8M bits≒approximately 6.2MB (uncompressed).
Two Compression Methods — Lossless and Lossy
Because uncompressed images are huge, they are usually saved in compressed form. Lossless compression reduces the size by using regularities in the data and is a method that can restore the original data completely. A simple example is run-length compression, which replaces a sequence of identical values with “value and count,” such as representing “white white white white white” as “white×5.” Huffman coding, which assigns short codes to data that appears frequently, is also a representative method. Lossy compression greatly reduces the size by discarding information that is difficult for humans to perceive, and the original data cannot be restored completely. The photographic format JPEG achieves a high compression ratio by using the fact that the human eye is more sensitive to changes in brightness than to fine changes in color and by reducing the detail of color information. The effect of compression is expressed by the compression ratio (compressed size ÷ uncompressed size).
Choosing Between File Formats
Let us review the characteristics of representative image formats. JPEG: Lossy. Supports full color and is ideal for photographs. However, degradation accumulates each time the file is saved, and noise (mosquito noise) is likely to appear around the edges of text and illustrations. Transparency is not supported. PNG: Lossless. Supports full color and is ideal for illustrations, diagrams, and screenshots with clear edges. Background transparency is also possible. For photographs, files tend to be larger than JPEG files. GIF: Lossless, but limited to 256 colors. Simple animations (GIF animations) can be created. BMP: Generally uncompressed and huge. In addition, highly efficient formats intended for web use, such as WebP, have also become widespread. The basic rule is “JPEG for photographs, PNG for diagrams, illustrations, and transparency, and GIF (or video) for moving images.”
- Raster format＝a collection of pixels (suitable for photographs). Vector format＝coordinates and mathematical formulas (suitable for logos and illustrations, scales well, SVG).
- RGB＝the three primary colors of light and additive color mixing (screens). CMY(K)＝the three primary colors of color and subtractive color mixing (printing).
- 24-bit color＝8 bits per color×3＝approximately 16.77 million colors. Amount of data＝number of pixels×color depth.
- Lossless compression＝can be restored completely (run-length and Huffman). Lossy compression＝cannot be restored, but provides high compression.
- JPEG＝lossy, suitable for photographs, beware of accumulating degradation. PNG＝lossless, suitable for illustrations and transparency. GIF＝256 colors and animation.
Practice Questions
- Explain the difference between raster and vector formats, and state which one does not have rough edges when enlarged, together with the reason.
- Explain the difference between the three primary colors of light (RGB) and the three primary colors of color (CMY), focusing on how brightness changes when they are mixed.
- Calculate the amount of data in bytes for an uncompressed 800×600-pixel image with 24-bit color.
- Explain the difference between lossless and lossy compression, and state whether a “screenshot of meeting materials” and a “landscape photograph” should each be saved as JPEG or PNG, together with the reasons.
Answers and Explanations
- Answer: A raster format records an image as a collection of pixels (dots), recording the color of each point, while a vector format records lines and shapes using coordinates and mathematical formulas. The vector format is better for enlargement. Because the shape is represented by a formula, it can be recalculated at the enlarged scale and redrawn, so jagged edges (jaggies) caused by stretching pixels do not occur.
Explanation: The key contrast is “recording dots” versus “recording formulas.” Extra credit may be given for including SVG as a representative example and mentioning its uses (logos and maps). - Answer: RGB consists of the three primary colors of light and is the color system for things that emit light, such as displays. The colors become brighter when mixed (overlapped), and the maximum of all three produces white through additive color mixing. CMY consists of the three primary colors of color and is the system for things that reflect light, such as ink. The colors become darker when mixed through subtractive color mixing, and CMYK, which adds black (K), is used in printing.
Explanation: Organize the relationship as “additive＝becomes brighter＝screens” and “subtractive＝becomes darker＝printing.” Remember which of white or black the result approaches. - Answer: 800 × 600 × 24 ＝ 11,520,000 bits. Converting to bytes gives 11,520,000 ÷ 8 ＝ 1,440,000 bytes (approximately 1.44MB).
Explanation: Amount of data＝number of pixels×color depth (bits). Divide by 8 to convert to bytes. It is also acceptable to calculate 800×600×3 by treating 24 bits as 3 bytes. - Answer: Lossless compression is a method that can completely restore the original data after compression, while lossy compression greatly compresses the data by discarding information that is difficult to perceive, but cannot restore it to its original form. A screenshot contains much text and many straight lines, so JPEG (lossy compression) may produce noise around the edges and make the text difficult to read; therefore, lossless PNG is appropriate. A landscape photograph contains complex color changes that JPEG compresses effectively, and slight degradation is less noticeable, so JPEG, which can greatly reduce the size, is appropriate.
Explanation: In addition to defining the compression methods, the key is to explain the choices “text and edges＝PNG, photographs＝JPEG” using reasons such as the likelihood of noise and compression efficiency.