rMBP and the Web: How bad do Web pages truly look?

[Dralt]

So, there is no denying that images on non-retina-ready Web sites are bound to look fuzzier on the rMBP in "Best for Retina Display" mode than they do on a non-retina display.

Indeed, granted that Lion and Mountain Lion essentially try to find 4 times as many pixels in the same files, the scaling of images designed for old (non-HiDPI) displays can only be done using interpolation, which entails loss of detail.

Now, apps are a different story, they will be updated sooner rather than later. No doubt about it and no problem about that.

The Web, however, is not going to be retrofit any time soon, if ever. Sure, Web sites currently under heavy development and highly popular Web properties will be updated.
But, there is no doubt a majority of Web sites will never be retooled to serve @2x images to rMBP users. (They may not even have the original assets needed to generate those @2x images.)

So, it is very important to understand how bad or how good the Web looks currently on a rMBP, because it may look that way for a very long time.

What's your take? How is it?

 

[BigZ9]

Not really a big deal, all text renders super smooth, and since I'm usually on the web reading stuff rather than looking at pictures or website logos, it isn't that bad.

 

[rocanlover163]

To be honest I have yet to come across a website that looked bad on the retina. They all looked fine to me. Granted I have only had my computer about two days.

I don't know anything about the lag issues or websites looking ugly since I have yet to experience it on my computer. Can you please point me to a specific website that is not "retina" optimized? I'd like to see first hand what everyone is talking about.

 

[ryane67]

great example, the smileys to the right of this reply box are fuzzy, as are the formatting icons above.

it doesnt bother me because the text is crisp... if I go to sites with lower quality images as part of the ui / navigation it doesn't really bother me.

When I go to my photo sites, the images look amazing, not sure what's being done behind the scenes, but the way I feel about the best for retina desktop experience is "she's got it where it counts".

 

[Dralt]

Not really a big deal, all text renders super smooth, and since I'm usually on the web reading stuff rather than looking at pictures or website logos, it isn't that bad.

I agree that text rendering is the most important component since that's what conveys meaning in most cases, but if images were to be blurry or fuzzy to the point of being distracting, this could get annoying.

Would you say it's noticeable only if you look for it? Or, would you say it's immediately noticeable but easy to ignore?

 

[gentlefury]

web pages look gorgeous! People just need something to complain about!

 

[BigZ9]

I agree that text rendering is the most important component since that's what conveys meaning in most cases, but if images were to be blurry or fuzzy to the point of being distracting, this could get annoying.

Would you say it's noticeable only if you look for it? Or, would you say it's immediately noticeable but easy to ignore?

Immediately noticeable but easy to ignore. Like I mentioned, most of the information that you need when you're on the web is found in text. Therefore much of your attention is usually focused on the text. Making it rather easy to ignore the images.

 

[Dralt]

To be honest I have yet to come across a website that looked bad on the retina. They all looked fine to me. Granted I have only had my computer about two days.

I don't know anything about the lag issues or websites looking ugly since I have yet to experience it on my computer. Can you please point me to a specific website that is not "retina" optimized? I'd like to see first hand what everyone is talking about.

Well, let's not go far, how do those images look like on your rMBP:

Image 1:

Image 2:

Image 3:

 

[stevelam]

web pages look gorgeous! People just need something to complain about!

misguided and biased answers like these aren't helping anyone. the majority of webpages don't look 'gorgeous' due to the very definition of retina display and the majority of the internet not being retina optimized.

 

[leman]

What's your take? How is it?

As I reported in a different thread, I spent some time in Apple store doing side-by-side comparison between a my old MBP (2009 version) and the rMBP and I haven't found a single web image which would look inferior on the rMBP. Color and contrast is so much better, and I could not find any extra blur compared to what the regular MBP displayed. I don't really see where the 'websites look bad' comes from. I am still waiting for my rMBP, so I can't test the images you posted right now.

 

[jonfarr]

Everything looks great. Every once in a while I see a picture that looks a little fuzzy. But have never seen a webpage that looks bad at all. I have exclusively used safari.

 

[Vyruss]

Text looks sharp and crystal clear on my rMPB. In my honest opinion, I have noticed that pictures are definitely a little blurrier however not majorly so.

 

[leman]

misguided and biased answers like these aren't helping anyone. the majority of webpages don't look 'gorgeous' due to the very definition of retina display and the majority of the internet not being retina optimized.

You repeat the same thing over and over again in each thread. Yet when you are asked to explain what your enigmatic 'definition of retina display' you not less enigmatically disappear. Many people (myself included) have attacked your claim as baseless, maybe you should start by answering to that instead of running to another thread and starting your mantra all over again?

 

[dmccloud]

If you're using Safari or Chrome Canary, the browsers really do a good job of upscaling everything for the Retina display. Firefox, on the other hand, has not updated their browser yet, and it shows:

(Image 1)

(Image 2)


In both of these pictures, Firefox is on the left, and Safari is on the right.

 

[Dralt]

Text looks sharp and crystal clear on my rMPB. In my honest opinion, I have noticed that pictures are definitely a little blurrier however not majorly so.

How do the pictures I posted in this thread look?

Can you tell the 1080 lines apart in picture 1?

 

[jbud72]

How do the pictures I posted in this thread look?

Can you tell the 1080 lines apart in picture 1?

Yes

 

[Dralt]

Yes

That's reassuring, thanks!

 

[wethackrey]

So, there is no denying that images on non-retina-ready Web sites are bound to look fuzzier on the rMBP in "Best for Retina Display" mode than they do on a non-retina display.

I fundamentally disagree with your premise. They look fuzzier than retina-optimized pages do on a retina display, but in my two weeks of side-by-side with my 17" matte screen MBP, in no case did a web page look worse on the retina. Sorry. It just didn't.

 

[RealEyes]

All in all, it's barely noticeable.

 

[Dralt]

I fundamentally disagree with your premise. They look fuzzier than retina-optimized pages do on a retina display, but in my two weeks of side-by-side with my 17" matte screen MBP, in no case did a web page look worse on the retina. Sorry. It just didn't.

Honestly, it greatly depends on your eyesight.

This being said, just as 2 + 2 = 4, if you scale an image up by a factor of 2, you will introduce some blur and loss of detail. There is no magic method out there that can invent pixel data where there is none and retain accuracy.

To prove it to yourself, open any picture in Photoshop and double its width and height, pick any of the method available in your version of Photoshop and observe the result.

 

[Dralt]

I fundamentally disagree with your premise. They look fuzzier than retina-optimized pages do on a retina display, but in my two weeks of side-by-side with my 17" matte screen MBP, in no case did a web page look worse on the retina. Sorry. It just didn't.

To illustrate, here is a crop of the test pattern:

Here is that same crop scaled up by a factor of 2 using the Cubic method:

The difference is noticeable.

Now, possibly, the rMBP could be doing a better job at scaling up that image. That's what I wanted to verify in this thread.

 

[Inver]

To be honest I have yet to come across a website that looked bad on the retina. They all looked fine to me. Granted I have only had my computer about two days.

This. I've had it two days, so it's obviously early, but I haven't seen the web look bad. Just the opposite. Using Safari, it's looks amazing.

To me. And that's the important thing. I'm not going to tell anyone how to perceive it. Go check it out in a Mac store if you have that option. But if you find the web looks bad, I'd advise against this laptop. Web browsing is one of the best aspects (again, imo). Compare it to something like MS Word 2011, which looks awful, and you'll understand what I mean. The web (via Safari) is great.

 

[Robin Chung]

There's definitely a difference between pages optimized for Retina and pages that aren't. I think frequently updated sites will definitely adjust at some point, especially as pixel doubling technique is adopted by other manufacturers (Samsung is working on it, no joke )

I've personally updated my sites and they look miles better on the new iPad and even better on Retina MacBook Pro. The latter has a better display no doubt. My tech blog is in the sig if you want to have a sample of a retina optimized site.

Ps: post for educational purposes only, no shameless self promotion.

 

[leman]

Honestly, it greatly depends on your eyesight.

This being said, just as 2 + 2 = 4, if you scale an image up by a factor of 2, you will introduce some blur and loss of detail. There is no magic method out there that can invent pixel data where there is none and retain accuracy.

To prove it to yourself, open any picture in Photoshop and double its width and height, pick any of the method available in your version of Photoshop and observe the result.

You are forgetting the thing about the pixel density. In your examples you upscale the image and show it on the same display (so of course it will look blurry). But with the rMBP, the image will be shown on a display with a much higher pixel density, i.e. the upscaled image will have the same physical dimensions than the original on the non-retina display.

For instance, simple 2x2 closest neighbour sampling (pixel-doubling) does not actually invent any data. A 'regular' 100x100 image can be pixel-doubled to 200x200 and then each of the 2x2 pixel blocks on the retina display will exactly correspond to one pixel on the normal display. The pixel data to physical surface will be exactly the same.

Now, the OS X does not seem to actually use pixel-doubling for standard images. Instead, they use bilinear interpolation. The resulting image is thus not the same as the original one, but again, because of the much higher pixel density on the rMBP, it looks very similar on screen to the original version. Again, I could not see any difference between the regular MBP for most photos, and while there was a difference looking at images containing text, I wouldn't say that the rMBP version looked any worse. Actually, in many cases the text did appear crisper to me. This is a purely subjective judgement, however.

 

[Dangerous Theory]

So, there is no denying that images on non-retina-ready Web sites are bound to look fuzzier on the rMBP in "Best for Retina Display" mode than they do on a non-retina display.

Feel free to explain/prove me wrong, but I can't see how they would possibly look worse. I can imagine them looking the same, if not slightly better. It's not like they're being stretched, just 1 pixel being split into 4 but acting as one?