A high-quality image on the display is one of the most important components of any good smartphone. Dear readers, we will tell you what pixel density (PPI) is on a phone display and explain why this indicator is not always important.
Pixel Density - Why It's Not So Important!
The PPI value determines the number of pixels per inch of a device's screen. Higher values make the picture clearer, more readable and of higher quality.
How PPI affects image quality
When Apple introduced the iPhone 4 to the world, it used a revolutionary “Retina” display at that time, the image quality of which could be compared to the quality of pictures in glossy magazines (300 DPI). Then the company clearly showed the whole world that high resolutions on a smartphone screen are not some kind of fairy tale, but a real reality.
At the moment, the highest DPI value (dots per inch) of the display is Sony smartphone Xperia Z5 Premium. Its 5.5-inch screen supports 4K resolution (2160 x 3840) and a pixel density of 806 PPI.
Among Xiaomi smartphones, good resolution can be found in Mi Mix (1080x2040 pixels), (1080x2160 Full HD+) and Mi Note Pro (2560x1440 Quad HD).
Early research and current reality
Previously, Apple stated that 326 PPI would be enough and higher resolutions on a small display of a portable device would simply become unclaimed. Now, looking at the display of the new iPhone X, with its 458 PPI, it becomes clear that Apple has decided to no longer follow this philosophy.
Let's be honest. The average user will notice the difference between 300 and 500 PPI with the naked eye if he holds his phone screen at a palm's length from his eyes.
Therefore, displays with a higher pixel density will indeed remain unclaimed by the majority of users, since no one will want to overpay.
Plus, if there is a high pixel density, the device has to use more resources to process the output image. Is it worth reminding that this affects the performance and battery life of the smartphone?
Despite this, we will present some significant arguments in favor of high PPI screens.
Benefits of High PPI Displays
Text is much more enjoyable to read on Full HD+, Quad-HD and 4K displays. This display provides a higher level of brightness, high-quality contrast and deeper color rendition.
High resolution allows for a wider color range. The gamma looks more natural.
Those who like to dabble with virtual reality will find many advantages of a screen with a high PPI pixel density. Naturally, smartphones with low display resolutions are completely unsuitable for use with glasses virtual reality. However, devices with Full-HD resolution or higher can be used without problems in VR mode for watching movies and playing games.
Xiaomi smartphones 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
Conclusion
Obviously, manufacturers should not chase high resolutions and a large number of pixels on the screen. Instead, they should consider introducing new technologies that can take image quality to a whole new level. This is precisely the strategy that Xiaomi is now following.
A long time ago, I worked in the LCD monitor and TV manufacturing industry. And one day I participated in a conversation with engineers from leading companies developing display control circuits. They accused all of us who designed and created screens of “nose on glass engineering” (N.O.G.E.).
In their opinion, we focused on improvements that can only be noticed by burying your nose in the screen. We increased indicators that do not play a role in everyday use. And they were absolutely right.
Today the mobile industry is doing the same thing. Pay attention to what are called the main characteristics of the screen in a tablet and smartphone. By and large, this is only the number of pixels and, perhaps, a certain display technology (IPS, OLED or other). But are these really the only details you need to pay attention to? And in general, are they the most important?
Let's go back seven years to the moment when the iPhone 4 with -display was introduced. Apple chose this name because this screen had a density of 326 pixels per inch, which corresponded to the resolution of the human eye (retina).
Chances are you don't need more high density because you won't be able to tell the difference.
Some experts, including Dr. Ray Soneira of DisplayMate Technologies, disputed this claim. But even critics agreed that this figure came very close to the limit that makes sense for practical application. 300 dpi - the density of photographs in glossy magazines. And no one has ever complained about their quality.
And now about the present. The maximum screen density in a smartphone available in the market is 806 pixels per inch. We are talking about the Sony Xperia Z5 Premium, the 5.5-inch display of which can accommodate a full 4K image (2,160 by 3,840 pixels). There are several phones with a resolution of about 1,440 by 2,960 pixels and screen sizes ranging from 5.5 to 6 inches, the density of which exceeds 550 ppi.
Even Apple, which was the first to assure us that 326 pixels per inch would be plenty, upped that figure to 458 in the iPhone X's Super Retina display.
The technical term for all this is insanity.
Without a doubt, you can notice tiny differences down to the 500 ppi density level. Provided that you have perfect vision and keep the phone no further than 30 cm from your eyes. But all the same, if today it is possible to create such products, this does not mean that they need to be created. It also doesn't mean that these displays perform better than others overall.
It takes more computing power and energy to keep all those pixels running. The more dots on the screen, the less room there is for the "open area" - the part that emits light - in each one. Thus, the brightness and energy efficiency of the backlight - or both - suffer.
What parameters should you pay attention to?
Today, displays no longer suffer from problems such as distortion and loss of linearity. We haven't seen one since manufacturers stopped using CRT screens over a decade ago. So aren't our modern displays perfect? The answer is, of course not. I can list at least three display properties that need improvement far more than the number of pixels.
Image quality in bright light conditions
The first is image quality in sunlight. It can be improved by increasing brightness and user-visible contrast. For us to be comfortable looking at an emissive display (emitting light), it must display a white color as bright as its surroundings.
In addition to brightness (which wastes energy), the screen must provide enough contrast to work in well-lit conditions. The characteristics of OLED displays usually indicate a contrast ratio of 100,000: 1 or even 1,000,000: 1. But this is also nonsense. You get such numbers only in a completely dark room between black and white display colors.
In real-world operating conditions, contrast is reduced by ambient light. And this is a problem for modern displays. It's rare that a screen can deliver a ratio greater than 50:1 in a typical room, and in brighter lighting conditions the ratio is even lower. We'd like to see full-color reflective display technology, but there's nothing on the market yet.
Color accuracy
The next property that should interest us is color accuracy. But don't confuse it with color palette indicators. The value of the latter determines the range of colors that the display is capable of displaying. OLED and now QLED displays impose a wide color palette, but they do not provide high color accuracy.
A wide color palette would be ideal if there was a source material whose potential it could reveal. But a typical display with a wide color palette only makes the image too bright and cartoonish.
Instead, we need screens that accurately reproduce the colors in the content creator's palette (sRGB or Rec. 709). Transmission accuracy is expressed by the ΔE* metric, which shows the difference between two colors. If its value reaches 1, the error becomes noticeable. Show me a display parameter that guarantees a low difference in ΔE* calculation across multiple tests, and then we'll have something.
Playing a tone
Color accuracy and overall image quality depend largely on tone reproduction, a property better known as proper gamma. Most color errors on LCD and OLED displays are due to incorrect tone reproduction within the three primary colors.
Conclusion
Stop counting pixels. Instead, let's demand improvements to those features that can actually improve picture quality. There are many more ways to make a good screen than just measuring the number of dots.
The abbreviation PPI stands for “Pixel Per Inch”, that is, pixels per inch. This value indicates how many pixels are placed in one square inch of the actual size of the monitor. The total number of pixels is calculated using standard formulas for the area of a rectangle or right triangle, which each of us studied in school. The larger this value, the higher the resolution of the monitor.
What does pixel density ppi mean?
Pixel density ppi determines the clarity and quality of the image displayed on the screen. With a large number, the pixels will be very, very small, which will make it possible not to notice the corners of these squares and create the illusion of a smooth transition between objects displayed on the screen.
IMPORTANT! The quality of the image itself is also important - if a picture measuring 20x20 pixels displays a forest, then regardless of the strength of the monitor, the picture will be “grainy”.
This feature is very important for those who work with images or videos on a computer or tablet. And, of course, for fans computer games With high video quality parameters, a large screen size will come in handy.
If we are talking about mobile devices ah (phones, smartphones, tablets, etc.), then too high a ppi will be not so much useful for them as harmful. Displaying a high-quality image with a large number of pixels on the screen has a detrimental effect on the battery level during operation. That is, devices with a large ppi will not be able to go without recharging for a long time.
How to adjust?
It is not difficult to adjust the display size on your PC screen. This may be necessary for those who purchased a new monitor, or, conversely, want to reduce the image displayed on the screen to save money random access memory and processor power. Required sequence of actions:
- Right-click on an empty space on your desktop and select “Screen Resolution.” A menu will open where you can select:
- A monitor (if there are several of them) on which the activity of the PC system is displayed.
- Resolution in pixels (there are many options here, one of which is listed as recommended), which is limited by the maximum screen size.
- Orientation (image format) from several options. As a rule, the default is the one that is most convenient for perception at a given resolution.
On mobile devices, screen properties can be adjusted in Settings. But not all phones provide their owners with such power over themselves.
This animated video covers most of the topics in the article, but if you're interested in more pedantic details, be sure to read the entire post.
Pixel density refers to the number of pixels that fit within a certain physical size (usually an inch). On the first Mac there were 72 pixels per inch - the number seems large, but in fact these were huge pixels, which not every graphics can handle yet.
Screen technology has advanced greatly since then, and now even the most basic computer screens have a resolution somewhere between 115 and 160 pixels per inch (ppi). But a new chapter in this story began in 2010, when Apple introduced the iPhone with Retina display - a super-sharp screen that doubled the number of pixels per inch. The result of this release is graphics that are sharper than we've ever seen.
See the difference in the Mail envelope icon, as well as the clarity of the text?
To maintain the same physical size of the user interface, the pixel dimensions were doubled. The button, which previously took up 44px, now takes up 88px. For compatibility between different devices, designers should produce graphics (like icons) in “1x” and in the new “2x” format. But then there's another problem: you can't anymore say, “Hey, this button needs to be 44 pixels tall,” because it also needs to be 88 pixels on another device. Previously, there was no pixel-independent unit of measurement. The solution was “points”, or “pt”. 1 dot corresponds to 1 pixel on screens up to the retina generation and 2 pixels on a 2x retina screen. The dots allow you to say, “hey, this button should be 44 dots tall,” and then any device can adapt that size to its pixel density ratio... like 1x or 2x. Or 3x in the case of the iPhone 6 Plus.
PT and DP
Of course, all this is not only relevant for Apple devices, these days every operating system- be it desktop or mobile version, supports high ppi/dpi screens. Google came up with this idea its own unit of measurement for Android, independent of pixels. It's not called a "dot", it's called a "DIP" - density independent pixel, abbreviated as "dp". This is not the iOS equivalent of dots, but the idea is similar. These are universal units of measurement that can be converted to pixels using the device's scale factor (2x, 3x, etc.).
You may be wondering about the physical size of the dot. In fact, UI designers don't really care about this because we don't have any control over the hardware properties of different devices' screens. Designers just need to know what pixel densities the manufacturer has adopted for their devices, and take care of preparing designs at 1x, 2x, 3x and other necessary ratios. But if you're really curious, Apple doesn't have a permanent conversion between inches and dots. In other words, there is no single pixel density that represents 1 point - it depends on the specific device (see the “Scale Perception” section below). On iOS, the dot varies from 132 dpi to 163 dpi. On Android DIP is always 160 ppi.
Controlled Chaos
Now get ready to plunge into reality. In the early days of high-resolution mobile devices, pixel densities were simply 1x or 2x. But now everything has gone completely off the rails - there are a ton of pixel densities that the design has to support. Android has a great example: as of this writing, different manufacturers support six different pixel densities. This means that an icon that is the same size on all screens should actually be made in 6 different variations. For Apple, two or three different sources are relevant.
Design in vector. Design in 1x.
There are a couple of practical lessons you should take away from all of this. To begin with, you should create your designs in vector. This allows our interfaces, icons and other graphics to scale to any size needed.
Second lesson: . In other words, design using points for all dimensions, then scale to various larger pixel densities when exporting... instead of designing at the finite pixel resolutions of specific devices (2x, 3x, etc.) and having a ton of problems when exporting. Since scaling 2x graphics by 150% to generate a 3x version causes blurry outlines, this is not the best option. But scaling 1x graphics at 200% and 300% allows you to maintain visual clarity.
Layouts for standard iPhone sizes should be 375x667, not 750x1334, this is exactly the resolution in which it will be displayed. Most design tools don't differentiate between dots and pixels (Flinto is an exception to this trend), so designers can pretend that dots are pixels and then simply export the assets at 2x and 3x sizes.
Fake it 'til you make it!
This is a little more complicated, but still worth mentioning: sometimes devices lie. They pretend that their pixel-to-point conversion factor is one, for example, 3x, but in fact, it is 2.61x, and the source itself is scaled by 3x just for convenience. That's what the iPhone Plus does now. It compresses an interface made at 1242x2208 to a screen resolution of 1080x1920 (the phone's graphics chip implements this scaling in real time).
Design for iPhone Plus as if it were actually 3x. The phone itself will scale it to 87%.
Since the graphics are only slightly scaled down (87%), the result still looks decent - a 1px thick line on an almost 3x screen still looks incredibly sharp. And there are chances, although I don't have any inside information, that Apple will introduce a true 3x iPhone Plus in the future, since the necessary hardware capabilities may well be available for a product produced in such huge quantities. The current version of the iPhone Plus is simply there until that becomes possible.
(Bruce Wong wrote about iPhone screen 6 Plus).
Is this non-integer scaling approach acceptable? Everything is tested in practice. Is the result of such scaling quite invisible? Many Android devices also resort to scaling to fit the more standard pixel-to-dot ratio, but unfortunately some of them do not do it very well. Scaling such a plan is undesirable, since everything you want to be sharp and pixel-perfect at one scale will become blurry due to interpolation (for example, a 1px line becomes 1.15 pixels). Even if you're not a pixel-perfect fanatic like me, there's no point in denying that design elements need to be pixel-perfect to appear as sharp as intended.
Unfortunately, as pixel densities reach 4x and higher, the blur caused by non-integer scaling becomes much less subtle, so I predict device manufacturers will increasingly use this approach over time. We can only hope that performance shortcomings will hold them back!
Perception of scale through your eyes
Let's put all that pixel density aside for a minute and consider the question: should a button be the same physical size on different devices? Of course, we're just using a button as an example, but we could consider an icon, text, and toolbar. Should these elements be the same size on all devices? The answer depends:
- From accuracy input method(sensor or cursor)
- From physical dimensions screen
- From distances to the screen
The last two factors go hand in hand; Because a tablet has a larger screen than a phone, we hold it much further away from us. And then there's the laptop, the desktop, the TV... the distance increases with the screen size.
The button on your TV screen will be the size of your phone - because it has to be that way for that distance.
Here's a less dramatic and very true example: app icons on a tablet should be larger than the same icons on a phone, and this is achieved in two ways: using a lower pixel density or changing the sizes of the buttons (i.e. point size).
Lower pixel density
Larger screens that we use at a distance usually have lower pixel density. A TV can have a resolution of 40 pixels per inch! For regular TV viewing, this is quite acceptable. The iPad's retina screen has a resolution of about 264ppi, while the iPhone's retina screen has a resolution of 326ppi. Because the pixels on the iPad are larger (the screen is less dense), the entire interface becomes slightly larger. This is due to the extra distance between the user's eyes and the iPad screen.
Different sizes
But sometimes, using a lower pixel density is not enough... individual design elements need to be even larger. This happened with icons on the iPad. On the iPhone they are 60x60 pixels, but the iPad's larger screen gives more space, so 76x76 icons are more practical.
Resizing according to different devices adds more work to designers. This is one of several scenarios where Apple devices require larger sizes than Android devices! Fortunately, this is not a typical case for app icons.
Health inspection?
We have just discussed a lot of difficulties that will have to be faced. Fortunately, interface design only concerns the use of density-independent units (like pt or dp). Things get more complicated with app icons, but there are templates to help with this. Here is a list of resources on this topic:
Important Resources
Google Device Metrics: Impressive list of specifications for devices of all types (Android, iOS, Mac, Windows, etc.). Find out the screen dimensions, pixel density, and even the approximate distance at which the screen is located from the user's eyes. ScreenSiz.es is a similar resource.
: These design templates (available for all major design editors) are very useful, both in a practical sense and for reference on the latest specifications for Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone etc.
: A comprehensive guide by Sebastian Gabriel that covers even more detail and practical techniques for Android and iOS designers.
There are also some resources on pixel density for designers.
Tags: , , , , ,Contents:
Theoretical page and calculations
The concept in question stands for pixels per inch, that is, the number of pixels per inch. Also pronounced pee-pee-ay.
It literally means how many pixels fit in one inch of the image that we see on a tablet or other technology.
This concept is also called the unit of measurement of resolution. This value is calculated using two simple formulas:
Where:
- dp– diagonal resolution;
- di– diagonal size, inches;
- Wp- width;
- HP- height.
The second formula is designed to calculate diagonal resolution and is based on the use of the famous Pythagorean theorem.
Rice. 1. Width, height and diagonal size on the monitor
To show how all these formulas are used, let's take for example a 20-inch diagonal monitor with a resolution of 1280x720 (HD).
Thus, Wp will be equal to 1280, Hp – 720, and Di – 20. Thanks to the presence of these data, we can calculate pi-pi-ai. First we use formula (2).
Now let’s apply these data to formula (2).
Note: In fact, we got 73.4 pixels, but there cannot be a non-integer number of pixels, only integer values are used.
To understand how much this is in centimeters, a more common value for our area, you need to divide the resulting number by 2.54 (there are exactly so many centimeters in one inch).
So in our example it is 73/2.54=28 pixels. in centimeter.
In our example it is 73, and 25.4/73 = 0.3. That is, the size of each pixel is 0.3x0.3 mm.
Is it good or bad?
Let's figure it out together.
Is this quantity important?
Pee-pee-ay, based on the above, affects the clarity of the image that the user receives on his screen.
The higher the value of the indicator, the clearer the image the user will receive.
In fact, the larger this value, the fewer “squares” a person will see.
That is, each pixel will be small, not large, and this will make it possible not to pay attention to it at all. The value of the characteristic can be clearly seen in Figure 2
Rice. 2. The difference between indicators is less and more
Of course, no one wants to have a picture like the one shown on the left on theirs.
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 do not have the opportunity to evaluate the picture with your own eyes and understand how clear it is.
Finding an indicator in the characteristics of the same smartphone is usually easy. It is usually contained in the "Display" section. An example can be seen in Figure 3.
Rice. 3. Indicator in the characteristics of the smartphone
Important! On the Internet you can often find information that ppi is more important than, for example, resolution or diagonal and some of these characteristics should play a more important role when choosing. This is not true at all. As we can see above, all these three concepts are inextricably linked.
Advantages and disadvantages
Number of pixels per inch has a positive effect on the clarity of the picture, and, accordingly, on its quality.
It will be much more pleasant for the user to look at an image with a higher indicator.
In Figure 2, the photo on the left has 30 ppi, and the photo on the right has 300. Below is another similar example.
But there is this concept and cons. In particular, we are talking about the autonomy of the device.
Everything is quite simple - if the picture is clear, a smartphone, tablet or other device with a screen will not be able to work for a long time without recharging.
You can even make a simple rule: the more pi-pi-ay, the shorter the battery life.
Of course, for a PC this is not a problem, since there the monitor is always plugged in, but for some phones this can become a big problem.
Therefore, when choosing a device, be sure to pay attention not only to the number of pixels. per inch, and also per inch!
Thus, we smoothly moved on to the topic of choice.
About choosing displays
There are several rules that will help you choose the display correctly, taking into account the pixels, they sound like this:
1 Be sure to pay attention to the display type. The priority should be AMOLED, even better SuperAMOLED or OLED. Such devices will always be better than.
Let's say we come to the store and see, for example, two excellent devices - and. Their price is almost the same, the second device, by the way, is more powerful.
The specifications indicate that Xiaomi has 400 ppi (for some reason, some write 400.53, but, as we said above, there cannot be a non-integer number of pixels).
Samsung has 267 PPI and the resolution is correspondingly lower (1280x720 versus 1920x1080). The diagonal is the same - 5.5 inches.
But for some reason the picture is clearer on . And all due to the use of proprietary SuperAMOLED+ technology. You can see this for yourself if you pay attention to Figure 5.
2 Try to find an opportunity to look at all the samples you have chosen in person. You can first look at their options on the Internet, and then go to an electronics store and see how they actually display pictures. A personal view in this case is simply irreplaceable.
3 Pay attention to the battery. If we talk about smartphones, to ensure long-term operation of the device with a clear image (high ppi and/or good technology), the battery capacity should be about 3000 mAh.
For tablets it should be even higher, since their diagonal is larger,
4 Remember: the smaller the diagonal and the higher the pixel density (the number of pixels per inch), the sharper the image. Don't deceive yourself - you won't be able to achieve a very clear picture with a huge display and a small pi-ay value. It is important to maintain a golden mean here.
5 Coverage is also important to consider. This way, matte screens will produce a less clear and saturated image, but will be more gentle on your eyes.
But glossy displays will negatively affect your eyesight, but the image on them will be much more beautiful. In this case, their ppi value may be the same.
This is mostly relevant. If you work on a computer full time or even more, it is better to go for the matte option.
All this will allow you to choose the most suitable display for yourself.
Results
ppi or pi-pi-ai is the pixel density or the number of pixels per inch of an image. To convert the figure to centimeters, you need to divide it by 2.54.
There cannot be a non-integer quantity, only a whole.
The higher you show it, the clearer and more pleasant the image will be to look at.
When choosing other equipment that contains, 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.
Also, be sure to look at the battery capacity and maintain a happy medium between the number of pixels. and screen size.