Is high pixel density important on a smartphone display? What is ppi or how important is pixel density
In the high-tech industry, a new hobby is gaining momentum - placing as many pixels as possible per unit of screen area. Otherwise, we really missed technology competitions after the race for megahertz and megapixels became a thing of the past.
Apple started a new race, as has been customary for the last decade. The first iPhone 4 smartphone with a high-definition screen was introduced in June 2010 by Steve Jobs himself. It was a rather small 3.5-inch display by today's standards, but it received a hardware resolution of 960x640 pixels. The width of one pixel on such a screen was only 78 microns, and the pixel density was 326 pixels per inch (128 pixels per cm). For comparison: the pixel density in the screen of a regular smartphone is about 160 ppi, and in computer monitors it is less than a hundred.
The new screen was solemnly named Retina display - from the English word meaning “retina of the eye,” for which a beautiful explanation was given: some studies have shown that a person is not able to distinguish individual dots with the naked eye at a density above 300 ppi at a distance of 10-12 inches, then there is approximately 25-30 cm. Mobile phones are usually kept at this distance from the eyes, so this value was chosen, a little more than 300 ppi.
Of course, there were immediately those who wanted to challenge the results of these anonymous studies. Thus, the famous American popularizer of science and astronomer Philip Plate said that if you have acute vision, you can easily distinguish individual pixels on such a screen even from 30 cm, but for an ordinary person these points will not be noticeable.
Meanwhile, image quality expert and President of DisplayMate Technologies Raymond Soneira noted that the actual resolution of the Retina display is significantly lower than the resolution of the retina. The fact is that resolution largely depends on the angle at which we look at the object. For a person with perfect vision, the resolution of the eye is about 0.6 arc minutes, that is, 0.01 degrees. This means that two separate objects more than 5,730 feet, or 1.75 km, apart will be perceived as one point. Based on this, Soneira concluded that if we look at a smartphone at a distance of 30 cm, then the resolution of our eye reaches 477 ppi, and if we zoom in to 20 cm, then all 716 ppi. To get 318 ppi, you need to take the phone at a distance of 45 cm.
Soneira did not take into account one thing: in reality, there are not so many people with perfect vision, and the resolution of the retina of an average person with normal vision is about 1 arc minute. Having made the appropriate correction, we will get the coveted 300 ppi - a value that can be derived by simple calculations, and not at all by some mythical research that Jobs spoke about.
Since the resolution of the eyes depends on the distance at which we observe the object, in order to achieve the effect of a “pixel-free” image on the screens of different devices, different dot densities are required. Therefore, the 9.7-inch Retina Display of the iPad tablet has a lower density of 264 ppi (105 pixels per cm), and the 15- and 13-inch screens of MacBook Pro laptops have 220 ppi (87 pixels per cm) and 227 ppi (89 pixels per cm ).
Jobs was right about the main thing: in order to stop distinguishing the pixels on the screen of the gadget closest to the eyes - a smartphone, a density of slightly more than 300 ppi is enough. But the trigger had already been pulled, and a lot of companies got involved in a race that didn’t even make theoretical sense to increase the pixel density of the screen. The main thing is to overtake Apple, but whether there is any sense in this or not is of secondary importance.
As a result, we have already received a lot of curious products, when you look at them you don’t know whether to cry or laugh. Japanese Sharp was one of the first to release a smartphone with a five-inch Full HD screen for foreign markets: with a resolution of 1920x1080, the pixel density of the SH930W display is 440 ppi. The HTC J Butterfly has a screen similar in characteristics (or maybe simply exactly the same). The numbers are impressive, but, firstly, it is unclear why a pocket device needs Full HD resolution on a five-inch screen, and secondly, it can hurt your eyes by looking at the smallest details even on less high-tech devices.
The resolution of the ten-inch screen of the new Google Nexus 10 tablet is even higher: 2560x1600 pixels. That is, the same as a desktop monitor with a diagonal of 27-30 inches. The pixel density is 300 pixels per inch. Does this mean that Google suggests looking at the display of this tablet from a distance of 25-30 inches? Have you ever tried to watch a 50-inch TV from one and a half meters away? The feeling is about the same.
The apogee of madness is a prototype of a 9.6-inch screen developed by the Japanese company Ortus Technology. Its resolution is 3840x2160 pixels, which exactly corresponds to the promising Ultra HD, or 4K, television standard, which provides for displaying four times more pixels than the usual Full HD. The pixel density of this screen is 485 pixels.
Redundancy has already become an end in itself: no one needs screens, the pixels on which can only be seen under a microscope: they are already not visible - when traditionally used by healthy, sane people. Meanwhile, screens with increased pixel density themselves cause a lot of problems associated with both the hardware and software of the gadgets in which they are installed.
First of all, screens with higher resolutions and higher pixel densities consume much more power than similarly sized displays with lower resolutions. And this is only when displaying a static image! Support for ultra-high resolutions greatly tightens the requirements for the graphics subsystem, and in general for the computing resources of the device. This means not only a much more expensive platform, but also a sharp increase in power consumption. Modern smartphones, even with ordinary screens, can hardly withstand a working day without recharging, but what will happen if their energy consumption increases not even by one and a half times, but by at least tens of percent?
The software problem is directly related to the main requirement for an electronic device - ease of use. And if, as practice shows, gadgets running Android can easily cope with scaling the user interface and applications to higher resolutions, then Windows devices, oddly enough, have big problems with this.
For example, the Samsung Slate 7 tablet, equipped with an 11.6-inch screen with a resolution of 1366x768 pixels and a rather modest pixel density of 135 ppi, cannot optimally configure the user interface running Windows 7: either its elements look too small, or the edges of the windows are hidden outside the display. And this is the standard interface of the operating system! What can we say about applications from third parties, whose developers do not particularly think about scaling for different resolutions: many of them are designed for 96 ppi, and not a pixel more! And even in Windows 8, where, as Microsoft boasted, the problem with the interface has been practically solved, it is still as relevant as the problem with third-party applications, the windows of which have to be examined under a magnifying glass.
One way or another, the start has been given, and we are witnessing another race for beautiful numbers, the meaning of which is no more than in flying with Siberian Cranes. We can only hope that the companies involved in this dubious event will come up with some truly useful developments and technological breakthroughs. Otherwise, we again risk getting useless 20-megapixel point-and-shoot cameras with cloudy plastic optics.
I don't know everything, so if you think I'm wrong somewhere, or you need to clarify something, or you have suggestions or questions to improve this guide, send an email (in English) to [email protected]. You can also find me Twitter, or Facebook.
What are DPI and PPI
DPI or (Dots Per Inch) is a measure of the spatial density of dots originally used in printing. This is the number of ink drops your printer can fit into one inch. A lower DPI results in a less detailed image.This concept is applied to computer screens called PPI (pixels per inch). Same principle: counting the number of pixels the screen can display per inch. The name DPI is also used in screens.
Windows computers have a default PPI of 96. Mac uses 72, although this value hasn't been accurate since the 80s. Regular, non-retina PCs (Macs too) will have between 72 PPI minimum and around 120 maximum. Designing with a PPI between 72 and 120 will ensure your work has roughly the same aspect ratio everywhere.
Here's an applied example: a 27-inch Mac Cinema screen has 109 PPI, which means it displays 109 pixels per screen inch. Width with frame is 25.7 inches (65 cm). The width of the actual screen is approximately 23.5 inches, so 23.5 * 109 ~ 2560, making the physical screen resolution 2560x1440px. *I know that 23.5 * 109 is not exactly equal to 2560. It is actually +23.486238532 inches. It would be more precise than pixels per centimeter, but you get my point.
Impact on your design
Let's say you draw a blue square 109 * 109 px on the screen specified above. This square will have a physical screen size of 1*1 inch. But if your user has a 72 PPI screen, the blue square will look physically larger since at 72 PPI the screen will need approximately an inch and a half to display your 109px blue square. See below for a simulation of the effect.
Remember: Color and resolution differences aside, keep in mind that everyone will see your design differently. You should aim for the best compromise and build for the largest percentage of users. Don't assume that the user has the same screen as you.
Screen resolution (and native resolution)
Screen resolution can have a huge impact on how a user perceives your design. Fortunately, since LCD monitors have replaced CRTs, users now tend to have native screen resolutions with a good screen size to PPI ratio.Resolution determines the number of pixels displayed on the screen (for example: 2560 * 1440px for a 27-inch Cinema screen) 2560 width, 1440 height. Now, of course, when you know what PPI stands for, you realize that it cannot be a unit of measurement of physical size. You can have a 2560x1440 screen the size of your wall and another the size of your head.
Modern LCD monitors have a default, aka native, resolution that will handle the exact number of pixels the screen is capable of displaying. Older CRT monitors are a little different, but since they can be considered dead, let's not go into detail (and not affect my partial understanding of good old TVs).
Let's take our 27 inch Cinema screen, which can display 109 PPI at a native resolution of 2560 * 1440 px. If you reduce the resolution, elements will appear larger. After all, you only have 23.5 horizontal inches to fill with virtually fewer pixels.
I said virtually, because in this case it will be so. The screen has a native resolution of 2560 * 1440 px. If the resolution is reduced, the pixels are still displayed at 109 PPI. To fill that space and the entire screen, your OS will stretch everything, your GPU/CPU will take all the pixels and calculate them with a new ratio.
If you want to make a resolution of 1280 * 720 (half the width, half the height of the previous one) on 27 inches, then your GPU will have to simulate twice the pixel size to fill the screen. What will be the result? So - blur. While dividing by two aspect ratios will look pretty good because of the simple divisor, if you want 1/3 or 3/4 of the aspect ratio then you will end up with numbers with decimal places and you CANNOT divide the pixel . See example below.
Note: left: rendering an OSX window in native resolution (1400*900px): right: rendering an OSX window in a simulated lower resolution (1024*640px retina).
Let's look at another example below. Let's take a 1 pixel line on a screen with native resolution. Now let's make the resolution 50% smaller. To fill the screen, the CPU will have to generate 150% of the image by multiplying everything by 1.5, 1 * 1.5 = 1.5, but you can't halve the pixels. What it will do is this: it will fill the surrounding pixels with a fraction of the color, creating a blur.
Note: on the left is a 1 pixel thick line at any default resolution, on the right is a 1 pixel thick line at a 150% lower resolution.
So if you have a Retina Macbook Pro and want to change the resolution, it will show the window below letting you know (in the screenshot below) what that resolution will "look like" 1280*800px. It uses the user's experience of screen resolution to express the size relationship.
This is a very subjective view because it uses pixel resolution as a unit of physical size, but it is true, at least from their point of view.
Remember: If you want to always see your design (or any design) pixel perfect, never use a non-native resolution for your screen. Yes, you may be more comfortable with a smaller ratio, but when it comes to pixels, you want to be as precise as possible. Unfortunately, some people use resolution as a way to better see what's going on on the screen (especially on the desktop) when they should be using accessibility settings. This will still make your design look bad, but from this point of view, users are looking for improved readability, not shine.
What is 4k
You may have heard a lot about the term 4K lately (at least when I wrote about it in early 2014), 4k is quite a trendy topic. To understand what it is, let's first understand what "HD" means.
Be careful, this is a gross oversimplification. I will only talk about the most common resolutions. There are different categories of HD. The term HD applies to any resolution starting from 1280x720px or 720p for horizontal lines of 720 pixels. Some may also call this resolution SD (standard definition).
The term Full HD applies to 1920x1080px screens. Most high-end TVs and phones (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5) use this resolution.
4K starts at 3840x2160 pixels. It is also called Quad HD and may be called UHD from Ultra HD. Simply put, on a 4K screen you can pack 4 1080p, in terms of pixel count. Another 4K resolution is 4096x2160. It is slightly larger and is used for projectors and professional cameras.
What happens if I connect a 4K display to my computer
Modern OSes don't scale 4K, meaning that if you connect a 4K display to a Chromebook or MacBook, it will take the assets with the highest DPI, in this case 200% or @2x (twice the size) and display them at the normal ratio. This will make everything look good, but small.
Hypothetical example: if you connect a 12" 4K screen to a computer with a 12" high resolution (2x) screen, everything will look half the size.
Remember:
Monitor Hertz
Here we take a little break from PPI and screen resolution. You may have seen that next to the screen resolution settings there is a value for the monitor's Hz. It has nothing to do with PPI, but just in case you were wondering, a monitor's Hertz - or refresh rate - is a unit of speed at which your monitor will display a fixed image or frame per second of time. A 60Hz monitor will be able to display 60 frames per second. Monitor 120 Hz - 120 frames per second, etc.
In the context of a user interface, the Hertz(Hz) value will determine how smooth and detailed your animation will appear. Most screens run at 60Hz. Please note that the number of frames displayed per second also depends on the processing and graphics power of the device. Connecting a 120Hz screen to an Atari 2600 would be completely useless.
For better understanding, take a look at the example below. The T-Rex goes from point A to point B with equally equal and fast steps on a 60Hz and 120Hz screen. A 60fps screen can display 9 frames during an animation, while a 120fps screen can display logically twice as many frames in the same amount of time. Animations will look smoother on a 120Hz screen.
Remember: Some people may say that the human eye cannot see more than 60 frames per second. It is not right. Don't listen and walk away laughing hysterically.
What is a retina display
Apple introduced the term "Retina" display for the release of the iPhone 4 smartphones. It is called Retina (translated as retina) because the device's PPI was so high that it would likely be impossible for a person's retina to see individual pixels on the screen.This statement is true for the screen sizes of the device range in which it is used, but while screens are getting better and better, our eyes are now trained enough to perceive pixels - especially for rounded UI elements.
Technically, they display twice as many pixels in height and width in the same physical size.
IPhone 3G/S had a diagonal of 3.5 inches and a resolution of 480 * 320px and 163PPI.
iPhone 4/S had a diagonal of 3.5 inches and a resolution of 960 * 640px and 326ppi.
BOOM! Exactly twice. Simple multiplier. So instead of being smaller, elements on the screen look twice as visually sharper because they have twice as many pixels and exactly the same physical dimensions. One normal pixel is equal to 4 retina pixels.
Consider the example below for direct application in a complex design.
Picture Note: It's difficult to simulate different image quality from two devices to a third device, i.e. the one you're looking at right now. The image quality will look twice as good and sharper for a retina music player, even occupying the same physical space. If you want to check it out for yourself, I used one of my free programs, you can download the source code.
The term "Retina" display is owned by Apple, so other companies will use "HI-DPI" or "Super power pixel maximum sp33d display" (I'm about to trademark the latter) or none of that at all. All you have to do is read the device specifications and find out what the DPI and screen size are (how fun).
Remember: Apple products are a great way to become familiar with DPI conversions and understand the differences between resolution, PPI, and physical size ratio because you only have to worry about 1 multiplier.
What is a multiplier
When it comes to converting your design for all possible PPIs, the multiplier will be your mathematical savior. If you know the multiplier, you no longer have to worry about the detailed characteristics of the device.Let's take our example of the iPhone 3G and 4. You have twice as many pixels in the same physical size. Therefore your multiplier is 2. This means to make your graphics assets compatible with 4G resolution, you simply have to multiply the size of your graphics assets by 2 - and that's it.
Let's say you create a 44*44px button, which is the recommended iOS touch target (I'll talk about this later). Let's call it the typical button name "JIM".
To make JIM well on iPhone 4, you need to create a version that is twice the size. Which is what we do below.
Note: left - 2px rounded corners 16px font size, right 4px rounded corners 32px font size.
Quite simple. JIM now has a Jim.png version for normal PPI (IPhone 3) and a version [email protected] for 200% PPI (iPhone 4).
Now you ask, “But wait! I'm sure there are other multipliers than just two. Yes, there is, and this is where it becomes a nightmare. Okay, maybe not a nightmare, but I'm sure you'd rather spend the day ironing your socks than dealing with multiple multipliers. Luckily, it's not as scary as you think; we'll get to that later.
Let's talk about units first, because now you'll need a unit other than the pixel to describe your multi-DPI designs. That's when it's time for DP and PT.
Remember: For each design you work on you need to know the multiplier. Multipliers hold this world of chaos of screen sizes and PPI together and make it understandable to humans.
What are DP, PT and SP
DP or PT is a unit of measurement used to describe your layouts, created for multiple devices and DPIs.DP or DiP stands for Device independent Pixel and PT stands for Point. PT use Apple; DP is used in Android, but essentially they are the same. In short, they determine the size regardless of the device multiplier. This is very helpful when discussing technical issues. tasks between subjects as diverse as the designer and the engineer.
Let's take our previous button example, "JIM".
Jim is 44px wide for regular, non-retina screens, and 88px wide for retina screens. Let's get technical and add 20px padding around Jim because he loves white space. Then the indentation will be 40px for retina. But it doesn't really make sense to take retina pixels into account when designing on a non-retina screen.
We will proceed as follows: we will take as a basis 100% the aspect ratio of a regular non-retina screen.
In this case, the JIM will be 44*44DP or PT in size and 20DP or PT padding. You can give your tech. job in any PPI, JIM will still be 44 * 44dp or pt.
Android and IOS adapt this size to the screen and convert with the correct multiplier. This is why I think it's easier to always design with the default PPI for your screen.
SP is used separately from DP and PT, but works the same. SP stands for Scale-independent pixels and is used to determine font sizes. SP depends on the font settings of Android device users. For a designer, the definition of SP is the same as the definition of DP for everything else. Take as a basis what is readable at 1x scale (16SP, for example, is a great font size for reading).
Remember: when you compile technical task, always use resolution/scale independent values. Always. The more the screen size/resolution differs, the more significant this is.
PPI Setting
Now that you know what PPI, retina and multiplier are, it's important to say something I haven't been asked about much and it's confusing: "What happens if I change the PPI configuration in my graphics editor?"If you asked yourself this question, it means that you are somewhat familiar with image editors. Now it is very important to understand something that took me some time to understand: For everything not printable, pixel dimensions are used, regardless of the initial PPI configuration.
PPI settings in programs are a legacy of printing. If you're only designing for the web, PPI won't have any effect on the size of your bitmap. This is why we use multipliers rather than specific PPI values. Your canvas and graphics will always be converted to pixels by the software using the appropriate multiplier.
For example. You can try this yourself in a program that allows you to adjust PPI, for example Photoshop. I drew an 80*80px square and 16pt text in Photoshop with a 72ppi configuration. The second is the same with the 144PPI configuration.
As you can see, the text has become quite large, twice as large, while the square remains the same. The reason for this is that the program (Photoshop in this case) scales (as it should) the pt values based on the PPI value, resulting in doubling the text rendering size at double PPI settings. On the other hand, what was defined by pixels - the blue square - remains exactly the same size. A pixel is a pixel and will remain a pixel regardless of PPI settings. They differ from each other only in the PPI of the screen that displays them.
It's important to remember that when designing for digital, PPI will only affect how you perceive your design and your workflow and pt graphics such as font. If you include source files with different PPI settings in your work, the program will resize any transferred image between the different files by the PPI ratio of the receiving file. This will become a problem for you.
Solution? Use a PPI (for 1x design, preferably in the range of 72-120) and stick to it. I personally use 72 ppi because it's the default setting in Photoshop, and most of my colleagues do the same.
Remember:
Handling PPI in iOS
It's time to dive into platform-specific design. Let's take a look at iOS devices at the beginning of 2014. Regarding screen sizes and DPI, with iOS there are 2 types of mobile devices and 2 types of laptop/desktop screens. In the mobile category, they of course have the iPhone and iPad.In the phone category you have the old 3GS (still supported by iOS6) and above. Only the iPhone 3GS is not with retina. iPhone 5 and above use a taller screen with the same DPI as the iPhone 4 and 4s. See the cheat sheet below:
Note: 1) 1x multiplier, 2) 2x multiplier, 3) 2x multiplier.
In September 2014, Apple introduced 2 new iPhone categories: iPhone 6 and iPhone 6 Plus. iPhone 6 is larger than iPhone 5 (by 0.7 inches), but with the same PPI. On the other hand, iPhone 6 introduces a completely new multiplier for iOS, @3x due to its size, 5.5 inches.
There's something special you need to know about how the iPhone 6 Plus handles its display relative to all other iPhones.
It reduces the size of images.
For example, when you design for the iPhone 6, you design on a 1334*750px canvas and the phone also renders 1334*750 physical pixels. In case of iPhone 6 Plus, the phone has a lower resolution than the image rendering, so you need to design for 2208*1242px resolution and the phone will downsize to 1920*1080px resolution. See the picture below:
Physical resolution is 13% lower than rendered resolution. This creates a couple of glitches like half-pixels, making very fine details blurry. Although the resolution is so high that it will only be noticeable if you look very close. So design on a 2208*1242px canvas and be careful with very small design elements like super dividers. See below for a simulation of what happens:
A guide for Chrome OS hasn't been released yet, but the Pixel (with touchscreen) isn't much of a use either. However, since all Chrome OS apps are web-based, I would suggest designing for touchscreens anyway. My recommendation would be to follow the Android guide for touch purposes.
Web, hybrid devices and the future
You'll be clear on what decision to make if you're developing for mobile. Make it for touch screens. If you're developing for desktop computers, choose non-touch ones. It sounds simple, but it ignores a new growing trend - hybrid devices.A hybrid device is a device that supposedly provides both touch and non-touch controls. The Chromebook Pixel, Surface Pro, and Lenovo Yoga are good examples.
What to do in this case? Well, there's no easy answer, but I'll go ahead and give one: choose touch controls. This is where the technology will go.
If you're designing for the web or something like that, think about touch controls.
Remember:
Graphics software
Software won't make you a designer, but choosing the right software for the task at hand can greatly improve your productivity and make your job easier. Software know-how shouldn't be your only skill, but learning and mastering the right tool will go a long way toward bringing your ideas to life.When it comes to handling DPI changes in interface design, all programs work differently. Some are better than others at specific tasks. Here are the most common:
Photoshop
The mother of interface design tools. Probably the most used tool today. There are an endless number of resources, tutorials, articles for it. Photoshop has been around almost since the dawn of interface design.As the name suggests, the program's first goal was not in interface design, but in retouching photographs or raster images. It evolved over the course of a year and with the birth of interface design, designers changed its purpose. This was partly because they were used to it, and because it was the only program that was able to do things as well as needed.
Photoshop is to this day the master of raster image editing and is still the most used user interface design program. Its decades-long legacy makes Photoshop a difficult program to teach. Using Photoshop like a giant Swiss Army knife, you can do anything, but not always in the most efficient way.
Since it is initially based on a raster image, it is DPI dependent, the opposite of Illustrator and Sketch are described below.
Illustrator
Vector editor, brother of Photoshop. As its name indicates, it is aimed at illustrators, but it can also be used as an interface design tool.Illustrator is suitable for print design, so its interface, color management, scale, rulers and units of measurement can be off-putting and it requires a few tweaks to be easily used for interface design only. Like Photoshop, it's an incredibly powerful tool, with a steep learning curve.
It differs from Photoshop in that it is DPI independent due to its basis on vector shapes. Unlike raster images, graphics made with vector shapes rely on mathematical formulas and will be recalculated in software without loss of quality.
Understanding the difference between raster and vector images is key to creating scalable visual designs and graphic assets.
If you want to get started using Illustrator for web/frontend design, I recommend reading
When buying smartphones, monitors and other equipment that has a screen, we often hear about such a thing as ppi, but few of us can say exactly what it is and what it affects.
But in fact, this characteristic is one of the main ones when choosing.
We will tell you what the actual meaning of this concept is (after all, you can find many myths on this issue on the Internet). Go!
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 the screen of a monitor, smartphone, tablet or other device.
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.
In exactly the same way, you can calculate the actual values of the number of pixels per inch in any device.
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 their smartphone or tablet. 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 this concept also has disadvantages. 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 on battery capacity!
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:
1Be 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 IPS, LCD and others.
Let's say we come to the store and see, for example, two excellent devices - Samsung Galaxy J7 and Xiaomi Redmi Note 3. 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 Samsung. And all due to the use of proprietary SuperAMOLED+ technology. You can see this for yourself if you pay attention to Figure 5.
2Try 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.
3Pay 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 than that of phones
4Remember: the smaller the diagonal and the higher the pixel density (the number of pixels per inch), the clearer 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.
5It is also important to consider coverage. 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 mainly relevant for choosing monitors for PCs and laptops. 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 this is shown, the clearer and more pleasant the image will be to look at. When choosing smartphones, tablets, PC monitors, laptops and other equipment that has 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. Also, be sure to look at the battery capacity and maintain a happy medium between the number of pixels. and screen size.
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).
You probably don't need a higher 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 use. 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.
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 versions - supports high ppi/dpi screens. Google came up with it 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, know that 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 the 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 crazy - there are a lot of pixel densities that the design must 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: we must draw everything on a 1x scale. 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, which is exactly the resolution it will be displayed in. 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 the iPhone 6 Plus screen).
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.
Changing sizes for 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 Designer's Guide to DPI and PPI: A comprehensive guide by Sebastian Gabriel that covers even more detail and practical techniques for Android and iOS designers.
