WebKit now supports srcset image attribute

<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.

Improved support for high-resolution displays with the srcset image attribute →
srcset Demo →

Retina.js

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.

Retina graphics for your website →
Retina.js Source (GitHub) →

Office for Mac 2011 Retina update not working — Fix!

Today Microsoft released a Retina update for the entire Office for Mac suite. After installing it however the apps still opened in non-retina mode. A reboot didn’t help either.

Turns out Microsoft forgot to change the modification date of each Office for Mac app, a date which Finder uses to detect any changes — such as Retina support — in any app.

To force Finder detecting the new versions of the apps, run this command at the terminal:

touch /Applications/Microsoft\ Office\ 2011/Microsoft\ Document\ Connection.app /Applications/Microsoft\ Office\ 2011/Microsoft\ Excel.app /Applications/Microsoft\ Office\ 2011/Microsoft\ Outlook.app /Applications/Microsoft\ Office\ 2011/Microsoft\ PowerPoint.app /Applications/Microsoft\ Office\ 2011/Microsoft\ Word.app

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).

Running Aptana Studio/Zend Studio/Eclipse on a Retina MacBook Pro

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:

  1. Locate Aptana Studio.app
  2. Right click it and select Show package contents
  3. Open Contents/Info.plist with your favorite text editor
  4. Locate the two lines that read
    </dict>
    </plist>
  5. Above those two lines, insert this:
    <key>NSHighResolutionCapable</key>
    <true/>
  6. Save the file
  7. Right click Aptana Studio.app and select Get Info
  8. 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.

CSS image-set in Webkit (Safari/Chrome)

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: url(image.jpg);
background-image: -webkit-image-set(url(image.jpg) 1x, url(image@2x.jpg) 2x);
/* Also include other prefixed versions of this ... */
background-image: image-set(url(image.jpg) 1x, url(image@2x.jpg) 2x);

Safari 6 and Chrome 21 add image-set to support retina images →
Related: High DPI images for variable pixel densities →

Retina MacBook Pro Screen Burn-In

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)

Turns out I’m not the only one.

The problem seems to affect MacBook Pros sporting Retina Display’s built by LG, rather than those manufactured by Samsung

Oh the irony 🙂

You can check if you have an LCD built by LG by running this command:

ioreg -lw0 | grep \"EDID\" | sed "/[^<]*</s///" | xxd -p -r | strings -6

Result should be something like this:

Color LCD
LP154WT1-SJA1
DCN228419G2DMJ0AT

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.

Retinafy your web sites & apps

Now that phones, tablets and laptops use high-resolution, “can’t tell it’s pixels” displays it’s time to take the plunge and make your sites and apps ready for retina.

With my ebook you’ll be up to speed in no time, with easy to follow step-by-step instructions on creating stunningly beautiful high-resolution websites, that load fast and work in any browser

By Thomas Fuchs.

Retinafy.me →