What resolution does retina disply really display

G

Gordon.C

Member
Hi,

I know that the new generation of Mac Books with the retina displays has 2880 x 1800 pixels however thats not the resolution under which it displays.

Better said the retina display has 4 pixels for each 1 pixel on a regular screen.
So does it mean that the retina display displays a resolution of 1440 x 900px?

I am curious because if the resolution was truly 2880x1800 websites and system would look insanely tiny on those 17" monitors.
 
Last edited:
The only way to tell for sure that I can think of is to get one of them and go to the display properties and look at the numbers.

However, they can run a front end magnifier for Safari, chrome, and FF to make the web pages display normally. That is not hard at all. And I will say from personal experience, you do not want more than 1200p on a 17" screen for the net without a magnifier. There are some times (mainly when I am stupid and don't take my medicine) that I can not even read the print on the 1200p of my M90.
 
Webdesigner here. My boss asked me to study the topic, so, here's my understanding.

Yes, the pixel density is double in line (quadruple for areas), but when the image processor does the calculations, it considers it as being normal. For example, an 2px by 2px image will be displayed on a retina display on 16 pixels, instead of 4, like in normal displays, so, the PROPORTIONS remain the same as in every device.

So what's the benefit you might ask? . Well, i actually did an experiment. I took a 800 x 600 image. Made a smaller copy of it, of 400 x 300 to be precise, and then, i "forced" the webpage do display both photos on size 400 x 300.

Now, when i put them side by side, on a normal display, you could not see any difference, since bot pictures were 400 x 300. but, on a retina display, the one that had the original 800 x 600 had mind-blowingly more detail than the other one.

How does this work? The process of taking a big image, and making a smaller copy is called downsampling. On a normal device, the downsampling is incredibly destructive. In my case, when i downsampled a smaller copy of the original, i lost 3/4 of the information. When you put an image in a webpage, the downsampling is done at that time, so he knows how much information he must let go in order for the picture to fit the size.

In short: Normal screen, transform picture from 800 x 600 to 400 x 300, in order to fit the pixels. Display what's left.
Retina display: Don't transform at all, because the retina display can fit 800 x 600 pixels in a 400 x 300 area.
 
While its quite easy to understand I think the retina display is going to bring a lot of confusion until all screens are retina because say you have a canvas and you want to draw a line 1 pixel wide. Does that mean on normal screen a real 1 pixel and on retina display a 2 pixels wide line?

If the line is 1 pixel on the retina display then it truly has resolution of 2880 x 1800 but if such line was 2 pixels wide, the resolution is still just 1440 x 900 px however displayed on 4 times more pixels
 
Gordon.C said:
While its quite easy to understand I think the retina display is going to bring a lot of confusion until all screens are retina because say you have a canvas and you want to draw a line 1 pixel wide. Does that mean on normal screen a real 1 pixel and on retina display a 2 pixels wide line?

If the line is 1 pixel on the retina display then it truly has resolution of 2880 x 1800 but if such line was 2 pixels wide, the resolution is still just 1440 x 900 px however displayed on 4 times more pixels
Click to expand...

You got it. Though, this move was pretty brilliant of apple. The only change that they made besides the increase in dpi, was in the downsampling algorithms. You can do all your work for the standard pixel, and you won't loose anything. The standard-pixel -> retina display pixel is made in such way, that it's backwards compatible, so, supposing i am not very bright, and i know only how the classic pixel work, my pages will look exactly like they did before. I won't be using retina's huge potential,but i also won't be losing aspect ratio of anything.
 
ayan said:
my pages will look exactly like they did before. I won't be using retina's huge potential,but i also won't be losing aspect ratio of anything.
Click to expand...

Unfortunately I cant relate to that. Perhaps my website graphics is not optimized yet for retina because raster images tend to render slightly blurry on retina while they are sharp on classic.

From what I have seen, you can tell which image is retina optimized and which is not.
 
ayan said:
Webdesigner here. My boss asked me to study the topic, so, here's my understanding.

Yes, the pixel density is double in line (quadruple for areas), but when the image processor does the calculations, it considers it as being normal. For example, an 2px by 2px image will be displayed on a retina display on 16 pixels, instead of 4, like in normal displays, so, the PROPORTIONS remain the same as in every device.

So what's the benefit you might ask? . Well, i actually did an experiment. I took a 800 x 600 image. Made a smaller copy of it, of 400 x 300 to be precise, and then, i "forced" the webpage do display both photos on size 400 x 300.

Now, when i put them side by side, on a normal display, you could not see any difference, since bot pictures were 400 x 300. but, on a retina display, the one that had the original 800 x 600 had mind-blowingly more detail than the other one.

How does this work? The process of taking a big image, and making a smaller copy is called downsampling. On a normal device, the downsampling is incredibly destructive. In my case, when i downsampled a smaller copy of the original, i lost 3/4 of the information. When you put an image in a webpage, the downsampling is done at that time, so he knows how much information he must let go in order for the picture to fit the size.

In short: Normal screen, transform picture from 800 x 600 to 400 x 300, in order to fit the pixels. Display what's left.
Retina display: Don't transform at all, because the retina display can fit 800 x 600 pixels in a 400 x 300 area.
Click to expand...

You are sort of right, but the terminology you are using is way out of whack.

Saying "you can fit 800x600 in 400x300", well it makes no sense. It is the mentality a dog has when trying to get through a door with a large stick in it's mouth, it doesn't fit.

In short - higher pixel density.

They are able to fit more pixels in a smaller area than other screens. Get a piece of paper and put a dot on it. What is it, just a dot, a face, a Da Vinci portrait? You would say a dot but the PPI (Pixels Per Inch) could just be so low all you see is a dot. You add another dot, and another of different colours and eventually a picture is built up. The more dots you add, the more seamless and less "dotty" the picture looks. This is the idea behind the higher pixel density.


They are taking a picture and instad of having it 100x100 pixels, it is 200x200 pixels in the same area of screen, so it is the same size but with more pixels.

Remember though that a retina display is just a marketing term. There are other devices out there with higher PPI and therefore higher image quality. Compare for example the iPhone 5 to the upcoming Lumia 920. The iPhone with it's retina display screen has 326 PPI, whilst the Lumia has 332 PPI. Not a huge difference, but the Lumia is better with it's Puremotion+ technology.

What Apple are doing isn't special, it is just, as usual, marketing something that is average at best
 
You must log in or register to reply here.
Back
Top