How to preview the Retina display enhanced Apple.com in Safari on Mac or PC
Apple's official website has been quietly updated to take advantage of the Retina display on the new iPad. Users can preview the higher-resolution site now with a simple tweak in Apple's Safari desktop Web browser.
As AppleInsider first reported earlier Tuesday, Apple has begun upgrading portions of its website with high-resolution images that are large enough to fit on the third-generation iPad's Retina display. These images can currently be found on the Apple.com homepage, as well as the iPad portion of the site.
Though it was previously believed that users needed to enable HiDPI resolutions with developer tools on their Mac to view these images, there is a workaround that will allow any desktop Safari user to view the Retina display enhanced images on Apple.com. The method was first discovered by Macotakara.
To do this, in Safari choose Preferences, then Advanced and check the option "Show Develop menu in menu bar." Users can then right-click on the Apple.com homepage and choose "Inspect Element."
From there, choose the "Console" option to the far right, paste the following, and press return:
Quote:
AC.ImageReplacer._devicePixelRatio = 2
new AC.ImageReplacer()
AC.ImageReplacer._devicePixelRatio = 2
new AC.ImageReplacer()
The Safari developer console should then respond with "klass." the "Inspect Element" menu can now be closed. Then, under View, choose Zoom In.
Above: Regular Apple.com. Below: Enhanced for the new iPad's Retina display.
With this method, users of both Mac and Windows can get a close-up look at the graphics that are designed to take advantage of the Retina display on Apple's new iPad, set to launch this Friday. Zooming in on the image on the main page with the Retina display enhanced images shows the text remains crisp. Users can then refresh the page and zoom in without the tweak enabled to see how the image text displays jaggy edges when it isn't enhanced for the new iPad.
Above: Apple's regular iPad features site. Below: Sharper text from the enhanced site.
The Retina display enhanced graphics are also visible with the images and text on the iPad section of Apple.com. To view them, repeat the steps above when at the URL apple.com/ipad or any of its subsections.
[ View article on AppleInsider ]
Comments
Retina MBPAirs... whatever they're going to call them can't be too far down the road.
'The new MacBook Pro?' 'The new MacBook Air?'
Drop the 'Mac' all together... 'iBook?'
hmm...
Error:
line: 2
message: "'undefined' is not an object (evaluating 'AC.ImageReplacer._devicePixelRatio = 2')"
sourceId: 2116261888
__proto__: Error
New
Viewing the Mac area of the site and the iPad area on my 27" iMac set to HiDPI, you can really tell the difference.
you can find the apps at:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/Simulateur iOS.app
start Safari inside iPad (Retina) and try to visit apple.com, I don't know if it's gonna give you exactly how the new iPad will display but it's very very big
The broadband companies better hurry up and start making fibre to the home standard everywhere.
Looking at the HTML for the Resolutionary image the javascript changes it from
<img src="http://images.apple.com/uk/home/images/ipad_title.png"; alt="Resolutionary" width="471" height="93" class="center">
to
<img src="http://images.apple.com/uk/home/images/ipad_title_2x.png"; alt="Resolutionary" width="471" height="93" class="center" data-hires-status="replaced">
Can't wait to see this on my new iPad when it finally arrives... still waiting for shipping notification though so it's looking like it won't be here for Friday
I ordered on the 10th and was surprised to see it has shipped already and is due to arrive...well...Apple estimates the 15th and their own tracking link estimates the 16th. Either way, color me excited!
Man, does this mean I'm going to have to start quadrupling the resolution of the images on all the sites I design?
Worth the fuss if you're going to have a large audience using devices such as this. It will probably become more prominent down the road. It wouldn't be worth it in many cases if there's not a large audience of that sort coming in...
The question is how many websites are actually going to upgrade their site just for the iPad?
How is that even a question? Sites killed off Flash because of iDevices; you can bet they'll push higher-res images for the only segment of the market that is actually growing.
How is that even a question? Sites killed off Flash because of iDevices; you can bet they'll push higher-res images for the only segment of the market that is actually growing.
It will probably take a while for this to start happening in meaningful numbers. I imagine we'll see some quick upgrades on sites with a large Apple fanbase, but beyond that adoption will be slower. Web designers are also going to need to decide on some comfortable approaches to solving this problem (other than throwing high resolution images at every page view). Additionally, it doesn't combine well with some current tricks, such as using sprites.
If it looks better on a regular screen why the heck wouldn't they already have upgraded the site?
The only reason why it should look much better on a regular screen is if you're zoomed in. The resolution hasn't changed. Safari does a great job of anti-aliasing resized images so that's definitely a bonus, and downscaling a large image eliminates most quality loss that might be associated with aggressive compression of the smaller image but Apple also goes out of their way to use crisp edges on their images and doesn't over compress. It *would* look much better on devices with high-dpi screens, such as the iPhone 4.
And the main reason why they won't release this for everyone, at least while most viewers are not using devices capable of doing this justice and it is easy to track the ones they do want to target, is that these high-resolution images are much larger, and significantly increase bandwidth requirements and slow page loading significantly for people with slower connections.
If it looks better on a regular screen why the heck wouldn't they already have upgraded the site?
Bandwidth. I would not want to see Apple's ISP bill.
If you're getting an error, first ensure you've updated your Safari to v5.1.4.
Works in Safari 5.0.5 Rather impressive
It says:
Error:
line: 2
message: "'undefined' is not an object (evaluating 'AC.ImageReplacer._devicePixelRatio = 2')"
sourceId: 2116261888
__proto__: Error
I'm getting the same error. I have Safari 5.1.4...