<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x" alt="Example of the srcset attribute. Image contains a coloured striped pattern with some inline text that indicates which of the candidate images were selected.">
WebKit now supports the srcset attribute on image (img) elements. This allows you, the developer, to specify higher-quality images for your users who have high-resolution displays, without penalizing the users who don’t. Importantly, it also provides a graceful fallback for browsers that don’t yet support the feature.
retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays
What the script does is loop all images and do a HEAD request to the guessed @2X version in order to see if it exists. On success the retina version will be loaded in. Of course you’ll need to keep your naming scheme consistent.
This command will update each Office for Mac app modification time, after which Finder will reload each app’s info.plist file (which, amongst some other properties, defines if an app can be opened in Retina mode or not).
Eclipse based products such as Aptana Studio or Zend Studio are not retina-ready. Luckily, there’s a way to force it to running in Retina mode. Just follow these instructions:
Locate Aptana Studio.app
Right click it and select Show package contents
Open Contents/Info.plist with your favorite text editor
Locate the two lines that read
Above those two lines, insert this:
Save the file
Right click Aptana Studio.app and select Get Info
Confirm that the info panel has the checkmark Open in Low Resolution unchecked
Note: It’s possible that Finder won’t detect the changes you made. In that case make a copy of Aptana Studio.app, delete the original Aptana Studio.app and rename Aptana Studio Copy.app to Aptana Studio.app
Aptana should now look like this:
It’s not ideal yet as the chrome icons are still blurry, but it’s a great leap forward nonetheless: text is now rendered very crisp.
Safari 6 and Chrome 21 added vendor-prefixed support for the proposed CSS4 image-set specification. This proposed specification is designed to support displays with different pixel densities (read: retina displays).
background-image: -webkit-image-set(url(image.jpg) 1x, url(email@example.com) 2x);
/* Also include other prefixed versions of this ... */
background-image: image-set(url(image.jpg) 1x, url(firstname.lastname@example.org) 2x);
My brand spanking new Retina MacBook Pro, only two weeks old, is suffering from burn-in issues (screen set at full brightness, burn-in happens in less than a minute, all back to normal after less than five minutes)
If one of the codes starts with LP, then it’s an LG screen. If it starts with LSN then it’s a Samsung one.
UPDATE: Already called the store where I bought it and they’ve ordered a replacement Retina MacBook Pro screen. Once it arrives I’ll have to turn in my MacBook Pro for about an hour to get the replacement done.
UPDATE2 – 2012.09.22: Screen got replaced (for free). Again an LG, let’s see how this one goes.
UPDATE3 — 2012.10.10: One month later I’m having the same issue again. Back to the Apple Store it is.
UPDATE4 — 2012.10.16: Got a new replacement screen, a Samsung this time. In the store they also told me the screens have gotten a new partnumber sometime in the past few weeks.