[Analysis of image resolution] Understanding of image size, resolution, pixel density, and format

Pixel

An image is composed of countless pixels, and its unit is px . The size of a single pixel is not fixed, it depends on the process difference. Therefore, we can see that 1px cannot represent the actual physical size, it is only an abstract description of the information size of the image.Obviously, for an image, the more pixels it contains, the greater the amount of information, and the higher the quality (definition) of the picture.

resolution

The meaning of this word is relatively vague , which leads to mixed usage in various fields . The standard interpretation should be: the number of pixels contained in the long side and wide side of the image . For example:

• Common display resolution 1920px $\times$ 1080px。
• When we view the picture information , the corresponding resolution will also be displayed.
• The resolution of the camera can reach tens of millions of pixels , which refers to the number of pixels.

However, in some websites, software or books, resolution is regarded as the number of pixels per inch (that is, the pixel density we will talk about next) , which is strictly speaking inaccurate , but this inconsistency The mixed use of is very common, and most of the time you need to judge by yourself. You can judge by the resolution unit and numerical value.

pixel density

When it comes to pixel density, there are actually two concepts, one is image pixel density (Pixel per inch, Ppi) , and the other is printing pixel density (Dots per inch, Dpi) .

Image pixel density (Pixel per inch, Ppi)

Defined as the number of pixels per inch . sometimes colloquially calledImage Resolution, but actually, it refers to the density category. At a resolution of 1920px $\times$ 1080px,4.5-inchscreen (generally the diagonal length) as an example, the calculation formula is:
$$Ppi=\frac{\sqrt{1920^2+1080^2}}{4.5}=489.5$$

Print pixel density (Dots per inch, Dpi)

Dpi is generally used to describe the output accuracy . This unit is commonly used in printing shops. It refers to the maximum number of "theoretical" ink dots that the printer can print per inch in the highest resolution mode.

However, in general, we can think that Dpi is equivalent to Ppi (in fact, Ppi is a concept added later), so the above formula can also be used to calculate Dpi .

Generally speaking, the Dpi of the printer can reach up to 300 . Mobile phone manufacturers generally specify Dpi , as follows:

• Low Density 120dpi
• Medium Density 160dpi
• High Density 240dpi
• Ultra high density 320dpi

Device-independent pixel (Dip)

In Android development , screen adaptation is a key point. For example, if you design an APP, if the icon in it uses px to define the length, then the display results of the icons may be unpredictable on large and small mobile phone models and even tablet computers.

Therefore, it is necessary to define a new unit to replace px , which is the commonly used dp unit, and its related concept is calledDevice-independent pixel (Dip).The formula is as follows:
$$1dp=\frac{Dpi}{160}\cdot px$$

By using the dp unit, the aspect ratio of pictures or controls on the mobile phone screen can be kept consistent without distortion under different resolutions.

Scale-independent pixel (Scale-independent pixel, Sip)

Similar to the device-independent pixels mentioned above, scaling independent pixels mainly solves the problem of text adaptation, and the unit is sp , which is also the recommended text unit in Android.

image size

Image physical size

That is, the actual length and width of the image . As far as photos are concerned, we often use zoom in and zoom out to change its actual size. According to the formula, when the Dpi of the image is constant, the pixels of the image will actually increase when the image is enlarged, which is interpolated in real time by the built-in algorithm of the image viewer , rather than the original real pixels. Therefore, the transition between color blocks composed of pixels may not be natural, and relatively "thick" pixels can be seen . On the contrary, when the picture is reduced, the number of pixels is reduced.

In addition, it needs to be emphasized that this increase or decrease is only temporary , and it is a real-time display after calculation by the algorithm, and you have not saved it.

Therefore, when the Dpi is constant, you only need to modify the resolution to change the physical size of the picture accordingly.

image storage size

The image storage size is not the same concept as the physical size of the picture, it refers to the memory required to store the picture in the computer. Pictures are stored in binary form in the computer, and the calculation formula is:
$$store=resolution\cdot \frac{bit}{8}$$
Wherein, store refers to the memory size, and the unit is Byte . resolution refers to the resolution, that is, the number of all pixels. bit refers to the bit depth, that is, the bit ( bit ) required by a pixel .

Therefore, a high-resolution picture must contain a large amount of information, and its storage size will also increase accordingly.

Image Common Format

• .jpeg / .jpg

  • Joint Photographic Expert Group Joint Photographic Expert Group
  • Features: High compression ratio, small memory usage, lossy compression.

• .png

  • Portable Network Graphics Portable Network Graphics
  • Features: lossless compression , support alpha channel transparency . The amount of compression is lower than JPEG 's lossy compression. Multiple image files or animation files are not supported .

• .bmp

  • BitMap
  • Features: optional bit depth , no support for compression , and large memory usage .

• .gif

  • Graphics Interchange Format Graphics Interchange Format
  • Features: fast decoding, interlaced storage , can form simple animation. Alpha transparency channels are not supported .

• .ico

  • Icon image file icon image file
  • Files used to make icons .

• .tga

  • Tagged Graphics Tagged Graphics
  • Features: Support irregular graphics, lossless compression .

• .svg

  • Scalable Vector Graphics scalable vector graphics
  • Features: Based on XML, vector graphics , clear edges.

• .eps

  • Encapsulated PostScript Encapsulated Page Description Language
  • Features: Vector graphics . Often used in printing or printing.

summary

Personal humble opinion, please correct me if you have any questions!