Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
It's a non issue, I "Retinized" this project I'm working on in just a few hours:
It is very much not a non-issue, speaking as someone who maintains a corporate website with thousands of images who *also* plans to gradually introduce Retina support (for all HiDPI devices). I need to re-create resources such as sprites with their corresponding CSS rules, update server-side code which outputs things like product images (and again for programs such as those that allow images to be enlarged), redesign navigation elements which aren't compatible with reasonable techniques for serving these resources, and all in such a way that these resources are served only to browsers on devices which support the higher resolution (and in those cases, only once, unlike the approach Apple has chosen for some elements of its website).

What may work for one project (I didn't actually look at the site you linked to see how you are doing this—I'm on my phone) but it won't work smoothly for all of them. *Especially* large, established websites.

What this means is that support will come gradually for people who visit websites I am responsible for. It will start with important things like branding, icons, images with text, and easier things, such as new additions to the site, and the rest will come in time.
 
That is the developers fault tho. Lion allows for resolution independent programming now. So a 3rd party developer can have 4x UI elements but leave all user content (graphics, video, etc) at 1:1 pixel ratio....like all of the current retina apps (iPhoto, Aperture, FCPX, Safari, etc)
I think part of the problem is that only way 4x content works efficiently is if the user has the display set to 1440x900 (which is the default setting). That is the only display setting that will allow for a true 4x upscaling.

But you also have 1024x640 (2.8x), 1280x800 (2.25x), 1680x1050 (1.7x) and 1920x1200 (1.5x). I wonder if the

Obviously not many are going to create that many image versions.

The iPhone 4 and iPad never had to contend with less than 4x upscaling. I wonder if the OP is using a display setting other than 1440x900? Surely images forced to upscale at non pixel-to-pixel resolutions would suffer.




Michael
 
Not quite sure what you're talking about here. Maybe you can elaborate. With an image, for example, if you leave its size to the web browser the browser will size it to the dimensions of the original image, and unless viewed independently, the image will not be resized by the browser.

Exactly! People are complaining about pixelated images on the RMBP, and if left to the browser the images won't appear pixelated. Of course they will appear small, but the image size has always varied among displays of different sizes and PPI. Web designers, however, don't like that, so force the images to be a particular percentage of the display, which gives disastrous results on the RMBP.

The browser only displays content as it was told to. Aside from basic elements such as a block of text (say, in a paragraph <p>) reflowing within an elastic container (whether the browser in the <body> tag or in, say, an <article> tag) the browser can't be depending on for much, layout wise, beyond a bare-bones academic format.

Yes. What I was saying. HTML describes what the content is, not how to display it. Sure it was academic format, but at least it was portable across every imaginable display, even with text only browsers like Lynx that have been rendered basically useless.

And it also won't provide in-document retina support unless you explicitly go out of your way to define an image as using less space than the image would take up if full size (whether fixed or adaptive), and that has the drawback of serving oversized graphics to the standard browser audience.
If the site is using images solely for pictures (as opposed to displaying text, navigation buttons, or whatever) then it is possible to have a "click on image for larger view" and still only send fewer bytes unless requested. But again it's old school.

I'll fully admit that we can't turn back the clock, nor would anyone really want to, but it's a problem that has been seen coming ever since the displays went beyond 640x480! The RMBP is really nothing new.
 
What happens if you take for instance a jpeg image of 200x200 and scale it down to half of its size with html using: <img src="myimg.jpg width="50%" height="50%">

How does it display using recommended retina resolution?

I believe that retina is leveraged not only by hardware technology designed by LG Displays, but also with software implementation at OS level. Maybe looking at the new API could help to understand how it works...

I think that using SVG is the way to go because it scales at any resolution and is hardware independent. By contrast, when you double your bitmaps resolutions to adapt to retina display, you are becoming hardware dependent...
 
"The World" doesn't care.

Believe it or not, the planet is populated by humans that have a life... that quite likely does not revolve around Apple.

And _that_ is the good news.
 
when i hear people saying things like "the retina is a marketing term, theres nothing special about it" i realize just how far ahead apple is by releasing this. how ridiculous would it sound to hear this "1080p is a marketing term, theres no difference in watching a standard dvd over a bluray".. although even that is more straightforward. Retina is so much more than resolution yet people spend most of the time discussing this aspect. no wonder people say this has been done before when it hasnt. nobody discusses the MUCH improved color fidelity, the contrast and pixel density, or the fact that every PC manufacturer is scrambling to implement 4k screens. People who a passing this up because they think its a gimmick will be sorely surprised in two years when every system will have screens like this (whens the last time you saw an LED panel at 640*480 on a laptop?)

I was in BB yesterday and the salesman was telling some older gentleman "yeah, the retina thing is just apples usual confusing marketing. youll get just as good of a display on a 400 dollar laptop. And most people return the apple products becuase they get it home and dont know what to do with it.." and his conversation went on like that for another 3 minutes. thats enough proof that the world not only isnt ready, but they are being hoodwinked into thinking the retina is bunk.
 
when i hear people saying things like "the retina is a marketing term, theres nothing special about it" i realize just how far ahead apple is by releasing this. how ridiculous would it sound to hear this "1080p is a marketing term, theres no difference in watching a standard dvd over a bluray"

Heard that all the time when blu-ray was introduced. Another one I heard all the time (when HD-DVD was in its death-throes) "the upscaling in HD-DVD players makes regular DVDs look as good as Blu-Ray"
 
newbie. exactly. and the same way dvd looked bad on a bluray, these websites and non "retinized" apps look bad on rMBP. I dont understand so many people bashing the rMBP for this when its simply exposing how crappy they all looked like ithe first place.

imagine people returning their 1080p TVs because standard broadcast signals look terrible, or their DVDS look fuzzy on it.
 
Well, Retina is not Apple's technology, but a marketing term used by Apple to describe or promote LG Displays technology.

Apple changed long time ago the term WYSIWYG (What You See Is What You Get) to WYPIWYG (What You Pay Is What You Get) XD
 
Web designers, however, don't like that, so force the images to be a particular percentage of the display
Is that really being used that much?

All I've seen is:

&width=xxx&height=xxx

and

&width=xx%&height=xx%.
 
Last edited:
Exactly! People are complaining about pixelated images on the RMBP, and if left to the browser the images won't appear pixelated. Of course they will appear small, but the image size has always varied among displays of different sizes and PPI. Web designers, however, don't like that, so force the images to be a particular percentage of the display, which gives disastrous results on the RMBP.
Okay! Now I understand you. That's not how the RMBP works (or the iPad, iPhone, Android, or others for that matter). Everything is displayed as if the screen were of a standard resolution (e.g. 1440x) even when there are far more pixels available (e.g. 2880x). If you create a basic HTML document and toss an <img> in there with no size rules it will display at double size (as if your screen were only 1440x from the example above. Meaning it won't display in Retina resolution. It might if you request the image directly (not sure) and it does in OS X, but not the browser.

Also, most pages define the dimensions of the image as-is. That actually wouldn't change this behavior. To get Retina you need to define it (e.g. by taking a 600x300 image and deliberately sizing it to 300x150). Based on what you've written you may not like this behavior, but there are many extremely good reasons for it, as there are for explicitly sizing images (one of many being that it allows the browser to properly position content before images are loaded).

Yes. What I was saying. HTML describes what the content is, not how to display it. Sure it was academic format, but at least it was portable across every imaginable display, even with text only browsers like Lynx that have been rendered basically useless.
In the hands of a responsible web designer this describes HTML perfectly (and when done properly Lynx should actually be perfectly functional). CSS is used to describe how content should be displayed.

If the site is using images solely for pictures (as opposed to displaying text, navigation buttons, or whatever) then it is possible to have a "click on image for larger view" and still only send fewer bytes unless requested. But again it's old school.

I'll fully admit that we can't turn back the clock, nor would anyone really want to, but it's a problem that has been seen coming ever since the displays went beyond 640x480! The RMBP is really nothing new.
I'm not sure what you mean with the first paragraph. If it had to do with displaying graphics half-size on the Retina display I really should point out that this would be disastrous. Images, for the vast majority of designs, and in a wide range of uses, must occupy a relatively predictable space. Also, if they half-sized many would become useless and confusing.

The proper approach is to serve Retina graphics only to clients that support it and within the predictable constraints of a layout.

The RMBP is a completely different beast from the various resolution increases we've experienced as computers as evolved because the behavior is completely different.
 
sofianto, none of the technology in anyones laptops are their own. Apple doesnt manufacture, they implement. I think people confuse invention with innovation. example. They didnt create the mouse but when they implemented it the whole world laughed. The industries leading tech analyst of the time went on record publicly saying "whos gonna want to use THAT thing"..

My biggest gripe in EVERY laptop ive ever bought is the crappy screens. its the biggest scam ive ever seen perpetrated on the consumer. i saw a 2100 dollar laptop the other day and the screen looked like something that should be on a 200 dollar netbook.

if apple didnt do this wed still be stuck with 10 year old tech on these screens. its about time and my eyes thank me every day i use a retina screen.
 
What happens if you take for instance a jpeg image of 200x200 and scale it down to half of its size with html using: <img src="myimg.jpg width="50%" height="50%">

How does it display using recommended retina resolution?

I believe that retina is leveraged not only by hardware technology designed by LG Displays, but also with software implementation at OS level. Maybe looking at the new API could help to understand how it works...

I think that using SVG is the way to go because it scales at any resolution and is hardware independent. By contrast, when you double your bitmaps resolutions to adapt to retina display, you are becoming hardware dependent...

This is exactly right. If you have an image, whether it's an icon, a photo, or a thumbnail, Windows (and non-HiDPI screens) will display it at the size you say. If the image is 100x100 and you display it as <img width=100 height=100> (forgive the dodgy syntax), then it will display as usual. And the same size but blocky on HiDPI screens. In order to make your website nice on retina, you need to serve up a 200x200dpi image, BUT show it with <img width=100 height=100>. On a non-HiDPI screen this is a bad idea as the browser compresses the image badly. But on a HiDPI screen the image is shown at 100x100dpi size, but with the entire resolution shown (because there are twice as many display pixels in each direction as there are old-fashioned 'pixels'). This, of course, increases bandwidth and makes the image worse for Windows users. Don't do this.

If, however, you use progressive JPG encoding for your images, the lower resolution 100x100 image is encoded into the 200x200 image. Retina screens will shown the high resolution image and non-retina ones the lower resolution image. This is a much better solution, very quick to implement (providing you're always defining width and height in your IMG tags, which you should be anyway), and solves both problems.

It is still, however, bandwidth-heavy for non-HiDPI users. So a better solution is to look for a Retina display (with a line or two of JS), and serve up the original picture or the high resolution one depending on what you find. If, like me, you are using PHP functions to serve any IMG tags up (because then PHP can determine the size of the image and create the correct width and height tags automatically), then you can simply get your php function to look for an alternative high-resolution image and serve that up if it's available and the user is on HiDPI. Best of both worlds, and allows you to slowly recreate all your images and gradually improve the look of the website for Retina viewers without affecting non-Retina viewers.

To the question about differing multiples of high resolution (1.5x, 2.5x and so on), the answer is that you have the choice. You can serve a different image up to every different multiple if you like (and this might just be worth doing for key logo headers or similar). But really that is likely to be overkill, and just serving up a 2x is likely to keep everyone happy for the foreseeable future. The MBPr assumes 2x HiDPI for all display modes, and *then* rescales up or down as required.

To the question asking why Microsoft are not getting their act together with Office and so on, it's probably because they're a bit miffed at being beaten to the punch again. They are going to launch Windows 8 with HiDPI capability. So it's more than likely that once that is out, there will be Retina-display Windows laptops. Then there will be Office to go with it...
 
This is exactly right. If you have an image, whether it's an icon, a photo, or a thumbnail, Windows (and non-HiDPI screens) will display it at the size you say. If the image is 100x100 and you display it as <img width=100 height=100> (forgive the dodgy syntax), then it will display as usual. And the same size but blocky on HiDPI screens. In order to make your website nice on retina, you need to serve up a 200x200dpi image, BUT show it with <img width=100 height=100>. On a non-HiDPI screen this is a bad idea as the browser compresses the image badly. But on a HiDPI screen the image is shown at 100x100dpi size, but with the entire resolution shown (because there are twice as many display pixels in each direction as there are old-fashioned 'pixels'). This, of course, increases bandwidth and makes the image worse for Windows users. Don't do this.

If, however, you use progressive JPG encoding for your images, the lower resolution 100x100 image is encoded into the 200x200 image. Retina screens will shown the high resolution image and non-retina ones the lower resolution image. This is a much better solution, very quick to implement (providing you're always defining width and height in your IMG tags, which you should be anyway), and solves both problems.

It is still, however, bandwidth-heavy for non-HiDPI users. So a better solution is to look for a Retina display (with a line or two of JS), and serve up the original picture or the high resolution one depending on what you find. If, like me, you are using PHP functions to serve any IMG tags up (because then PHP can determine the size of the image and create the correct width and height tags automatically), then you can simply get your php function to look for an alternative high-resolution image and serve that up if it's available and the user is on HiDPI. Best of both worlds, and allows you to slowly recreate all your images and gradually improve the look of the website for Retina viewers without affecting non-Retina viewers.

To the question about differing multiples of high resolution (1.5x, 2.5x and so on), the answer is that you have the choice. You can serve a different image up to every different multiple if you like (and this might just be worth doing for key logo headers or similar). But really that is likely to be overkill, and just serving up a 2x is likely to keep everyone happy for the foreseeable future. The MBPr assumes 2x HiDPI for all display modes, and *then* rescales up or down as required.

To the question asking why Microsoft are not getting their act together with Office and so on, it's probably because they're a bit miffed at being beaten to the punch again. They are going to launch Windows 8 with HiDPI capability. So it's more than likely that once that is out, there will be Retina-display Windows laptops. Then there will be Office to go with it...

very nice and elaborate analysis, thanks for this post, I was aware of most of what you are saying put it always helps when you read someone else's lucid explanation too. Having said that how was ms beaten to the punch about hidpi support? As far as we know apple's implementation doesn't even work well on their highest end hardware notebook model. MS is taking a more nuanced approach from what I can gather in terms of hidpi support because they have a lot of form factors to support, and arguably a better one it seems with no upscales and downscales then to fit the screen that's putting such a costly overhead on the rmbp at a very apparent performance hit so far.
 
If you can't figure out how to serve alternate image content to retina viewers and avoid negatively impacting SEO, you're probably not a great web developer in the first place.

It's not much different than responsive web design, which also requires additional code (and possibly images), but at this point is quickly becoming non-optional. Either you figure out a strategy now, or you wait and play catchup later.

okay so I have to program in code for 1% of the viewing base, then test it on Firefox, Chrome, IE and Safari(lol @ this last one). After that I have to double check this code every time a browser updates. Not only that but I have to keep 2 sets of images for everything.

yea...

Its not about playing catch up. The Windows manufacturers arent jumping on board with $3,000 laptops with 2 year old outdated hardware in terms of graphics cards, ram, HD space, etc.

You don't get it. SEO is key, and its stupid spending thousands upon thousands of programming dollars on 1% of the viewing base.
 
spets.. the argument is about optimizing web development for retina type displays. your rant comparing windows machines and going on and on about how you think macbooks are garbage reeks like a bad defense mechanism.

by the way, in a year every laptop is going to have 4k screens and theyll all be saying the same thing. might as well get a jump start.
 
spets.. the argument is about optimizing web development for retina type displays. your rant comparing windows machines and going on and on about how you think macbooks are garbage reeks like a bad defense mechanism.

by the way, in a year every laptop is going to have 4k screens and theyll all be saying the same thing. might as well get a jump start.

if the rMBP was ~$1000 - $15000 then yes it would make much more sense to jump ship and start programming for this because the Windows counterparts would jump on board but right now its pointless because not many can afford this luxury.

When developing websites, every kilobyte counts when it comes to page loading. Part of SEO is page load speed. 1% of the viewing base doesnt justify terrorizing your page for the rest of the 99%.
 
dude, in two years there wont be anything BUT retina density screens on pretty much every laptop. have you seen a tube TV in the stores lately? The retina screen isnt a gimmick, its the first step into a new panel standard. All youre doing is pining away your days until youre eventually going to have to do this anyway, so why not start learning now? i cant say this enough,in a very very short time youll see 4k screens on PC laptops, then all youll have is a very bad looking websites and an excuse that you "never got around to updating them"

heres an idea. how about updating your work for retina screens, buy a retina macbook pro, and take it to your clients to show them how sharp your work is? then write off the macbook pro for taxes and come out a hero. Just some advice
 
I was in BB yesterday and the salesman was telling some older gentleman "yeah, the retina thing is just apples usual confusing marketing. youll get just as good of a display on a 400 dollar laptop. And most people return the apple products becuase they get it home and dont know what to do with it.." and his conversation went on like that for another 3 minutes. thats enough proof that the world not only isnt ready, but they are being hoodwinked into thinking the retina is bunk.

When I'm in stores and I see sales people being stupid, I will just wait for them to leave and give the customer they were talking to the real facts. I once heard a guy in Best Buy saying that the Macbook Air was a stupid machine because it had a SSD with smaller capacity and that "people don't notice a SSD over a HDD". He also said that very few applications are available for the Mac OS and he constantly recommends against Apple. The sales guy walked away and I went to help out the old guy. He told me he didn't mind spending a premium to get something that won't fall apart like his 2 year old HP did. I told him that Apple is known for build quality and there's a lot more time put into an Apple machine vs. a typical Windows machine. I then told him how SSD's are the biggest speed advancement that modern computers have experienced in quite a while and that'd he definitely notice the speediness vs. a typical HDD. The guy really just wanted a good computer to do word processing, emails, and basic functions like that. He didn't believe me at first, but the more I was talking to him he started to realize the salesman was full of BS. I basically helped him find which MBA to buy along with a copy of MS Office, and he walked away very happy.

Turns out a few months later I saw the guy at a car dealership and he and his wife came to thank me for how happy and pleasantly surprised they were with their MBA. It's amazing how unintelligent and unqualified some sales associates are. Not saying that because the guy didn't recommend Apple, but because he used facts that were blatantly incorrect. I can't stand people that label all Apple products and not rate them on their individual qualifications. For example, some people still dog the MBA because when it was first released, it was underpowered. Some of the same things that were corrected as the newer generations were released are still being ridiculed though those problems don't exist anymore. And as you said, I'm sure we'll see a lot of this same crap with the Retina display. It's unquestionably way clearer, don't see how you could argue that...
 
very nice and elaborate analysis, thanks for this post, I was aware of most of what you are saying put it always helps when you read someone else's lucid explanation too. Having said that how was ms beaten to the punch about hidpi support? As far as we know apple's implementation doesn't even work well on their highest end hardware notebook model. MS is taking a more nuanced approach from what I can gather in terms of hidpi support because they have a lot of form factors to support, and arguably a better one it seems with no upscales and downscales then to fit the screen that's putting such a costly overhead on the rmbp at a very apparent performance hit so far.

Thanks for the comments. Re: "beaten to the punch", that's simple. Windows doesn't have HiDPI support but OSX does, and it's available now in the shops in the MBPr. It has been available for a while in the iphone 4, 4s, and ipad3. I don't know what you mean by "more nuanced approach" at all. Windows 7 doesn't support it but Windows 8 does. "Apple's implementation doesn't even work well"? I take it you're not using an MBPr right now, if you can say that. Sure, most applications and websites aren't making the best of the new technology that's available, but they certainly will in the future, both for OSX and for Windows 8. Retina displays aren't a step backwards nor do they "not work" just because of existing websites. What they are is an indication of what future computers will be like, and they allow the opportunity for website and app designers to make more beautiful websites and apps. They will be doing that, you can be sure. Some website designers who care more about search engine position than actually providing a useful website are going to ignore it for a bit, until it starts to impact their search engine positions. Those website designers who want their sites to look great are already starting work...
 
It's so easy to make your website retina capable. If you've ever worked with print it's a similar concept. You don't have to change your work if you design with vectors.

As it is on rMBP you can essentially design at 72ppi, no different from any other screen. Then you simply export your image with a certain resolution, say 220ppi for the rMBP. On your website you can use JS to check the screen scaling and substitute the appropriate style sheet based on the result. It's the same process we're all used to in trying to get things to work cross browser or to recognize mobile devices. Except the difference in this case is anyone who gets this experience is seeing your site with it's visual appeal tripled.

This capability actually makes it EASIER to design for the web because designers no longer have to fart around with shadow and highlight "hinting" to manipulate low res screens into showing details that are lost when your work in AI or PS is scaled and exported for 72ppi. Seeing my work at retina resolution on the rMBP has been a visual pleasure no other screen can provide. It's truly beautiful.

Anyone who doubts that Retina screens won't take over hasn't had the pleasure of using one. It's over and done with, 220ppi is the gold standard now.
 
dude, in two years there wont be anything BUT retina density screens on pretty much every laptop.
I wouldn't bet on that. I fully expect that the screens will appear running Windows 8 (provided everything works well technically), but cheap laptops will probably continue to appear with cheap screens for a while. Probably all the more so where desktop PCs are concerned.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.