Why do old apps look so terrible on the Retina display? ["solved"]

[killmoms]

Mmm, if that was true then it should be true on an iPhone 3GS and iPod touch 4, but I've tested that myself and they look identical.

I can easily tell an image displayed using pixel doubling on an iPhone 4 from an image displayed at native res on an iPhone 3GS (or the same case for an iPad 2 -> iPad 3). They certainly do not look identical.

 

[MythicFrost]

I can easily tell an image displayed using pixel doubling on an iPhone 4 from an image displayed at native res on an iPhone 3GS (or the same case for an iPad 2 -> iPad 3). They certainly do not look identical.

That's what people say, but I've compared a 480x320 image covering the entire screen on both of them, and there's no difference. I've got an iPad 2 and 3 here so I'll test them.

It's a bit more difficult to compare it against the iPhone 4 since it has an IPS display and the glass is thinner which makes it pop more, which is why I chose an iPod touch 4 since it isn't IPS.

 

[Dammit Cubs]

sir u failed at reading comprehension.

i already posted so much and now eating lunch, so please let someone else explain to u what is going on here. hint: 1:4 pixel mapping at same size shouldn't look worse than 1:1 mapping

It should and it does.

The proof is INFRONT OF YOU. That's how the ipad scales. 1:4. And guess what? those look like ****. It's only when you get exactly the same 1:1 match how to do you do that?

Blowing it up is not doubling it. You have to re-do the DPI range at 1:1..

100x100 asset will be blown to 200x200. Seriously, writing a bunch of match is just trying to make sense of something that is right in front of you.

If you set the real estate at trule 2800 x 1800, you will see that the icons are so small to really show any detail. It gets negated by such a small pixels. Its the fact that it's set to 1400x900 (simulated) at 2800x1800. Those artifacts are just zoomed into. The icons like app store and other icons in the retina aren't blown up double the size. It's natively 1:1 pixel ration with the 2800x1800.

It other words, the screen is always at 2800x1800. The assets on the screen are just scaled. So non-dpi icons are just doubled. Hi-dpi icons are NOT DOUBLED, you are just naturally that big. It was designed that way. They intended the 2800x1800 screen to look like a 1900x1200. If apple wanted the real estate look like 1680x1800, they would have to make the hi-dpi icons at 1.5x for x and y. (not scaling). but re-do the icons.

If apple turned off the hi-dpi mode/ low-dpi mode and left it at true 2800x1800. You would see the low-dpi mode icons 1/2 the size of the hi-dpi icons. Those low-dpi icons would be so small while the hi-dpi icons would still be the same size as what you typically see in a 1400x900. EVEN THOUGH ITS RUNNING AT FULL 2800x1800. It's mapped 1 for 1. pixel.

It's so easy to tell when something is scaled. it's even funny. It's all about the DPI value PER ICON. non-retina macbook pros and all the appstore assets use a DPI range that is under 100. The Retina Macbook pro standard assets use icons that are in the 100+ range. Just compare the two icons. If fact, there is a switch in the OSX code to enable on version over the other. Why do you think apple stores assets of both version in the operation code?

This is why you typically what your wallpaper to match the native resolution of your screen. I.e. 1920x1200 = 1920x1200 wallpaper. What happens when you put a 1440x900 into a 1920x1200 screen. It gets scaled to fit. (JUST LIKE THE THE NON-DPI WALLPAPER). but it looks blurry or pixelated. Probably more blurry. But when you match, it tends to look better (outside of having a horrible picture to begin with).

 

[millerrh]

That's what people say, but I've compared a 480x320 image covering the entire screen on both of them, and there's no difference. I've got an iPad 2 and 3 here so I'll test them.

It's a bit more difficult to compare it against the iPhone 4 since it has an IPS display and the glass is thinner which makes it pop more, which is why I chose an iPod touch 4 since it isn't IPS.

If you can't tell the difference between an identical image, or more importantly non-optimized text and graphics, between an iPad 2 and 3 I will be shocked. There is a glaring difference. And it is the same as on the RMBP. But the RMBP has larger pixels, so is even more noticeable.

 

[MythicFrost]

If you can't tell the difference between an identical image, or more importantly non-optimized text and graphics, between an iPad 2 and 3 I will be shocked. There is a glaring difference.

I compared a 1024x768 image of Superman in landscape, and they looked almost identical. But, if I looked four inches or closer, the aliasing at the same places as on the iPad 2 was more pronounced. For the most part though, they looked identical.

Mind you, non-retina images are more noticeable in apps since the apps themselves are sharper it makes the non-retina stuff stand out.

And it is the same as on the RMBP. But the RMBP has larger pixels, so is even more noticeable.

That makes sense, perhaps I am wrong. I'll have to check it out.

 

[Dammit Cubs]

I'm gonna walk away from this. Get a better view and explaining. Maybe my explanation is either too confusing or maybe I'm wrong.

So i'm willing to step by and understand why and then thoroughly explain my argument.

 

[millerrh]

I compared a 1024x768 image of Superman in landscape, and they looked almost identical. But, if I looked four inches or closer, the aliasing at the same places as on the iPad 2 was more pronounced. For the most part though, they looked identical.

Mind you, non-retina images are more noticeable in apps since the apps themselves are sharper it makes the non-retina stuff stand out.

That makes sense, perhaps I am wrong. I'll have to check it out.

I think part of the issue is you are looking at an image. Images have gradients to them that tend to bleed pixels into one another. Try looking at something like a logo, text, or interface elements with clear lines and boundaries that are not meant for the retina display between your iPad 2 & 3. That's where you'll notice it most.

 

[MythicFrost]

I think part of the issue is you are looking at an image. Images have gradients to them that tend to bleed pixels into one another. Try looking at something like a logo, text, or interface elements with clear lines and boundaries that are not meant for the retina display between your iPad 2 & 3. That's where you'll notice it most.

I opened up a restaurant on Yelp (which shows lots of text, a few images, etc.) and I took a screenshot on the iPad 2 and emailed it to my iPad 3, and it's a similar thing as with the image. The aliasing is more pronounced, but otherwise not really noticeable past four to six inches.

 

[millerrh]

I opened up a restaurant on Yelp (which shows lots of text, a few images, etc.) and I took a screenshot on the iPad 2 and emailed it to my iPad 3, and it's a similar thing as with the image. The aliasing is more pronounced, but otherwise not really noticeable past four to six inches.

Well that was a good test you did actually. I'm honestly surprised you don't notice it that much.

To your point though, I still see non-retina things on my iPad 3 all the time and they don't bother me that much.

But the key difference is I'm not doing detailed image editing and graphic design on my iPad, so all it is to me is a minor annoyance. If you need that pixel perfect view for content creation, I think it becomes a bigger deal. If you're just consuming content, maybe just a minor annoyance until it becomes more mainstream to have retina apps.

 

[MythicFrost]

Well that was a good test you did actually. I'm honestly surprised you don't notice it that much.

To your point though, I still see non-retina things on my iPad 3 all the time and they don't bother me that much.

But the key difference is I'm not doing detailed image editing and graphic design on my iPad, so all it is to me is a minor annoyance. If you need that pixel perfect view for content creation, I think it becomes a bigger deal. If you're just consuming content, maybe just a minor annoyance until it becomes more mainstream to have retina apps.

Yeah it would probably be more bothersome if you were doing content creation.

 

[Xian Zhu Xuande]

I'll take a stab at this, in all probability repeating something mentioned earlier.

Even though the image takes up the same amount of screen real estate on the RMBP as it does on the MBP, the pixel, represented with four pixels on the RMBP, is much crisper by appearance. Perhaps oversimplifying, at the lower resolution a sort of blur softens the image and helps everything to blend a little more smoothly.

 

[millerrh]

I'll take a stab at this, in all probability repeating something mentioned earlier.

Even though the image takes up the same amount of screen real estate on the RMBP as it does on the MBP, the pixel, represented with four pixels on the RMBP, is much crisper by appearance. Perhaps oversimplifying, at the lower resolution a sort of blur softens the image and helps everything to blend a little more smoothly.

Could be. I think this might be due to the "screen door" thing going on. There are spaces you can see with your naked eye between pixels on a normal screen at close distances. I think these spaces sort of soften the pixels and you don't really notice the individual pixels. Your mind also interpolates what should be there in those spaces between pixels to make things look smoother and sharper even. Now we have no spaces between pixels and what we are left with are very distinct, sharp squares that are the same physical size as the old pixel.

Maybe bigger actually because there are no more spaces between pixels that we can see. This may actually be the culprit of why retina looks worse.

 

[Xian Zhu Xuande]

Yeah, that certainly plays a role. I was trying to keep the explanation pretty simple.

 

[ladeer]

I'm gonna walk away from this. Get a better view and explaining. Maybe my explanation is either too confusing or maybe I'm wrong.

So i'm willing to step by and understand why and then thoroughly explain my argument.

OMG I never disagree with the fact that retina (4x resolution) on the same physical look WORSE. I KNOW THAT. What I am disagreeing is, WHY DOES IT HAVE TO BE THE CASE! You said it's because it's not 1:1 scale. Well, that's what I can't understand. If it's 1:2, 1:3, 1:5, sure, it's not gonna work cuz you will lose pixel. But 1:4? It's exactly 4 pixel replacing 1 pixel, in the same physical area, so each one of the new four pixel is 1/4 the size of the old 1 pixel. WHY do the graphics have to look worse?

Retina iPad 3 does not look worse. If you compare it next to an iPad 2, browsing the same website, they look the same.

but on MacBook Pro retina, using say Microsoft Word or Excel, they LOOK HORRIBLE compared to what they look like on MacBook Pro 15. How do you explain that?

----------

I think you might fail at you know, imaging scaling algorithms? I mean, there is no such thing as scaling without losing quality. It's just not how image scaling works. In Retina, When OSX shows you an image, say 400x400 it upscales it to 800x800, that's the end of the story.

OSX straight up makes images bigger to make them not tiny at the very high resolution it's running at, that's why in all of apples developer docs for ipad and such double what they actually are.

There is no way to scale an image and not distort it, the act of scaling an images distorts it. Remember, all they are doing in a retina display to make the UI not look tiny is making everything twice as big, the monitor is still running at full resolution.

Also, 1 to 4 pixel mapping isn't a thing.

i totally disagree with you.

scaling will distort an image because you are losing pixel. but if you do a 1:4 scaling (1:2 on width and 1:2 on length), each pixel now will take exactly four pixels, and these four pixels are 1/4 the size of the old pixel so they will again look to be the same as the old pixel. over all, if the scaling was done in this manner, WHY will it look different?

no one has a confirmed explanation, but there sure are a lot of theories such as the "gap between pixel is smaller on retina" or "optical illusion" or "anti-aliasing applied by OSX" etc.

you can't tell me scaling will ALWAYS make it look worse. sure it happens 99.9% of the time for reasons we both understand, but u really didn't explain to me why a 1:4 scaling will look worse, provided the new pixel is 1/4 of the old pixel.

 

[joevt]

Retina Display on Non-Retina Display Macs

I used Quartz Debug.app from Xcode 4 to enable HiDPI modes on my 30" Apple Cinema Display connected to a Radeon HD 5870 1 GB card in a Mac Pro 2008. The HiDPI modes are rendered exactly the same as the Retina Display modes. I took a screen shot of a Safari window viewing an icon from MacRumors (http://cdn.macrumors.com/vb/images/statusicon/post_new.gif)
using both 1280 x 800 HiDPI mode (which uses a 2560 x 1600 screen buffer) and standard 1280 x 800 normal mode.

I viewed the images in Preview.app using Actual Size. The window and icon is 4 times larger in the 1280 x 800 HiDPI screen shot (2x vertical and horizontal) as expected.

I turned on Zoom using Universal Access in System Preferences.app with the "Smooth images" option disabled to look at the individual pixels. Preview.app's own zoom feature will also work.

It appears that Safari (or whatever is responsible for drawing images into the screen buffer) uses some kind of filtering option (bilinear filtering?) to scale up images even though the scale factor is exactly 2. This adds extra information to the icon which did not exist before making it more blurry. There should be an option to disable this filtering just like there is for the Zoom feature in Universal Access.app.

Filtering is also done by the ATI card when it scales 1280 x 800 normal mode to 2560 x 1600 but there's no way to take a screen shot of that scaling step unless you can capture the signal from the DVI-D connector. There should be a method to turn off this filtering as well.

Using SwitchResX, you can create resolutions greater than the native screen size. I was able to create and use a 3584 x 2240 screen resolution. It is scaled down to 2560 x 1600 using the same filtering method as is used to scale up 1280 x 800 but in this case, the filtering is preferred.

The 3584 x 2240 mode also adds a 1792 x 1120 HiDPI mode. Drawing is done in a 3584 x 2240 screen buffer and then scaled down to 2560 x 1600 by the ATI card. This scale down ability is what happens when you use the 1680 x 1050 or 1920 x 1200 Retina Display modes on the MacBook Pro Retina Display.

 

[Dammit Cubs]

OMG I never disagree with the fact that retina (4x resolution) on the same physical look WORSE. I KNOW THAT. What I am disagreeing is, WHY DOES IT HAVE TO BE THE CASE! You said it's because it's not 1:1 scale. Well, that's what I can't understand. If it's 1:2, 1:3, 1:5, sure, it's not gonna work cuz you will lose pixel. But 1:4? It's exactly 4 pixel replacing 1 pixel, in the same physical area, so each one of the new four pixel is 1/4 the size of the old 1 pixel. WHY do the graphics have to look worse?

Retina iPad 3 does not look worse. If you compare it next to an iPad 2, browsing the same website, they look the same.

but on MacBook Pro retina, using say Microsoft Word or Excel, they LOOK HORRIBLE compared to what they look like on MacBook Pro 15. How do you explain that?

This is where I disagree with you. When I compared a ipad 2 or even ipad 1 to the ipad 3. I can totally tell a difference. comparing safari on Ipad vs comparing safari on Ipad there, they do look the same at all. But interestingly, how you need to go about this is actually try applying the ipad 2 version of safari on the ipad 3. and having it 2x scale it. It tends to look worse.

This can be proven by running drawing***** app on the ipad 3 in retina version vs non-retina vs ipad 2 version. The ipad 2 version will look better than the non-retina verson on the ipad 3 because artifacts and elements are matched better for an ipad 2 screen. That's my observation and opinion.

Another way to think about it is. Why does standard definition at 600x480 on a CRT tube tv looks better than on a HDTV. The HDTV will take the image and scale it but so it fits the screen (minus vertical bars shown) but the CRT Tube tv fits perfectly (doesn't even have to be CRT, just a tv with 600x480 resolution). The HDTV looks pixelated even though it is scaled correctly while the CRT tube (although it is lower resolution) will look crisper with no pixelization. The Image on the screen matches the technology it is being displayed more closely than the HDTV.

I believe this analogy follows why things look so bad on the retina macbook. Those artifacts and elements were designed for a lower resolution spec display and just scaling isn't making it better. In fact, it's making it worse. More so, the reason the non-retina looks better is it matches the existing artifacts better.

See how makes it look like crap isn't the pixels themselves the the curvature of the pixels. It's much more pronounced because its scaled. a diagonal line that was 1 up 1 right formation is now 2 up and 2 right. It makes the edges more pronounced and thus makes it look worse.

On the macbook pro-retina, it does not move 2up and 2right. it moves 1up and 1right so the flaws a slightly hidden. More so than on the retina.

That's my cents.

 

[Foovius]

LibreOffice renders Retina text!

Howdy! Recently got the Retina MP Pro, and was dismayed to see my large MS Word for Mac 2011 documents render so fuzzy as to cause eyestrain.

I just installed LibreOffice, the Open Source competitor to Microsoft Office, and it opens and saves my long-form XML Word documents beautifully, and renders them Retina-compatible, just like Safari.

I don't yet know how stable LibreOffice is, but so far I've been able to tweak the Prefs to get a very clean, usable UI and writing environment.

Sucks for Microsoft, to whom I've happily paid for upgrades, but it's looking like at least for the present I'll be using LibreOffice. For free, I add again.

 

[leman]

It should and it does.

The proof is INFRONT OF YOU. That's how the ipad scales. 1:4. And guess what? those look like ****. It's only when you get exactly the same 1:1 match how to do you do that?

Blowing it up is not doubling it. You have to re-do the DPI range at 1:1..

100x100 asset will be blown to 200x200. Seriously, writing a bunch of match is just trying to make sense of something that is right in front of you.

Its not about comparing HiDPI (true 200x200) content rendered at 200x200 retina pixels and non-HiDPI (true 100x100) content rendered at 200x200 retina pixels. Of course the HiDPI will look better.

The real question is to compare non-DPI (true 100x100) content on the 200x200 retina display and the same non-DPI content on a non-retina 100x100 display. If the display dimensions are the same, the images should also look identical, because they occupy exactly the same area and their resolution is also exactly the same.

So of course you will immediately be able to tell a retina-optimized content (HiDPI images) from non-retina optimized content on the retina screen. And there is nothing Apple or you can do about it (besides switching to higher resolution, where the differences are not so apparent). But the crucial point is that non-retina content on the retina screen should look exactly the same as the same content on the non-retina screen. That's all.

I have posted is somewhere else already, and I will repeat it here. The test would be as follows:

Open the same non-retina application or a fullscreen non-retina-optimized image in both the RMBP and the normal MBP. Hide the dock, menu and everything like that. Go away for 5 minutes. Come back and see if you can notice any difference between the two screens.

----------

but on MacBook Pro retina, using say Microsoft Word or Excel, they LOOK HORRIBLE compared to what they look like on MacBook Pro 15. How do you explain this?

I have a theory about that. They might use their own algorithms to render the text and 'think', for example, that they are rendering to a 1440x900 screen, while, in fact the screen is 2880x1800. The final content is 2x2 upscaled by the OS X. To make matters worse, upscaling with text AA (subpixel rendering) applied to the image reduces the quality. Clearly, the result will look much worse than the native OS X rendered text or the same app on the non-retina screen.

 

[joevt]

The real question is to compare non-DPI (true 100x100) content on the 200x200 retina display and the same non-DPI content on a non-retina 100x100 display. If the display dimensions are the same, the images should also look identical, because they occupy exactly the same area and their resolution is also exactly the same.

I have posted is somewhere else already, and I will repeat it here. The test would be as follows:

Open the same non-retina application or a fullscreen non-retina-optimized image in both the RMBP and the normal MBP. Hide the dock, menu and everything like that. Go away for 5 minutes. Come back and see if you can notice any difference between the two screens.

I believe my test on a Mac Pro (see my previous post) shows that there is a difference because filtering is used to scale images x2. I don't know if it's a noticeable difference though. We just need confirmation that filtering is also done on the Mac Book Pro with Retina Display. You can do this on the Mac Book Pro with Retina Display by taking a screen shot of an image as it's rendered in an application such as Safari that scales images x2 and comparing the screen shot with the actual image scaled in Preview.app.

In the attached screen shot, the actual image is on the left (viewed in Preview.app zoomed in). The image as it's drawn in Safari is on the right (zoomed in half as much as the original image).

 

[leman]

I believe my test on a Mac Pro (see my previous post) shows that there is a difference because filtering is used to scale images x2. I don't know if it's a noticeable difference though. We just need confirmation that filtering is also done on the Mac Book Pro with Retina Display. You can do this on the Mac Book Pro with Retina Display by taking a screen shot of an image as it's rendered in an application such as Safari that scales images x2 and comparing the screen shot with the actual image scaled in Preview.app.

In the attached screen shot, the actual image is on the left (viewed in Preview.app zoomed in). The image as it's drawn in Safari is on the right (zoomed in half as much as the original image).

Thank you for the data, this is indeed very interesting!

My analysis: the right image (Safari) indeed shows 4x increase in DPI (we get 2x2 blocks of small squares/pixels where original had 1 big square). But in ideal (for 'data-correct' upscaling), the images should look identical (the 2x2 pixel blocks on the right should be uniform). Instead, it seems like there is some blur applied to the right picture (3x3 gaussian filter by the looks of it?)

So the upscaled images are indeed 'smoothed'! This of course explains why people report blurred pictures. And the reason is an entirely software one!

Now, I wonder why Apple decided to go this way. Maybe they thought that smoothed images look better than 'blocky' ones? It would be interesting to make this comparison. What one should do is create a HiDPI version of this image (by using simple blocky upscaling, as you did with Preview) and show it side-by-side with the old non-HiDPI version. I would love to it myself, but I don't have access to a retina MBP :/

If you have the technical skills to make websites, you can try it out yourself with CSS3 media queries. Otherwise, if you are interested, you can drop me a pm and I could try building a small website myself which you could then inspect. What do you think?

P.S. I am stupid. Of course, you did it on a Mac Pro with HiDPI enabled :/ I guess I can do the same then.

 

[scarlac]

Use "Open in Low Resolution"

If you are looking for a specific application to simulate running on a regular display, I can recommend looking at http://support.apple.com/kb/ht5266 for a guide on opening specific apps in low resolution.

Using this feature will actually disable the scaling entirely, so it looks crisp. Here's a screenshot of my company logo to show you i'm not talking bs. Look at that "T" logo. Crisp sharp. Would never look like that in a 1440x900 "smothered" version - I just tried it.

But since there's no "system wide app" you probably won't be able to disable scaling entirely for the system. Perhaps there's a setting somewhere that apple hid away.

I suspect that the scaling is in effect for "larger text" settings versus "smaller text, more screen real estate" setting. For lower resolutions, they'd generate a double resolution version and scale it down to that arbitrary resolution that it emulates. But they made no special exception for the native 1440x900 resolution since it's supposed to be the "optimal version" and not a non-retina version. Confused? I don't blame you.
Simply put: Apple don't intend you to disable Retina entirely. They expect you to want scaling for those 1024x768 emulated versions. That's why it's default for lower resolutions such as 1440x900 (non retina/non hidpi).

I'm writing this via Chrome with nice sharp pixels. God I've missed this for web development.