Pictures are used frequently in project development, but most of them are used as ordinary display or occasionally need to be cropped, and do not need to do any special processing of pictures. Recently, a project has more requirements for pictures. While stepping on a lot of pitfalls, I also have a deeper understanding of the use of pictures, and sort them out for future review.
RGB channel and color depth of a picture
We all know that a picture is composed of points, and a point is called a bitmap (bitmap raster image). Taking the RGB color space as an example, a bitmap may consist of a single channel, three (Red Green Blue) or four channels (Red Green Blue plus an Alpha channel), a channel may have 8bit or 16bit, if a Red channel has 8Bit, then the value range is 0-255, and there can be 256 values in total.
Taking our most common 32-bit RGBA picture, each point (bitmap) contains four channels: Red channel, Green channel, Blue channel and Alpha channel, each channel is composed of 8bit, and the value range is 0-255, There are 256 values in total, so 256 256 256 colors can be displayed, which is up to 16.77 million colors, which is enough to meet most of our application scenarios. Its built-in alpha channel will be multiplied by the value of each RGB channel during use, as the final displayed value, making the use of RGBA images more flexible.
The other two commonly used terms, bpp, bpc:
bpp : (bits-per-pixel) generally refers to pixel depth. Pixel depth refers to the number of bits used to store each pixel. Pixel depth determines the number of colors that each pixel of a color image may have, or determines the number of gray levels that each pixel of a grayscale image may have.
bpc : (bits-per-channel) bit depth, which refers to how many bits each channel occupies, such as 8bpc, which means that a channel may have 8 bits, then the value range is 0-255, and there can be 256 values in total. 16bpc means that each channel has 16 bits.
Each pixel of a 32-bit RGBA format picture has 4 channels, and each channel has 8 bits, so it is 4*8=32bpp, 8bpc
Similarly, there are other formats: (This screenshot is a screenshot of the official document of the Quzrtz 2D engine integrated on the IOS side. Quzrtz 2D is a local rendering engine that supports customized 2D vector and image rendering, and aims to illustrate the use of bpp and bpc )
Two color spaces and image formats
Common color spaces include RGB\CMY\HSV\HSL\Lab\YUV and other color spaces. Most of the RGB color spaces are used in IOS development. If there is a need to do special processing on the picture, such as adjusting the hue of the picture or Brightness, etc., will use HSL and other spaces, and most of the other scenes we are dealing with RGB space,
Let me talk about the basic knowledge of pictures first. Most of the picture formats are png, jpeg, bmp, tiff, etc. We use jpeg and png a lot. Let’s briefly record the processing of jpeg and png.
Jpeg/jpg uses our so-called lossy compression format. Simply put, the image is converted from the RGB color space to the YUV color space through formula calculation, and then the YUV components are sampled separately, because the human eye is more sensitive to brightness transformation than color transformation The sensitivity is high, so the sampling weight is more inclined to the Y component, the Y component is sampled 4 times, and the U and V components are sampled once each. At this time, precision loss has begun to occur, and then through the process of block, cosine transform, quantization, etc., the final encoding For pictures, the process of cosine transformation and quantization is the source of loss of precision. Simply put, it is similar to sound filtering to remove ultrasonic and infrasonic waves that cannot be heard by human ears. Subtle color changes are used to reduce the size of the image, but the human eye cannot see the difference, so it is called lossy compression. The advantage is that the image size is greatly reduced, so it is often used on the web to improve web page loading speed and response There is no loss in picture quality. But also because jpeg is compressible, jpeg is not suitable as a carrier for displaying high-definition pictures.
The compression principle of Png format is based on predictive coding and differential coding, so it will not lose picture quality and precision, so it is often used in fields that require picture precision and quality. More importantly, Png provides 256 transparency levels to eliminate aliasing, and provides an alpha channel to support the transparency of the image. If there is a blank area in the source file, the corresponding position of the exported image will be blank, and there is nothing, while jpeg's Transparent areas are automatically converted to white for export.