What are pixels, resolution, screen resolution, ppi, and dpi?

1. Pixels

The smallest unit that forms an image is called a pixel. When an image is enlarged several times, you will see a grid of granular color blocks. As shown in "Figure 1", these square things are called pixels.

Pixels can be imagined as pure color light bulbs. Countless light bulbs of different colors are arranged according to a certain pattern. When we stand far away and take in all the light bulbs, we can see the picture presented by these light bulbs as a whole.

Take the LED screen as an example. When we are very close to the LED screen, we can only see a single light bulb [Figure 2]. Only when we stand far away can we see what it shows [Figure 3]. These light bulbs are equivalent to pixels, which collectively piece together a complete image.

An image is composed of a collection of pixels of different colors, and a pixel is the smallest unit element that forms an image.

The shape of the pixel itself is arbitrary and has no fixed form. It relies on physical devices such as graphics cards and display screens to display. There are various displays in the world, and the shapes of pixels can also be various.

Since the photoreceptors of most machines are rectangular, there are more rectangles in the common pixel shapes we see. The most common one is a square with a 1:1 aspect ratio. There are also other shapes with different aspect ratios, as shown in "Figure 4":

Note that when we describe a pixel, we can only describe its aspect ratio, density or shape (such as square or circle), but we cannot describe its size, because the pixel is virtual and can be large or small. The way it appears in front of us is determined by the physical device that displays it. For example, some display screens have circular pixels, some are square, and some are irregular polygons, as shown in "Figure 5"; for another example, the size of the pixels on the mobile phone screen is definitely much smaller than the size of the pixels on the LED light signs that can be seen everywhere on the street.

2. Resolution

The density of pixels determines the clarity of the image. Pixel density is resolution, which is sometimes also called resolution. Depending on the object being described, resolution can also be subdivided into PPI, DPI, screen resolution, operating system resolution, etc. "Resolution" is a general term for these nouns that describe pixel density.

Since there are several types of resolution, as a designer, you only need to understand PPI and DPI. If you don't consider printing, you only need to pay attention to the PPI of the image. If the work needs to be printed, then you need to consider DPI.

3. PPI

PPI stands for pixels per inch, which means how many pixels there are per inch of line segment length

This formula looks complicated at first glance, but it is actually based on the Pythagorean theorem. First, find out how many pixels there are on the diagonal, and then divide this number by the length of the diagonal. PPI=Total number of diagonal pixels ÷ diagonal length

Note: The "total number of diagonal pixels" here does not refer to how many pixels there are on the diagonal of the image or screen. In this formula, it only represents the number of pixels on the diagonal, which is just a value in the mathematical sense, which is convenient for calculation.

In the case of the same size, the higher the PPI value, the more detailed and clear the image will be. For example, for an image with a length and width of 1 inch, when the PPI value is 5, 10, 20, 40, the picture clarity is as follows:

However, this does not mean that PPI can completely determine the clarity. If an image wants to be high-definition and rich in details, in addition to ensuring a high PPI value, the pixel size (the total number of pixels in the image) must be large enough.

For example, an image of "10×10px, 20 ppi" will definitely not look as detailed as "40×40px, 5 ppi", because the total number of pixels in the former is not as large as the latter, so the former is definitely not as good as the latter in terms of detail expression. The following is the effect of two pictures displayed on the same screen (the green grid in the picture represents the screen resolution, and each grid represents a pixel)

From the above picture, it can be intuitively seen that the image of "10×10px, 20 ppi" is much smaller than the image of "40×40px, 5 ppi", and in this set of comparison pictures, the 20 ppi is not as clear as the 5 ppi. Why is this?

As mentioned earlier, the calculation method of PPI is determined by the number of pixels per inch of line segment length. Take a 20×20px image as an example (the blue diagonal line in the image represents the number of pixels per inch of line segment length, i.e., PPI)

When PPI=5, that is, there are 5 pixels across the diagonal line per inch, then the actual size of this image is 4 inches;

When PPI=10, that is, there are 10 pixels across the diagonal line per inch, then the actual size of this image is 2 inches.

Like the case of "Figure 6", when PPI=20, the size of a 10×10px image is only 0.25 inches, and the actual pixels carried are only 100px. Naturally, it is not as good as the image containing 1600px in terms of describing details "Figure 7", so the "10×10px, 20 ppi" image is useless even if it has a higher PPI than the "40×40px, 5 ppi" image.

It can be seen that the most critical factor determining the clarity of an image is the pixel size. The more pixels it contains, the more details it has and the clearer the picture. It only makes sense to use a high PPI value when the pixel size is large enough. The PPI values of general images are usually 72, 96, 180 or 300. The default option for design software and many digital devices is 72 ppi, and the Windows system uses 96 ppi; if the image needs to be used for printing, 300 ppi is more often used. Since the higher the PPI value, the clearer the details of the picture. Why not use a higher PPI and use 72 instead? Because the recognition ability of the human eye is limited, there is almost no difference between the 72 ppi and 300 ppi pictures we see with our naked eyes (except for font size). Take two pictures as an example:

When the pixel size is the same and the screen display ratio is 100%, the size and clarity of the 72 ppi picture and the 300 ppi picture in PS are the same. Don't think that it will be different when you enlarge it. No, there is no difference when you enlarge it. Because the pixel density of the display is fixed, for images displayed on the screen, the image clarity is defined by the pixel size. The pixel size of the images shown in "Figure 8" is 500×500px, so it seems that there is no difference in size and clarity. So, if the image you are processing is only used for screen display (not involving printing), then the canvas size you set is the same as the pixel size. The PPI value will only be stored in the additional information of the image and is only used for reference. A high PPI will also increase the memory of the image and take up more storage space. So if you don't consider printing, it is not recommended to set a too high PPI.

If the image you are processing needs to be used for printing, then the resolution is very important. PPI and DPI will have a conversion effect in the printing process. This will be discussed later. In summary, for images that are only used for screen display and do not need to be printed, PPI is not very important, and the value does not need to be set too high, as long as it can meet the fineness that can be seen by the naked eye. As for why the default PPI is commonly 72, rather than other values? This is mainly because in almost all computer software, the font size has been globally unified. At 72 ppi, 1pt ≈ 1px (pt is the unit for font size, px is pixel). That is to say, the height of the character box of a 30pt text is 30px; and at 300 ppi, the height of the character box of a 30 pt text is 125 px. For the convenience of screen design, 72 ppi can more intuitively control the pixel size of the text.

IV. Screen resolution

Since we talked about the display earlier, let's mention another concept here - screen resolution (often referred to as resolution). Screen resolution is different from PPI. Screen resolution is usually only expressed in X×Y. For example, the resolution of a computer screen is 1920×1440, the resolution of a digital camera is 3004×2000, and so on. This refers to the total number of pixels contained in the entire screen, that is, the pixel size. The resolution of mobile phones is also often expressed in X×Y.

The same picture will change significantly when viewed on screens with different resolutions. For example, when an image with a pixel size of 40×40px is viewed on two screens with different resolutions, the effect is as follows:

As can be seen from the above figure, in a screen with a higher resolution, because the pixel density is higher, the pixel particles will look much smaller, making the image look visually smaller. (Note that the screen resolution only determines the visual effect and does not change the parameters of the image itself) Since they are all resolutions, why is the screen resolution not expressed in PPI values, but in pixel size?The main reason is that when the image does not involve printing, PPI cannot completely determine the image clarity, but is mainly determined by the total number of pixels in the image. When expressing the clarity of the screen, it is better to directly express the total number of pixels than to emphasize PPI to judge the resolution of the screen itself. This knowledge point has been explained very clearly before, so I will not repeat it.

In short, when it does not involve printing, PPI is not taken seriously. But when we need to print the image, PPI is very important! To convert the pixel size into the actual size, PPI must be used as a conversion medium to achieve the leap from virtual to reality. PPI determines how many pixels are contained in an image per inch, which naturally determines the actual size of the printed image. When it comes to printing, we have to mention DPI.

5. DPI

DPI stands for dots per inch, which indicates how many dots there are per inch of line segment length (usually refers to the number of dots printed)

From a technical point of view, PPI is unique to the digital field and only exists in the field of electronic display, while DPI only appears in the field of printing. Printers print things by placing ink dots in different positions to achieve imaging. The higher the DPI of the printer, the smaller the printed ink dots, and the more delicate the printed picture will be. In fact, as long as you understand PPI, you can understand DPI.

The calculation method of DPI is the same as PPI: within the same unit length (diagonal), if the DPI value is high, more dots will be used to represent it, and the printed image will be finer and clearer, and vice versa.DPI can be further divided into horizontal resolution and vertical resolution. As the name suggests, it is the horizontal dot density and the vertical dot density. When printing some images, the horizontal dot density is different from the vertical one, so it needs to be clearly marked. Since this belongs to the category of printing, and printing is a big topic that cannot be explained in a few words, I will not expand on it here. If there is a chance to talk about packaging printing in the future, I will talk about it in detail. When an image is represented by pixels, we need to specify its resolution (PPI/DPI) to convert the "pixel size (virtual, non-physical)" of the image to the "printing size (printed, with real physical size)" in reality.

When the image in the computer is printed out from the printer, there will be a translation between the image PPI and the printer DPI, as shown in the following figure:

When printing images, in order to output clear images, in addition to increasing the dpi value, you should also pay attention to the ppi value when the image is captured. How should we choose their respective resolutions?

It is currently believed that the output image quality is highest when PPI/PDI=1.5~2.0, that is, when PPI is 100, DPI takes a value of 150 or 200.

During the image acquisition and output process, images with low total pixel count, images acquired with lower PPI, or images output with lower DPI may be rough and unclear due to the loss of some light spots. As shown in the following figure:

During the image acquisition and output process, excessive pursuit of high DPI will cause the image to be distorted due to excessive filling of light spots, as shown in the following figure:

At the same time, since the file size is proportional to the square of the image resolution (such as increasing the image resolution by 1 times, the file size will increase to 4 times the original), increasing PPI/DPI will also prolong the image acquisition and output time. For example, assuming that when using 300pdi to print, the speed is 1 picture per minute; then the same picture will take 4 minutes to print when using 600pdi. In fact, there is no need to delve into the numerical conversion. If you want to print the picture and don’t want to understand so many theories, just set the PPI to 300 in the computer image software. Then use the printer's default value, or adjust the printer's dpi to the best setting to print. If you don't print it yourself, it's easier to hand it over to a printing factory. You only need to control the PPI value of the source file and set it to 300.

Additional explanation: DPI used to be a unit of measurement in printing, but now most people have expressed the pixel density of digital images in DPI. In fact, it is correct to express the pixel density of digital images in PPI, because pixels only exist in the field of computer display, and dots only appear in the field of printing or printing. The current mixed use is purely a misunderstanding caused by people who don't understand the meaning. This misunderstanding is not ordinary. Even some large image material websites have begun to mix PPI and DPI. Many UI designers and programmers also use DPI to indicate resolution when they work. But it doesn't matter. As long as the people who say it understand each other and what they mean when they say DPI, it will be OK if it doesn't affect the work.