Learn more about pixel density in mobile interface design. Is high pixel density important on a smartphone display?

Literally everywhere you can hear about DPI and PPI, how important and necessary they all are, you even need to manage to use them all at once. Oh, yes, and in web design it’s a must, otherwise, Well, what kind of webmaster are you?! But what do size specifications actually mean and how can a web designer use them? Do I need to pay attention to this at all or should I just use the default settings?

Basically, it all depends on your project. If you know in advance for what environment you are creating a website or logo and how your work will be used in the future, you can immediately determine the values ​​​​and the need to work with DPI and PPI. But, meanwhile, before starting work with any project, it would be a good idea to remember these values ​​and refresh some points in your memory.

In this material we will talk about DPI and PPI in more detail and using examples to understand when and in what cases a web designer should pay attention to them. Let’s immediately say that the article may seem “dry” and boring, but we are sure that you will find interesting points in it. Oddly enough, but PPI values they may or may not influence design and images, even third-party ones PSD files and copied data. And then there is the PPI of the monitor. And imagine that all this is connected. At the end we will summarize and summarize all the conclusions.

Pixels andPPI

Pixels, as a part of images, refer to the smallest units that lay out a certain picture on a grid. The ratio of the number of pixels per inch is PPI. Accordingly, the larger this amount, the clearer the image will be, the smallest details of the composition will become visible to the eye. Pixelation occurs when the number of pixels per inch is very small. Accordingly, each pixel acquires very clear edges that are clearly visible. There is no crowding among them.

PPI is a measure of image quality and is used by default in Photoshop. When working with photographs, you can change the image sampling or resampling (change the number of pixels) or change the image size (the size of each pixel, but not the number of pixels). In Photoshop, in the resize window, you need to monitor the ratio of pixel counts and resampling (detailing and increasing the number of pixels).

The web standard for images is 72 pixels per inch. With this value, images look beautiful if they are initially of good quality (not distorted, clear). Keep in mind that your photo should always be full size and wide to completely fill the frames and placement boundaries. For example, a large image in the header Facebook pages. The image must be 851 pixels wide. To prevent pixelation at a resolution of 72 pixels per inch, the width of your finished image should be almost 12 inches wider.

Compare the difference.

AND

Surprisingly to textPPI also has its influence. Similar to how large number pixels per inch makes the photo clearer, the text also becomes readable. Fonts with a high PPI are easier to read and more legible, even if the letters are created at a small size. In other words, text can be clear or unclear, just like photographs.

Finally, when we think about the role of pixels in web design, we need to remember that the browser window is constantly changing within the same user. A few years ago, everyone tried to have one application form, one window size and, accordingly, sites were created to meet these requirements. Nowadays, more and more web design is created responsively, but working in scalable layers, You can allow images to grow proportionally to the browser window, but still remain within their actual size. This allows the pictures to maintain their integrity and quality.

While PPI is important for the Internet, these values ​​can do little useful for printing. For printing specifications, it is more appropriate to use dots per inch or DPI.

Points andDPI

The term DPI or dots per inch was developed to deal with image quality for printing. When a photograph is printed, it is made up of hundreds of thousands of tiny dots that are layered on top of each other and next to each other in different colored inks. Also at these points the ink mixes, thereby forming a larger range of colors and shades. The DPI value is the number of printed dots per inch. The higher this value is, the smoother and better the image looks, and the gradient transitions become more realistic.

But in everyday life, people often useDPI to refer to any resolution and is confused withPPI. If you are working with a project that is not intended for printing, then there should be no confusion or problems with DPI. If you are creating a logo that will be used both in print (business cards, letterheads, etc.) and on the website, then you need to create high-quality images from the beginning. Create a high DPI copy of the image that will be used exclusively for printing.

When we look at the screen, it is unlikely that anyone is able to see the difference between the two identical images, created at 100 DPI and 300 DPI. The reason is that monitors do not display graphics in dots. DPI values ​​don't matter to them.

For printing, the standard is considered to be 300 DPI. This is important so that the printer itself cannot change this value if it is not in the properties of the working file. Otherwise, the image will be distorted, even the color shades may change.

DPI also comes into play to transform the printed element into digital format. The higher the value, the higher the quality of the scanned document. In general, high-quality photos have a DPI of 200 at actual size. But it’s always worth trying to scan with high parameters, then it will be more convenient to edit the data, enlarge and print again.

Megapixels

Since we are talking about the need to use high-quality images in web design, it is worth mentioning the Megapixel form of one pixel. The megapixel unit is used by professional cameras so that users can understand what it is, high quality photography and how beautiful it is compared to usual options. If we look at the numbers, one Megapixel is equal to one million pixels.

All digital images, regardless of the source, consist of pixels (not dots). Megapixels only help to understand the resolution and quality of the photo that will be output. It's like simplifying calculus: centimeters, meters, kilometers.

Numbers in web design

A pixel has no size, no meaning, no meaning outside of its representation in mathematics. He just link between physical screen size (inches), screen resolution (pixels per inch), and screen pixel size (pixels). Regular (non-Retina) desktop screens typically have a PPI between 72 and 120. Designing with a PPI between 72 and 120 ensures that your work will have roughly equal proportions in size.

The general formula for calculating and calculating resizing depending on resolution and size looks like this:

Here's an example: The screen of the LG w2253tq 22-inch monitor has a PPI = 102, which means that it displays 102 pixels per inch of screen area. The width of the screen itself is approximately 18.8 inches, so 18.8 * 102 is approximately 1920, which forms the native screen resolution of 1920x1080 px.

We found a convenient PPI calculator for monitors, we think it will be useful to you.

For example, you drew a blue square measuring 102x102px on a screen with a PPI of 102.

This square will have a physical size of 1" x 1". But if the user's screen has a PPI of 72, your blue square will be larger in physical size. Since PPI = 72, it would take about an inch and a half (roughly rounded) of screen space to display a square 100 pixels on a side. Using the formula above, this is calculated easily and quickly.

That is why each user sees website design differently. The goal of the webmaster is to find the best compromise that will be convenient for the majority, since not everyone has the same screen as you.

Another interesting point

What happens if you change the PPI value in Photoshop and create projects at PPI 100 or 120. The fact is that digital content is initially measured in pixels, regardless of the PPI value. The design is not influenced by PPI as such. That is why, when it is necessary to enlarge images, multipliers are used.

We create in Photoshop new document and select PPI 72. Create a square 102x102 pixels and text 14 points.

Then similarly create a square and text in a document with PPI 102.

Let's compare what happened. The text in the second case (native for the monitor) became larger, but the square remained the same, it did not change. The fact is that Photoshop automatically scales the value of the points in accordance with the PPI of the document. This is how the text size increased during rendering.

As for the square, its values ​​were specified in pixels, so its size did not change. The pixel never changes, no matter what PPI you choose. In order for the square to change, a different PPI of the monitor itself, the screen, is needed in size. You can't do this programmatically.

So remember that in web designPPI only affects the perception of your layout, images, and block sizes. And also on the process of working with fonts, which are measured in points (accepted as such).

There is another option if you have several different PSDs with different settings in PPI files. What will happen inPhotoshop? The application will automatically adjust the sizes of elements in proportion to your screen and PPI values. The same will happen if you work with a website layout in a resolution of 72 PPI, and insert a logo from a 100 PPI document. The image will be resized automatically and this may cause problems.

However, there is a solution. Initially work at the generally accepted resolution of 72 PPI. This is the default setting in Photoshop. But if clients or acquaintances/friends tell you that something is wrong with the layout, think about how they open it and what application settings they have.

In addition, it is worth remembering vector images , which scale well and prevent the need to create multiple pixel images with different PPIs. Vector will automatically change depending on the multiplier, monitor, resolution and more. But using a vector has its limitations. For example, you can’t create complex graphics: shadows, gradients, etc. A vector can be very heavy, and therefore the user’s system can simply “freeze” on those sites where a lot of vector data has to be processed.

Conclusions

By using the appropriate PPI or DPI values ​​for your project, you can influence its quality and appearance. At the same time, PPI is intended exclusively for working with digital content and affects the quality of images.

PPI plays an important role in web design as it affects images and the ratio of elements. On the one hand, photographs can be blurry or clear, on the other hand, the dimension can change if it was not originally expressed in pixels. If you want the entire design to look great, then use only your native monitor's values ​​or default values. Pixels don't like half measures. There is no such thing as half a pixel or one and a half pixel. There are one or two, so accuracy is important above all. And you can achieve it only by working with parameters that are native to you.

Another point is that many users themselves change the resolution of the site page to make it more comfortable to read/watch. Here the site design can look depressingly bad and unsightly. But it’s unlikely that anything can be done, since convenience is important to visitors. Therefore, remember that file resolution is usually used at 72 PPI. It will save more space on the server. Image files will be small and load faster . And although they will be smaller than the original photos, in most cases, they will be larger on the users’ screen, sinceThe PPI of monitors is different for everyone and mostly 100+PPI.

There is a wide variety of displays available, but we want to give you a few recommendations that can help you choose the right screen. The quality of the transmitted image depends on the screen resolution, pixel density, screen type, and even size. There are many factors that determine whether a display is good or not. So, it will probably be useful for many to read which screen should be chosen for a smartphone or tablet.

Screen resolution and pixel density:

When you read information about a particular device, the first thing you see about the display is the size and resolution of the screen, as well as the number of pixels per inch, i.e. pixel density. Due to the sheer number of Android devices and therefore their price range, there is a wide range of different screen resolutions available, so we can only look at the most popular ones.

When a specific display resolution is given, it usually includes width and height. Here are some of the most popular screen resolutions:

• 240 x 320. This display resolution is most often used in devices with very small screens, or in budget phones (which are dying out).
• 320 x 480. This resolution is also most often obtained by phones with small screens, usually up to four inches.
• 480 x 800 (WVGA). Just a few years ago, this was the resolution that was used in devices high class, such as Samsung Galaxy S2. Now, this resolution is typical for mid- and budget-class smartphones that have a display of less than five inches.
• 960 x 540 (qHD). Previously, this resolution was used in high-end devices. And now middle-class phones have it.
• 1280 x 720 (HD/720p). Today, this screen resolution is typical for high-end smartphones. Sometimes they meet budget phones and tablets with the same resolution.
• 1920 x 1080 (Full HD/1080p). Typically, such high resolution is used when creating modern TVs. This year, smartphones/tablets with Full HD displays have begun to appear more and more often. However, Full HD screen can currently be found exclusively on powerful smartphones and tablets.
• 2560 x 1600 (WQXGA). As you probably understand, this is a super high resolution display. Only the most powerful devices can support it. For example, the Nexus 10 tablet received exactly this screen resolution.

So, it has now become clear that smartphones are more low quality set a corresponding low screen resolution, and larger displays are characterized by a high display resolution, of course, and the price in this case will not be small.

When it comes to pixel density, it is important when it comes to overall screen sharpness. For example, when you are browsing the web or reading e-books, viewing comfort depends precisely on the pixel density, which varies depending on the screen resolution and its size. If the display is large and the resolution is very low, then the pixel density will be low.

Today, a pixel density of 300ppi is considered excellent because the user is unlikely to notice any errors in the picture or see even a single pixel. Pixel densities below 200ppi are typical for low-power devices, and display quality is correspondingly lower. Therefore, it is worth choosing smartphones and tablets with a pixel density in the range from 200 to 300ppi and higher.

What is an LCD display?

LCD stands for liquid crystal display and is the most popular type of screen for mobile devices. It is in such high demand because of the good image quality it delivers and its relatively low power consumption.

TFT displays:

And this is the most popular type of LCD display, which stands for Thin Film Transistor, i.e. thin film transistor. It contains an active matrix, which actually controls the transistor. And the transistor, in turn, is responsible for “turning on and off” each pixel. This improves reaction time and provides greater image contrast. Moreover, other types of LCD displays cannot do this, but are more expensive and consume significantly more energy.

IPS displays:

Some high-end smartphones and tablets use IPS screens, which are a type of TFT display. The IPS display corrects all the shortcomings that LCD screens have - it is able to reproduce clearer and more expressive colors, while providing a wide viewing angle. This is great for those users who like to watch movies in large groups - no matter where a person sits, the picture will remain bright and clear.

Super LCD displays:

Despite the fact that the creator of the first Super LCD screen technologies is Samsung, these displays are most often used by HTC. This technology is able to eliminate glare, while such a screen consumes a small amount of battery power, and when outdoors, the user does not have to strain his eyes to see the image on the screen. The Super LCD display provides superior outdoor visibility than conventional LCD screens.

Latest version Super LCD screen called LCD3 consumes even less power than all previous versions. This type of display has already been received HTC smartphones Butterfly, HTC Droid DNA, HTC One.

What is an OLED display?

The abbreviation OLED stands for Organic Light-Emitting Diode, and the OLED display itself consists of an organic polymer. As soon as energy is available, the polymer lights up and, accordingly, the screen turns on. OLED display has many advantages over LCD screens because it is thinner, brighter, consumes less power and provides wide angles review. This increases contrast and response time.

The most popular type of OLED displays are AMOLED screens. AMOLED can be deciphered as Active Matrix Organic Light-Emitting Diode. These displays consume much less power than standard OLED screens.

The largest manufacturer of AMOLED displays is, of course, the South Korean company Samsung, which also sells Super AMOLED displays. Most smartphones and tablets use Super screens AMOLED, but not a small amount modern devices work on LCD screens.

Samsung sometimes installs PenTile matrices on various types AMOLED screens. This uses two sub-pixels, each using RGBG (Red-Green-Blue-Green) technology for beautiful color reproduction, instead of the standard RGB (Red-Green-Blue) model. Some criticize the PenTile sensor, saying it doesn't give the screen the sharpness it needs, but most users agree that the higher pixel density means there's no blur. PenTile matrix is ​​used to increase the service life of the display.

AMOLED vs LCD displays: which is better to choose?

Both of these technologies have their advantages and disadvantages. AMOLED displays are known for high contrast and deeper, more natural blacks, but LCD screens tend to produce more lifelike colors. While AMOLED displays are brighter, LCD displays can be viewed in direct sunlight and the picture will be clearer.

AMOLED displays are considered more energy efficient, while LCD screens consume less battery while browsing the web. In addition, one of the positive aspects of AMOLED displays is wide viewing angles, but LCD screens allow you to create a fairly high-quality picture even at low resolution, since they are based on RGB technology instead of PenTile RGBG.

Of course, if you want to purchase budget smartphone, then you are unlikely to find many devices with an AMOLED display. Users who are looking for a mid-range phone will face the same situation. Well, it’s easiest to choose a smartphone/tablet among high-end devices, because they have the highest quality displays and use the most advanced technologies.

In general, the choice of a device with a particular display depends on your wishes - if you want the screen to reproduce natural black colors and create high contrast, then choose AMOLED displays. If you want to get more natural colors and it is important for you that the picture is clearly visible even when straight lines hit the screen sun rays, then choose LCD displays.

Designer Peter Nowell wrote about pixel density in design on his blog mobile applications- explained what it is and talked about the problems that designers face when designing interfaces for different devices.

The editors of the “Interfaces” section publishes a translation of the material made by the Sketchapp team.

The video covers most of the topics in the article, but if you are interested in more details, continue reading

Pixel density is the number of pixels that fit within a specific physical size (usually an inch). On the first Mac computer was 72 pixels per inch - the number seems large, but in fact these were huge pixels, which not every graphics was suitable for.

Icons on a 1984 Macintosh computer. Designer Susan Kare

Since then, screen technology has advanced significantly - now even the simplest displays have a resolution of between 115 and 160 pixels per inch (PPI-pixel per inch). But a new chapter in this story began in 2010, when Apple introduced the iPhone with a Retina display - a super-sharp screen that doubled the number of pixels per inch. The result is graphics that are sharper than ever.

The difference is especially noticeable in the mail application icon and in the text

To maintain the same physical dimensions of UI elements, the number of pixels per inch had to be increased. The button, which previously took up 44px, now takes up 88px.

For cross-device compatibility, designers must produce graphics for both regular displays and Retina displays. But here another problem arose: now the designer cannot say that some element should be, for example, 44 pixels in height, because on another device the same element should be twice as tall.

The solution was points, or pt. One point corresponds to one pixel on pre-Retina screens and two pixels on Retina screens. Now, if a designer is told that the height of an element is 44 pixels, he can adapt this size to any pixel density ratio - 1x, 2x or 3x in the case of the iPhone 6 Plus.

PT and DP

Of course, this is all relevant not only for Apple devices. Every operating system - desktop or mobile - supports high ppi/dpi screens. Google came up with its own pixel-independent unit of measurement for Android, called DIP - density independent pixel, abbreviated as "dp". This is not the equivalent of iOS, 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, and so on).

You may be wondering about the physical size of the item. In fact, interface designers don't have to think about this, since they have no control over the hardware features of the screens of different devices. Designers need to know what pixel densities the manufacturer has adopted for their devices, and take care of preparing interfaces at 1x, 2x, 3x, and so on.

IN Apple devices there is no single pixel density that represents one point - it depends specific device(See “Perception of scale” below). In iOS, the point varies from 132 dpi to 163 dpi. On Android DIP is always 160 ppi.

Controlled Chaos

In the early days of high-resolution mobile devices, pixel densities were simply 1x or 2x. But now everything is different - there are a lot of pixel densities that the interface must support. Android has a great example: at the time of writing this post different manufacturers support six different pixel densities. This means that an icon that is the same size on all screens should actually come in six different variations. For Apple, two or three different sources are relevant.

Vector design

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, create a design using points for all dimensions, then scale to various larger pixel densities when exporting. Scaling 2x graphics by 150% to create a 3x version causes blurry edges, so it's not best option. But scaling 1x graphics at 200% and 300% allows you to maintain clarity.

The resolution of iPhone app layouts should not be 750x1334, but 375x667 - this is exactly the resolution in which the application will be displayed. Most designer tools don't differentiate between points and pixels, so you can assume points are pixels and then simply export the source at 2x or 3x size.

Fake it 'til it's true

It's worth mentioning that sometimes devices lie. They pretend that their pixel-to-point conversion factor is, for example, 3x, but in fact, it is 2.61x, and the source itself is scaled by 3x for convenience. This is what the iPhone Plus does, for example. It compresses an interface made at 1242x2208 to a screen resolution of 1080x1920.

Design for iPhone Plus as if it were 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 is a chance that Apple's future will introduce a true 3x iPhone Plus, as the required hardware capabilities may well be available for a product produced in such huge quantities.

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.

This kind of scaling is undesirable because anything you want to be sharp will become blurry due to interpolation. Unfortunately, as pixel densities reach 4x and beyond, the blur caused by non-integer scaling becomes much less subtle, so I predict that device manufacturers will increasingly use this approach over time. We can only hope that performance shortcomings will hold them back.

Perception of scale

• accuracy of input method (sensor or cursor);
• physical screen dimensions;
• distance to the screen.

The button on the TV screen must be the size of a phone - because otherwise it will not be visible while sitting on the sofa.

Here's a less dramatic and very true example: application icons on a tablet should be larger than the same icons on a phone. This is achieved in two ways: using a lower pixel density or different sizes icons

Low pixel density

Large screens that we look at from a distance usually have lower pixel density. A TV can have 40 pixels per inch - and, as a rule, this is enough. The pixel density of Retina displays on the iPad is about 264 ppi; on iPhone - 326 ppi. Because the pixels on the iPad are larger (and less dense), the entire interface becomes slightly larger. This is due to the extra distance between the user's eyes and the iPad screen.

In the industry high technology A new fun 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.

Started a new race, as has been customary in the last decade, Apple company. The first iPhone 4 smartphone with a high-definition screen was presented in June 2010 by himself Steve Jobs. It was a rather small 3.5-inch display by today's standards, which also received hardware resolution 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: screen pixel density regular smartphone– about 160 ppi, and in computer monitors and 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. They usually keep it at this distance from the eyes mobile phones, 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 Plait said that if you have acute vision, then you can easily distinguish individual pixels on such a screen even from 30 cm, but at the same time 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 retinal resolution of the 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 iPad tablet has a lower density of 264 ppi (105 pixels per cm), and 15- and 13-inch laptop screens MacBook Pro– 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 display for foreign markets. Full screen HD: 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.

New ten-inch screen resolution Google tablet Nexus 10 is even larger: 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 perspective television standard Ultra HD, or 4K, which provides 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 more electricity than similarly sized displays of lower resolution. 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 and with ordinary screens they 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 electronic device– ease of use. And if, as practice shows, gadgets are under Android control without much difficulty they cope with scaling the user interface and applications to higher resolutions, then Windows technology, oddly enough, has big problems with this.

For example, at Samsung tablet The Slate 7, equipped with an 11.6-inch screen with a resolution of 1366x768 pixels and a rather modest pixel density of 135 ppi, cannot be optimally configured user interface under Windows control 7: Either its elements look too small, or the edges of the windows are hidden beyond the borders of the display. And this is the standard interface 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.

Knowing what the difference between these quantities is and where they are used will be useful to many related to printing. Be it a designer, writer or other creator of printed materials.

What is ppi

Speaking in simple language- any raster image consists of pixels - colored rectangular dots. Let us clarify that raster image is an image whose structure represents a grid of pixels on a computer monitor. Popular raster formats - psd, tiff, png, bmp or jpg- editing of which is possible in the environment of specialized software, such as Adobe PhotoShop . Raster formats, of course, there are much more than those listed, but to understand what we are talking about, the given formats will be quite sufficient.

Returning to the pixels that make up a raster image, we can say that this is a kind of mosaic of colored dots. More precisely, squares. Each square can only have one color. But the image may contain pixels of different colors and shades. Due to this, the flow of one color into another is achieved.

For example, let's take a strip of 1000 such squares (pixels). There will be a black square at one end and a white square at the other. Between them there will be squares of different shades. Each square, moving away from sulfur and approaching white, will be slightly lighter than the previous one. With high magnification, we will of course see that all the squares are of different shades. But with distance, the illusion of a smooth flow of color or gradient will appear.

Since the image has not only length, but width, filling the plane, the ppi value shows how many squares (pixels) there are on the side of the conventional unit of measurement. Per pixel unit in raster images One inch is taken as the standard. Therefore, the 100 ppi marking tells us that there are 100 pixels per inch. In square inch of pixels at this resolution graphic image will be 10000 (100x100). Let us repeat that the color of a square inch can be anything. There is only one color per pixel.

What is lpi

Now, let's talk about transferring images from a computer monitor to paper. The monitor allows you to display not only the colors of the pixels, but also adjust their brightness. The same cannot be said about offset printing presses and printers. This is due to the purely technical impossibility of adjusting the paint level for each individual pixel on such devices. Printing devices only allow you to apply ink to certain places on the paper or not apply it.

Printers solved the problem of applying volumes of ink in specific areas with their usual elegance. They simply adjust the area of ​​the surface to be painted in a specific place on the paper. With this approach, even with the same thickness of the applied ink layer, the brightness can be adjusted by increasing or decreasing the printed dots. This process is called rasterization.

All offset printing machines operate on the screening principle. If you take a magnifying glass and look at offset printing, you can easily discern the dots that make up the printed image. Since the rasterization method appeared much earlier than the invention of computers, the size of the raster measurements has nothing to do with them. Initially, contact screens were used for screening. This is a transparent plate with fine shading applied to it.

The lpi value shows the number of lines on the raster plate per inch. This value corresponds to the number of dots per inch in printed rasterized images. This indicator applies only to rasterized images and is not used anywhere else. Specified parameter refers to rasterizing printing devices. It cannot be applied to a computer image because, although it is called a raster image, it is actually a halftone image.

Seeing the lpi value in the printer settings, you should understand that it does not affect anything other than the number of raster dots per inch. To better understand the differences between ppi and lpi, it is worth saying that the smallest part of an image on a computer is a pixel. The smallest part of an image on paper is a dot.

In principle, these indicators should match when printing an image. However, designers often make not just a mistake... They simply submit a layout for printing, which is several times larger than technical capabilities printing equipment. The most common image resolution among designers is 300 ppi. They bring the project with such permission to the newspaper. But when printing newspapers, rasterization of a maximum of 100 lpi is used. As a result, we get that the original file could be 9 times smaller.

What is dpi

Now let's look at the dpi value. This value only applies to rasterization printing device. In fact, the points that make up the lpi indicator are in turn made up of smaller points. A series of these tiny dots is equal to one pass of the laser on the photo drum or film. It turns out that many dpi are used to image one lpi.

It is clear that the higher the ratio of lpi to dpi, the higher quality printing we will get at the output. Here again the mosaic effect comes into play. The smaller its pieces, the more accurate and detailed it becomes. Dpi also affects lpi; the more small dots are used to create a large raster dot, the more accurate this dot will be. Images high resolution when printing they can use ratios from 150 lpi to 2540 dpi and higher. As for newspaper printing, a ratio of 100 lpi to 1200 dpi is sufficient.