(Within mobile design)
Pixels (A picture element: a single dot of colour on a screen)
By turning them on and off at different intensities, any number of colours and brightness can be created. The colour black is created when all the dots are off, and white is created when red, green and blue are all on at the same time. In short, they are the physical lights on a screen that allow you to see what's being displayed where each one is so small you can't individually identify them without looking very closely.
Screen sizes (In inches)
This is the length of the screen diagonally from one corner to the other.
Resolutions (A width and height - e.g. 320wx480h)
The number of pixels going across the screen multiplied by the number of pixels going down.
DPI (Dots per inch or pixels per inch)
A number that measures how many pixels are contained either across or down in a single inch of screen space. Calculated by dividing the width or height of the screen by the number of pixels going across it.
A higher DPI means each individual pixel must be smaller and smaller in order to be able to fit into the available space, meaning the clearer the screen will be and the higher the level of detail that screen can draw.
Points (An abstract measurement for iOS)
The original iPhone had a screen resolution of 320x480. Then the iPhone 4 came along, and with it, the Retina screen. The Retina screen doubled the DPI while keeping the same screen size - meaning the number of pixels that fit into the same space had quadrupled (twice the number of pixels across and twice the number of pixels down). The resolution of the first Retina iPhone was therefore 640x960 pixels.
But all the old graphics had to be drawn at the same size on the higher density phone. If the phone had drawn all the graphics at a 1:1 scale like it did originally, everything would have been drawn at a quarter the size in the new screen - making every old app obsolete and broken. To prevent all those apps not working any more, Apple started using points as a way of separating the drawing of the graphics from the density of the screen they were on.
The point was created as a unit of distance that allows graphics to be scaled independently of the resolution of the phone they are running on. Now every iOS graphic could be drawn according to its points values and converted to display correctly on the new screen.
This size is always the same regardless of the resolution of the phone it is on, and comes from the 163DPI of the original iPhone.
Converting between pixel and point
- 1 pixel is always 1 pixel and is the smallest piece of a screen that can display colours.
- 1 point is always 1 point and is an abstract unit, only having meaning when referenced in relation to other points.
Points are different to pixels because they change size based on DPI:
On the iPhone, 1 point is equal to 1 pixel when the resolution is 163DPI. This was the case for all the iPhones before the Retina era.
At 326DPI, like the iPhone 4, 5 and 6, 1 point is equal to 2 pixels across and 2 pixels down, or 4 total pixels. Meaning your 100x100 image will render a quarter the size on a retina device if rendered by counting pixels alone.
At 401DPI like the iPhone 6+, 1 point is equal to 3 pixels across and 3 pixels down, or 9 total pixels.
Density Independent Pixels (A similarly abstract measurement for Android)
Android use this measure which is almost identical to points. It is the equivalent of roughly 160 pixels condensed into 1 inch of screen space, as compared to iOS’s 163. There is no other meaningful difference.
Is there an easy way to remember the difference between pixels and points?
Pixels are counted while points are measured.
What is Retina display and how does it differ from a regular display?
A display that has twice the pixel density (pixels or points of light per inch) of a non retina screen. The latest innovation from Apple also defines “retina HD”, which has 3 times the pixel density of the original iPhone.
What is considered high or low DPI?
A good DPI depends very much on how far away from the screen you typically are. That’s why the latest phones have the same or a higher number of pixels as a high definition TV, even though the size of the screens differs hugely. Mobile devices that have a higher DPI are typically better because they are held closer to your eyes (4-6 inches/10-15cm) and therefore you can make out a lower density far easier than you could if you were looking at something further away, like a tv (typically 4-6 metres/yards).
Is there a highest possible DPI?
There isn’t really a highest possible DPI (there might be some limitations when we are down at the level of atoms, but we are not really there yet), but there is a limit in terms of what the human eye can perceive. That limit comes in at about 2190DPI for a screen held at 4 inches for the average adult. After that, humans can’t perceive the difference, so there would be little benefit in improving the resolution past this point.
My thoughts:
It is necessary to have a basic understanding of what pixels are and how it effects the resolution. For screen the industry standard is 72ppi for images and this is something that I will be sticking to within my design. As I want to design my app to work within iOS it is important to understand their new unit of measure 'points', this will allow the graphics to scale independently of what screen resolution they are on. It is also good to understand that the reason mobile resolution can be as good or better than a tv, is because we are viewing them a lot closer, if we didn't this high quality would decrease as we would see the pixels, which would not be a smooth image.
RESOURCE:
WEB
- http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/
No comments:
Post a Comment