RMBP: Screen Resolution Degredation?

[zachnelson]

For those of you with the retina macbook pro..

How bad is the screen resolution degredation/fuzzyness/blurryness using apps not rendered for the retina display? Is it really as common as people are making it out to be?

I'm concerned half of the gui/apps/pictures I look at will be great, and the rest will be muck. Especially browsing the Internet.

 

[stevelam]

For those of you with the retina macbook pro..

How bad is the screen resolution degredation/fuzzyness/blurryness using apps not rendered for the retina display? Is it really as common as people are making it out to be?

I'm concerned half of the gui/apps/pictures I look at will be great, and the rest will be muck. Especially browsing the Internet.

Half? I'd say 99% of apps look crappy until they're updated, if at all. And yes, browsing the Internet looking at relatively low resolution images will look like ****.

 

[zachnelson]

Half? I'd say 99% of apps look crappy until they're updated, if at all. And yes, browsing the Internet looking at relatively low resolution images will look like ****.

So literally, unless this technology hits mainstream, we're going to have questionably ****** looking applications and Internet websites for the next several years?

 

[Sean Dempsey]

So literally, unless this technology hits mainstream, we're going to have questionably ****** looking applications and Internet websites for the next several years?

Yes. Almost no one outside of major websites are going to update their graphics to dual-res via javascript/css etc.

 

[stuaz]

Is it possible via a software fix from Apple for the "old" app to be made to look as good as they do on the previous MBP? Like maybe an update from Mountain Lion?

 

[Gata]

Yes. Almost no one outside of major websites are going to update their graphics to dual-res via javascript/css etc.

Websites don't need to be updated, browsers need to have updated rendering features for the Retina Display, much like Safari and Apple's other first-party apps have been.

 

[Sean Dempsey]

Websites don't need to be updated, browsers need to have updated rendering features for the Retina Display, much like Safari and Apple's other first-party apps have been.

That is not how it works.

showing a 500x500 pixel image in a website will have to be "Scaled" to 1000x1000 for the retina display, which since it has double pixel density, shows it as 500x500.

But since that's not actually showing 500x500 pixels of image on 500x500 pixels of screen, you STILL get the "upsized" effect on the images.

What you have to do is save your images at 1000x1000, and then in your website, you use javascript (or a stylesheet) to show the image at 500x500 pixels. So then it looks normal for a regular display, but then uses the "hi res" version for retina displays.

I do web and software development as a designer for a living. I've gone through this song and dance for the iPad 3. There's a un-fixable difference between raster art (jpgs, pngs, etc etc) and rendered vector pixels (svgs, fonts, CSS styles, etc etc).

 

[Vctr]

Websites don't need to be updated, browsers need to have updated rendering features for the Retina Display, much like Safari and Apple's other first-party apps have been.

That only applies to rendering of text. Upsizing of pics will always be an issue on no matter what browser you use.

 

[MikhailT]

So literally, unless this technology hits mainstream, we're going to have questionably ****** looking applications and Internet websites for the next several years?

Of course, what did you expect? It's a chicken and egg situation, there's no way to avoid this. You can't tell developers to start developing for Retina apps first and then wait a few years before releasing the hardware.

 

[2Turbo]

As much as I wanted the 15" screen and improved speed, I think I'll be skipping the Retina this time around and going Air. Hope the speed is enough.

 

[bhtooefr]

What you have to do is save your images at 1000x1000, and then in your website, you use javascript (or a stylesheet) to show the image at 500x500 pixels. So then it looks normal for a regular display, but then uses the "hi res" version for retina displays.

Or use height="500" width="500" on the img tag.

The JavaScript hacks are to detect whether the device has a high resolution display, and serve the right image, saving bandwidth. However, that's the wrong way IMO - there should be a standard for the device's expected ppi (which may not be the actual ppi - in the case of a HiDPI Apple device, it will always be 192, but different devices will be different) in the user-agent or a similar field, making it easy for a web server to select the correct scaling factor.

 

[Sean Dempsey]

Or use height="500" width="500" on the img tag.

The JavaScript hacks are to detect whether the device has a high resolution display, and serve the right image, saving bandwidth. However, that's the wrong way IMO - there should be a standard for the device's expected ppi (which may not be the actual ppi - in the case of a HiDPI Apple device, it will always be 192, but different devices will be different) in the user-agent or a similar field, making it easy for a web server to select the correct scaling factor.

Using img tags and the width/height html attributes is hokey.

What about image sprites or background images in CSS? For most applications where I want an image in a clickable anchor or div, I would use

.className {
background-image: whatever.jpg;
background-position: center center;
background-repeat: no-repeat;
}

etc etc.

Currently, there's no real way to have this work on a retina display. Not to mention if you use a big sprite file, you're going to have to calculate the xy offset for those, and then come up with some way to serve up different CSS based on what, user agent? media type?

It just doesn't work. Retina displays are the future, but there are going to have to be early adopters who just suffer.

 

[bhtooefr]

I'm saying, serve up different size images based on something like user-agent, but have a new "user-props" field of sorts. Then, the server can process the image, and give you one of the correct size for your display, no matter the density.

This will actually be even more important on Windows, where there's going to be 96, 134, and 172 ppi browser settings, instead of just 96 and 192.

 

[Sean Dempsey]

I'm saying, serve up different size images based on something like user-agent, but have a new "user-props" field of sorts. Then, the server can process the image, and give you one of the correct size for your display, no matter the density.

This will actually be even more important on Windows, where there's going to be 96, 134, and 172 ppi browser settings, instead of just 96 and 192.

So wait - you want all browsers to invent new property settings so that designers can all make various versions of images and it serves them up intelligently?

I'll IE to get right on that.

 

[bhtooefr]

So wait - you want all browsers to invent new property settings so that designers can all make various versions of images and it serves them up intelligently?

I'll IE to get right on that.

No, I want the W3C (and maybe the IETF) to make a standard so that designers can make one high resolution image, drop it on the server, and then the server automatically renders a lower resolution image for the client.

The server could cache common sizes - 96 ppi at the very least.

 

[calaverasgrande]

well if everyone made nice breezy resolution independent sites like craigslist.org it wouldn't be a problem!
Jquery can be used to serve up different CSS for MBPR and non retina display. Lots of sites already do this for IE vs every other browser. Or for different plugins.

You think HTML5 would obviate the necessity to do all this hunh?