The highest PPI. How to calculate the density of pixels on an inch and what is PPI. How PPI affects image quality

This animated video covers most of the topics in the article, but if you are interested in more pedantic details, be sure to read this post entirely.

Pixel density denotes the number of pixels that fit in a certain physical size (usually, it is inch). On the first mac-e It was 72 pixels on an inch - the number seems to seems great, but in fact it was huge pixels, which is not suitable for not every schedule.

Screen technology from those times has been very advanced, and now even the most basic computer screens have a resolution somewhere between 115 and 160 pixels per inch (PPI - Pixel Per Inch). But the new chapter in this story began in 2010, when Apple introduced the iPhone with the Retina screen - a super-screen screen that doubled the number of pixels per inch. As a result of this release, the schedule was clearer than we have ever seen.

See the difference in the Mail envelope icon, as well as the clarity of the text?

To maintain the same physical size user interface, pixel dimensions doubled. The button that previously occupied 44px, has now become 88px. For compatibility between different devices, designers must produce graphics (by type of icons) in "1x" and in the new format "2x". But here another problem arose: you can't say anymore: "Hello, this button should be 44 pixels in height," because it should also be 88 pixels on another device. Previously there were no units of measure without dependent on the pixel. The solution was "Points" (Points), or "PT". 1 point corresponds to 1 pixel on the screens to the RETINA generation and 2 pixels on the Retina screen in 2x. The points allow you to say: "Hello, this button should be 44 points in height," and then any device can adapt this size under its density coefficient of pixels ... as 1x or 2x. Or 3x in the case of iPhone 6 Plus.

PT and DP.

Of course, this is all not only relevant to Apple stability, these days each operating system - Whether it is desktop or mobile versionSupports high PPI / DPI screens. In Google invented his unit of measurement for Android, independent of pixels . It is not called the "point", it is called "DIP" - a pixel, independent of density, abbreviated "DP". This is not equivalent to points in iOS, but the idea is like. These are universal units of measure, which can be converted to pixels using a large-scale device multiplier (2x, 3x, etc.).

Perhaps you are interested in the physical size of the point. In fact, ui-designers are not particularly important, because we have no control over the hardware features of the screens of different devices. Designers you need to just know which pixel densities received a manufacturer for its devices, and take care of preparing designs in 1x, 2x, 3x and other necessary coefficients. But if you really are curious, know that Apple has no constant conversion between inches and points. In other words, there is no single pixel density, which represents 1 point - it depends on the specific device (see the "scale perception" section below). IN iOS Point Variable from 132 points per inch to 163 points per inch. The Android DIP is always equal to 160 ppi.

Controlled chaos

Now get ready to plunge into reality. In the early threshers of the development of high-resolution mobile devices, the pixel density was simply 1x or 2x. But now everyone completely gone from the coils - there is a lot of pixel densities that should support design. Android has an excellent example: at the time of writing this post, different manufacturers support six different pixel densities. This means that the icon, which has the same size on all screens, should actually be performed in 6 different variations. For Apple are relevant two or three different source.

Design in vector. Design in 1x.

There are a couple of practical lessons that you should extract from all this. To begin with, you must create designs in the vector. This allows our interfaces, icons and other graphs to scale into any desired size.

Second lesson: . In other words, create a design using dots for all measurements, then scaling into various larger pixel densities when exporting ... instead of design in finite pixel permissions specific devices (2x, 3x, etc.) and the emergence of mass problems when exporting. Since the zooming of 2x graphs is 150% for generating version in 3x provokes the appearance of blurred contours, this is not the best option. But the scaling of graphics 1x in 200% and 300% allows you to maintain visual clarity.

Layouts for standard iPhone sizes There must be 375 × 667, and not 750 × 1334, it is just the permission in which it will be displayed. Most design tools do not distinguish points from pixels (Flinto - an exception from this trend), so designers may pretend that the points are pixels, and then simply export the source code in 2x and 3x-fold sizes.

Pretend until it becomes true!

It is already a little more complicated, but still it is worth mentioning it: sometimes devices lgut. They pretend that their pixel conversion coefficient to a point is one, for example, 3x, and in fact, it is 2.61x, and the source itself is scaled to 3 simply for convenience. That's what iPhone Plus. Now does. It squeezes the interface made in 1242 × 2208 until the screen is resolved in 1080 × 1920 (the phone's graphic chip implements this real-time scaling).

Create a design under the iPhone Plus, as if it were actually 3x. The phone itself will sabb him in 87%.

Since graphics are only slightly reduced (87%), the result still looks worthy - the line thickness in 1px on the screen almost 3x looks incredibly clear. And there are chances, although I do not have any insider information that in the future, Apple will present a real 3x iPhone Plus, since the necessary hardware capabilities may be available for the product produced in such huge quantities. Current iphone version Plus simply exists until it becomes possible.

(Bruce Wong wrote about iPhone screen 6 plus).

Does such an approach acceptance of non-elected scaling? Everything is checked in practice. Is the result from such zoom? Many Android devices also resort to scaling to fit under a more standard pixel-in-point coefficient, but, unfortunately, some of them do it not very high quality. Scaling such a plan is undesirable, since everything you want to make clear and Pixel-Perfect on one scale will become blurred due to interpolation (for example, a 1px line becomes 1.15 pixels). Even if you are not fanatical in fitting the perfect pixels, like me, it makes no sense to deny that design elements must be clarifical to be clear how conceived
Unfortunately, as the pixel density reaches 4 and above, the blurring caused by non-herded scaling becomes much less catchy, so I predict that devices manufacturers will increasingly use this approach over time. We can only hope that there are deficiencies in the performance of them!

Perception of scale by your eyes

Let's postpone all these pixel densities for a minute and consider the question: Should the button be the same physical size on different devices? Of course, we simply use a button as an example, but we would have to consider the icon and text, and the toolbar. Should these elements be the same size on all devices? The answer depends:

From accuracy method input (Sensor or cursor)
From physical sizes Screen
From distances to the screen

The last two factors go hand in hand; Because the tablet has a large screen compared to the phone, we keep it much further from yourself. And then there is still a laptop, desktop computer, TV ... The distance increases with the screen size.

The button on your TV screen will be the size of your phone - because it should be so for such a distance.

Here is a less dramatic and very truthful example: application icons on the tablet must be more of the same icons on the phone, and this is implemented in two ways: using a smaller pixel density or changing the size of the buttons (i.e., the point size).

Lower pixel density

Larger screens that we use at a distance usually have a smaller pixel density. The TV may have a resolution of 40 pixels per inch! For an ordinary teleposition, it is quite acceptable. The Retina screen in the iPad has a resolution of about 264ppi, and the Retina screen on the iPhone - 326PPI. Since the pixels on the iPad more (the screen is less dense), the entire interface becomes a little more. This is explained by an additional distance between the eyes of the user and the iPad screen.

Different sizes

But, from time to time, the use of lower pixel density is not enough ... separate design elements must be even more. It happened with icons on the iPad. On the iPhone they are 60 × 60 pixels, but larger iPad screen gives more spaceSo practical than 76 × 76 icons.

Size change under different devices Adds job designers. This is one of several scenarios when apple devices require more sizes than android devices! Fortunately, this is not a typical case for application icons.

Sanitary check?

We have just discussed a lot of difficulties that you have to face. Fortunately, interface design concerns only the use of units that are not dependent on density (as PT or DP). Everything is complicated with icons of applications, but there are patterns that will help this. Here is a list of resources on this topic:

Important resources

Google Device Metrics: An impressive list of specifications for devices of all types (Android, iOS, Mac, Windows, etc.). Find out the screen size, pixel density, and even an approximate distance on which the screen is located from the user's eye. Screensiz.es - similar resource.

: These design templates (available for all major design editors) are very useful, both in the practical sense and for information on the latest specifications for Android, iOS, MacOS, TVOS, Watchos, Windows, Windows Phone etc.

: Detailed guide Sebastiana Gabriel, which covers even more details and practical techniques for Android and iOS designers.

There are some other resources on pixel density for designers.

Tags: ,,,,,

The high-quality image on the display is one of the most important components of any good smartphone. Dear readers, we will tell you what is the density of pixels (PPI) on the phone display, and explain why this indicator is not always important.

Pixel density - why it is not so important!

The PPI value determines the number of pixels per inch device screen. Higher values \u200b\u200bmake a picture clearer, readable and high-quality.

How PPI affects image quality

When Apple introduced the world of iPhone 4, it used the revolutionary display "Retina", the image quality on which could be compared with the quality of the picture in glossy logs (300 dpi). Then the company clearly showed the world that high permissions on the screen of the smartphone is not some kind of fairy tale, I am the real reality.

On the this momentThe highest DPI value (Dots Per Inch - the number of dots per inch) at the display smartphone Sony Xperia Z5 Premium. Its 5.5-inch screen has support for 4K permissions (2160 x 3840) and pixel density 806 PPI.

Among Xiaomi smartphones, good permission MI MIX (1080 × 2040 pixels), (1080 × 2160 Full HD +) and MI Note Pro. (2560 × 1440 Quad HD).

First Research and Current Reality

If earlier, Apple stated that 326 PPI will be sufficiently and higher permissions on a small display. portable device will be simply unclaimed. Now, looking at the display new iPhone. X, with its 458 PPI, it becomes clear that Apple decided not to follow this philosophy anymore.

We will be frank. The average user will notice the difference between the 300 and 500 PPI difference between the 300 and 500 PPI in the event that it will keep the screen of his phone at the distance of the elongated palm from its eyes.

Therefore, displays with a greater density of pixels, really will remain not claimed from most users, since no one wants to overpay.

Plus, with a large density of pixels, the device has to use more resources for processing the displayed picture. Is it worth reminding that this affects performance, and the battery life of a smartphone?

Despite this, we give some significant arguments in favor of high PPI screens.

Advantages of High PPI Displays

On Displays Full HD +, Quad-HD and 4K much more pleasant to read the text. Such a display gives more high level Brightness, high-quality contrast and deeper color reproduction.

High resolution allows you to use wider color range. The gamma looks more natural at the same time.

Lovers indulge with virtual reality will find many advatives to the screen with a large PPI pixel density. Naturally, low-resolution smartphones are not suitable for using them with glasses. virtual reality. However, devices with Full-HD resolution Or higher, can easily be used in VR mode to view movies and games.

Smartphones Xiaomi. (Xiaomi) with FullHD support:

MI Note 3.
MI A1.
MI MAX 2.
Mi Max
MI 5 / 5S / 5S Plus / 5C
MI 4 / 4S / 4C / 4I
Redmi Note 4 / 4x
REDMI 4 PRIME.
REDMI NOTE 3 / NOTE 2
REDMI PRO.
MI Note.

Output

Obviously, manufacturers should not be chased at high permissions and a large number of pixels on the screen. Instead, they should think about the possibility of introducing new technologies that will be able to bring image quality to new level. It is this strategy that is now Xiaomi.

Now the resolution and density of the pixel display in the mobile device are one of the main marketing items. Find out what the PPI value is affected.

Recently the company Samsung Galaxy S8 and Galaxy S8 +, whose feature has become a "limitless" screen. The display almost lost the framework, received a high resolution of 2960 × 1440 points and a pixel density of 570/529 PPI, respectively. In February, at the International Exhibition MWC 2017, the LG brand announced a smartphone with a similar resolution and 564 PPI density, and Sony is a 4K-screen device (3840 × 2160 pixels, 806 PPI). Obviously, the future for high-resolution displays.

When choosing a smartphone, many pay attention to the screen resolution, but the pixel density often remains aside. Given the development of on-screen technology and development in the field of virtual reality, the PPI value also plays a large role as a display.

What is PPI?

PPI reduction comes from Pixel Per Inch (inch pixel) and is used to describe pixel density in all types of displays, including cameras, computers, mobile devices etc. The density of pixels can be an indicator of the definition of the screen, but it is necessary to take into account other aspects: its physical dimensions and distance to the eye.

If you move the screen closer to the eyes, you will be able to see the pixels. If the device is at a high distance from you, the high density of pixels will not be particularly felt. Thus, the more the display, the less PPI value.

Standard of Vision

Usually, human visual acuity measures with the help of snellenne test, which was invented in 1860 for medical purposes. It is important to note that on this system an ophthalmologist tried to identify weak vision, which is a medical problem. No patient has never complained about visual acuity above average.

So, the acuity of vision 20/220 is not ideal at all. This indicator means normal vision, in which a person can read the table at a distance of 3 meters.

Myth about 300 ppi

There is a myth that a person cannot distinguish pixels at a density of 300 ppi. In 2010, Steve Jobs used this statement during iPhone presentation 4, equipped with an innovative Retina display with 326 PPI. In part, this corresponds to reality, but only for those users who have an acuity of vision 20/20.

According to various studies, the human eye can distinguish pixels at a density of up to 900-1000 ppi.

What does pixel density affect?

The higher the pixel density, the more clearer image you will see on the screen. If earlier it did not matter, then with the onset of the era of virtual and augmented reality, the situation gradually changes. Hardly you want in virtual reality mode to see a pixel picture around yourself. The higher the resolution and density of pixels, the more realistic image. Moreover, this may noticeably not only when using a virtual reality headset, but also when watching movies.

Building:

Theoretical page and calculations

The concept under consideration is decoded as Pixels Per Inch, that is, the number of pixels per inch. Pronounced as Pi-Pi-ah.

She literally means how many pixels are placed in one inches of the image that we see on, tablet or other techniques.

Also, this concept is called a unit of measurement of permissive ability. The calculation of this magnitude is made using two simple formulas:
Where:

dP. - diagonal resolution;
dI - the size is diagonal, inches;
WP. - width;
HP. - Height.

The second formula is designed to calculate the diagonal resolution and is based on the use of the famous Pythagora theorem.

Fig. 1. Width, height and size diagonal on the monitor

To show how all these formulas are used, take the monitor with a diagonal of 20 inches and a resolution of 1280x720 (HD).

Thus, WP will be equal to 1280, HP - 720, and di - 20. Thanks to the presence of this data, we can calculate Pi-Pi-ah. First, we use formula (2).

And now we apply this data for formula (2).

Note: In fact, we had 73.4 pixels., But the neurochy pixel number can not be, only the integer values \u200b\u200bare used.

To understand how much it is in centimeters, more familiar for our area, you need to divide the resulting number by 2.54 (in one inch it is so much centimeters).

Thus, in our example it is 73 / 2.54 \u003d 28 Pixes. in centimeter.

In our example, it is 73, and 25.4 / 73 \u003d 0.3. That is, the size of each pixel is 0.3x0.3 mm.

Is it good or bad?

Tell together.

Is this magnitude important

Pi-pi-ah, based on the foregoing, affects the clarity of the image that the user receives on its screen.

The higher the value of the indicator, the clearer image will receive the user.

In fact, the more this value, the less the "squares" will see a person.

That is, each pixel will be small, not big, and it will give an opportunity at all to pay attention to it. Vitely the value of the characteristic can be seen in Figure 2

Fig. 2. The difference in the indicators is smaller and more

Of course, I do not want to have anyone on your picture as shown on the left.

Therefore, when choosing such equipment, it is very important to pay attention to this characteristic.

This is especially true when you buy on the Internet and have no opportunity to appreciate your own picture and understand how clear it is.

Find an indicator in the characteristics of the same smartphone usually simply. It is usually contained in the "Display" section. An example can be seen in Figure 3.

Fig. 3. Indicator in the characteristics of the smartphone

Important! Online, it is often possible to find information that PPI is more important than, for example, permission or diagonal and some of these characteristics should play a more important role when choosing. This is not at all. As we could make sure, all these three concepts are inextricably linked.

Pros and cons

Number of pix. The inch positively affects the clarity of the picture, and, accordingly, on its quality.

The user will be at times more pleasant to look at the image with a large indicator.

In Figure 2, photo on the left has 30 PPI, and the photo on the right is 300. Below is another similar example.

But there is u this concept and cons. In particular, we are talking On the autonomy of the device.

Everything is quite simple - if the picture is a clear, smartphone, tablet or other device with the screen will not be able to work for a long time without recharging.

You can even make a simple rule: the more Pi-Pi-ah, the less time of autonomous work.

Of course, for a PC is not a problem, since there the monitor is still constantly included in the outlet, but for some phones it can become a big problem.

Therefore, when you select the device, you must pay attention not only to the number of pixes. A-inch, and also on!

Thus, we smoothly switched to the topic of choice.

About choosing displays

There are several rules that will help choose a display correctly with pixels, they sound as follows:

1 Be sure to pay attention to the display type. In priority there must be AMOLED, even better Superamoled or OLED. Such devices will always be better than.

Suppose we came to the store and see, for example, two excellent apparatus - and. Their price is almost the same, the second apparatus, by the way, is more powerful.

In the characteristics it is indicated that Xiaomi 400 ppi (for some reason some write 400,53, but as we said above, the neurogenic number of pixes. Be not).

Samsung 267 PPI and permission, respectively, less (1280x720 against 1920x1080). Diagonal is the same - 5.5 inches.

But for some reason the picture is clearer exactly on. And all because of the use of SUPERAMOLED + branded technology. You can make sure of it yourself if you pay attention to Figure 5.

2 Try to find the opportunity to personally look at all the samples you chose. You can first view their options on the Internet, and then go to the electronics store and see how you really reflect pictures. Personal glance in this case is simply indispensable.

3 Pay attention to the battery. If we talk about smartphones, then to provide long work Apparatus S. clear image (Large PPI and / or good technology), the battery capacity should be about 3000 mAh.

It should be even higher for the tablets, as their diagonal is greater,

4 Remember: the smaller the diagonal and the higher the pixel density (the number of those per inch), the more clear image. You should not deceive yourself - to achieve a very clear picture with a huge display and a small value of Pi-Pi-ah will not work. It is important to keep the golden middle.

5 It is important to take into account and coverage. So matte screens will produce a less clear and saturated image, but they will be more gentle to your eyes.

But glossy displays will adversely affect vision, but the image on them will be much more beautiful. In this case, the PPI value may be the same.

This is mainly relevant. If you work at a full-time computer or even more, it is better to stay on the matte version.

All this will allow you to choose the most appropriate display for yourself.

RESULTS

pPI or PI Pi-ah is a pixel density or pixel indicator in an inch image. To translate the indicator into centimeters, you need to divide it by 2.54.

Neutual amount can not be, only a whole.

Than this to show above, the clearer and more pleasant to the image will look.

When choosing and other equipment, which is, it is very important to pay attention to this indicator.

But it is not fundamental. It is also important to look at the technology and screen coverage.

In addition, be sure to look at the battery capacity and follow the golden middle of the pixel. and screen size.

When buying smartphones, monitors and other equipment, in which there is a screen, we often hear about such a thing as PPI, but few of us can say for sure what it is what it affects.

And in fact, this characteristic is one of the main when choosing.

We will tell you what the significance of this concept is in fact (after all, on the Internet you can find many myths on this issue). Go!

Theoretical page and calculations

The concept under consideration is decoded as Pixels Per Inch, that is, the number of pixels per inch. Pronounced as Pi-Pi-ah.

She literally means how many pixels are placed in one inches of the image that we see on the monitor screen, smartphone, tablet or other technique.

Also, this concept is called a unit of measurement of permissive ability. The calculation of this magnitude is made using two simple formulas:
Where:

dP. - diagonal resolution;
dI - the size is diagonal, inches;
WP. - width;
HP. - Height.

The second formula is designed to calculate the diagonal resolution and is based on the use of the famous Pythagora theorem.

Fig. 1. Width, height and size diagonal on the monitor

To show how all these formulas are used, take the monitor with a diagonal of 20 inches and a resolution of 1280x720 (HD).

Thus, WP will be equal to 1280, HP - 720, and di - 20. Thanks to the presence of this data, we can calculate Pi-Pi-ah. First, we use formula (2).

And now we apply this data for formula (2).

Note: In fact, we had 73.4 pixels., But the neurochy pixel number can not be, only the integer values \u200b\u200bare used.
In the same way, the real values \u200b\u200bof the number of pixels per inch can be calculated in any device.

To understand how much it is in centimeters, more familiar for our area, you need to divide the resulting number by 2.54 (in one inch it is so much centimeters). Thus, in our example it is 73 / 2.54 \u003d 28 Pixes. in centimeter.

In our example, it is 73, and 25.4 / 73 \u003d 0.3. That is, the size of each pixel is 0.3x0.3 mm.

Is it good or bad?

Tell together.

Is this magnitude important

Pi-pi-ah, based on the foregoing, affects the clarity of the image that the user receives on its screen.

The higher the value of the indicator, the clearer image will receive the user.

In fact, the more this value, the less the "squares" will see a person. That is, each pixel will be small, not big, and it will give an opportunity at all to pay attention to it. Vitely the value of the characteristic can be seen in Figure 2

Fig. 2. The difference in the indicators is smaller and more

Of course, no one wants to have such a picture on your smartphone or tablet as shown on the left. Therefore, when choosing such equipment, it is very important to pay attention to this characteristic. This is especially true when you buy on the Internet and have no opportunity to appreciate your own picture and understand how clear it is.

Find an indicator in the characteristics of the same smartphone usually simply. It is usually contained in the "Display" section. An example can be seen in Figure 3.

Fig. 3. Indicator in the characteristics of the smartphone

Pros and cons

Number of pix. The inch positively affects the clarity of the picture, and, accordingly, on its quality.

The user will be at times more pleasant to look at the image with a large indicator.

In Figure 2, photo on the left has 30 PPI, and the photo on the right is 300. Below is another similar example.

But this concept has and cons. In particular, we are talking about the autonomy of the device. Everything is quite simple - if the picture is a clear, smartphone, tablet or other device with the screen will not be able to work for a long time without recharging. You can even make a simple rule: the more Pi-Pi-ah, the less time of autonomous work.

Of course, for a PC is not a problem, since there the monitor is still constantly included in the outlet, but for some phones it can become a big problem. Therefore, when you select the device, you must pay attention not only to the number of pixes. inch, and also on the capacity of the battery!

Thus, we smoothly switched to the topic of choice.

About choosing displays

There are several rules that will help choose a display correctly with pixels, they sound as follows:

1 Ensure pay attention to the display type. In priority there must be AMOLED, even better Superamoled or OLED. Such devices will always be better than IPS, LCD and others.

Suppose we came to the store and see, for example, two excellent apparatus - Samsung Galaxy J7 and Xiaomi Redmi Note 3. The price of them is almost the same, the second device, by the way, is more powerful.

In the characteristics it is indicated that Xiaomi 400 ppi (for some reason some write 400,53, but as we said above, the neurogenic number of pixes. Be not). Samsung 267 PPI and permission, respectively, less (1280x720 against 1920x1080). Diagonal is the same - 5.5 inches.

But for some reason the picture is clearer exactly on Samsung. And all because of the use of SUPERAMOLED + branded technology. You can make sure of it yourself if you pay attention to Figure 5.

2 Close to find an opportunity to personally look at all the samples that you have chosen. You can first view their options on the Internet, and then go to the electronics store and see how you really reflect pictures. Personal glance in this case is simply indispensable.

3-turn attention to the battery. If we talk about smartphones, then to provide a long work of the device with a clear image (a large PPI and / or good technology), the battery capacity should be about 3000 mAh.

At the tablets it should be even higher, as their diagonal is greater than the phones

4Pompress: the smaller the diagonal and the higher the pixel density (the number of such inch), the clearer image. You should not deceive yourself - to achieve a very clear picture with a huge display and a small value of Pi-Pi-ah will not work. It is important to keep the golden middle.

5Well take into account and cover. So matte screens will produce a less clear and saturated image, but they will be more gentle to your eyes.

But glossy displays will adversely affect vision, but the image on them will be much more beautiful. In this case, the PPI value may be the same.

This is mainly relevant to select monitors to PCs and laptops. If you work at a full-time computer or even more, it is better to stay on the matte version.

All this will allow you to choose the most appropriate display for yourself.

RESULTS

pPI or PI Pi-ah is a pixel density or pixel indicator in an inch image. To translate the indicator into centimeters, you need to divide it by 2.54. Neutual amount can not be, only a whole.

Than this to show above, the clearer and more pleasant to the image will look. When choosing smartphones, tablets, monitors for PCs, laptops and other equipment, in which there is a display, it is very important to pay attention to this indicator.

But it is not fundamental. It is also important to look at the technology and screen coverage. In addition, be sure to look at the battery capacity and follow the golden middle of the pixel. and screen size.