Pixels !!! All of us have been using this term for quite a long time now and i bet no matter how awesome you think you are in terms of working with pixels, this post will leave you enriched .(Okay went a little overboard there, but you get the gist).
To begin our journey, like any other lecture, lets first define a pixel.
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).
Okay, so you were saying you are an expert :D
A simpler definition would be the smallest unit of any display that can be individually processed. Well that makes sense. So pixel is the smallest unit of an image, so that means it can’t be further magnified right ? but this doesn’t seem to be correct, we surely can magnify any screen, so what is it that we are seeing there? a magnified pixel ? okay too many questions !!!
Seriously Stop !!!
Now that i have got your curiosity, let me tell you this article will not be dealing with images but with web development and pixel related issues. Image related issues are for another article maybe in the future!! MAYBE.
There are 3 types of pixels (There always are, aren’t there ?) :
Cascading Style Sheet(CSS) Pixels.Device Pixels.(DPI orPPI)Device Independent Pixels(DIP).1. CSS Pixels.
As a popular post mentions — The CSS pixel is a ‘reference’ pixel.
It is an abstract concept, designed for the use of web developers. This is the same pixel value used in declaration of CSS properties.
.SAMPLE_DIV{ width : 500px;}
It is generally said that CSS pixels if mentioned as a property can never be changed, Suppose you set an element padding as 25%. When you zoom in, the pixels grow in size( Obviously, that’s why the image appears pixelated).
Due to this, the number of pixels in a unit area decreases, i.e now the 25% of the screen would contain lesser number of pixels hence the padding of the element would decrease (WHATTTT !!).
2. Device Pixels (DPI or PPI).
Device pixels are also termed as number of Dots Per Inch (DPI) or Pixels Per Inch(PPI). DPI is more common place though and is a fairly popular term in gaming community (All Gamers ❤ from this side of the world).
The higher the number, the smaller the size of the pixels, so graphics are perceived as more crisp and less pixelated. The concept of DPI is also used in printing( although the dots and their formation is different there).
The Specs you hear while purchasing your electronic device — 1366 x 768 px, these are the device pixels, the ones that are fixed for your device and can not be changed.
3. Density Independent Pixels (DIP).
Also an abstract concept. Formally DIP are number of CSS pixels that are optimal for viewing a website on the device.
The relationship between DIP and DPI is :
Device Pixel Ratio (DPR) = DPI/DIP
DIP forms the logical portion of the pixels, one that you see, one that is actually being used to display the content onto your device’s screen.
For example consider a device with DPI 2560 px and DIP 1280 px, that means your device can support 2560 px worth of content but your browser is only showing 1280 px content, so for every 2 hardware pixel we are having a single pixel on the screen, which is displaying the content.Another example, suppose you have a device of DPR 2 and DPI 640 px (Seriously these short forms are giving me headaches now !!), so how much viewport width(Another fancy name for DIP ) would be required to display the content.According to DPR we can conclude for every 2 device pixel we have a single logical pixel, i.e 640/2 = 320 px would be the required viewport width.Conclusion.
I believe it wont be too erroneous to say that- pixels is actually not a pixel.
So next time anyone tell you something is x pixel, you know what to ask
What kind of pixel ?