A much simpler way to serve retina displays the right images

A while ago, I wrote a post showing how to serve high resolution images to people using retina displays such as the iPad, iPhone, many android tablets, and retina Mac Book Pros (I use one of those which is why I am interested in this). I have now found a far simpler way to do this than I explained before and it all hinges on simply giving a id tag to the image and replacing the src property of the image in a javascript. You still need to have statement in your site's CSS:

<script type='text/javascript'> var retina = window.devicePixelRatio > 1 ? true : false; </script>

Then in your post you call an image the usual way but making sure to add the image width and height specifically as well as pecifying an id

<a href="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/ZionNP/10459860_zVKwP3#!i=725608231&amp;k=Bm22LF3&amp;lb=1&amp;s=A" title="Tree and glow"><img alt="Tree and glow" height="600" id="zion_011213" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t5v3tX1jjY9cQow4NFIyH79R9DFCVUjKHfG7oqQyiPyfrghuytWw8DLNPgsCSNvyodRWwh4StWTY0VZBnFuHtag2eFz0GE5EfGrZBEo8ETHODI2vQkh7SEoWesf6xc2RbsiP7VdvdJWiNcGKAIiqDvTU53NFoij6H8SYbRgc6bWlc8WBRbiqsNqW0=s0-d" title="Tree and glow" width="480"></a>

Then at the end of your html, or the end of your blogpost include the following:

<SCRIPT type="text/javascript"> if (retina) { zion_011213.src="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/ZionNP/i-Bm22LF3/4/X3/_DSC0517-_DSC0525-X3.jpg"; } else { ; } </SCRIPT>

This replaces the image in the img tag above with this one that is precisely 2x larger in both dimensions (so 4x in area) and therefore fits retina displays perfectly. I don't think the else part is needed but I like to be neat. A disadvantage of this method above the previous one I talked about is that browsers might end up loading both the low resolution and high resolution image. On the other hand using this method makes your post share correctly on social networks with the image intact. Using the older method the image would never show up. Now to make it complete, here is the actual image referred above:

Tree and Glow. Buy a print. On flickr.
This image is a redo of a 9-image high resolution composite I created in The Narrows in Zion National Park.
A quick way to test the effect is to compare this image in a web browser that supports retina/hiDPI such as Safari and Chrome, to one that doesn't such as old versions of Firefox (15 and below). Of course this only makes sense if you are actually using one of those displays.

Lightroom 4.3 RC supports retina displays

The just released LR 4.3 RC now supports retina displays (i.e HiDPI) in Develop as well as the minor support that was already there in Library. It's just gorgeous. Aperture already had this support but I prefer Lightroom myself. Check it out in the link above! Lightroom now also fully supports the D600 with camera profiles. Much appreciated!

Detecting retina displays

Was just reading up on how to detect retina (HiDPI) displays and I am trying this out on this post.

For you nerds, I added a javascript function to my blog's CSS that looks like: <script type='text/javascript'> var retina = window.devicePixelRatio > 1 ? true : false; </script> Then in the post's body I use a statement like <p id="wavesimage"></p> <SCRIPT type="text/javascript"> if (retina) { var sandhtml = '<a href="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/Great-Sand-Dunes-National-Park/5800393_KkCSbn#!i=1545566790&k=r6gmsz3&lb=1&s=A" title="Waves"><img src="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/Great-Sand-Dunes-National-Park/i-r6gmsz3/0/798x1200/DSC0869-798x1200.jpg" width=399 height=600 title="Waves" alt="Waves"></a>'; } else { var sandhtml = '<a href="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/Great-Sand-Dunes-National-Park/5800393_KkCSbn#!i=1545566790&k=r6gmsz3&lb=1&s=A" title="Waves"><img src="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/Great-Sand-Dunes-National-Park/i-r6gmsz3/0/L/DSC0869-L.jpg" title="Waves" alt="Waves"></a>'; } document.getElementById("wavesimage").innerHTML=sandhtml; </SCRIPT> This post was inspired by what I read here. It seems to work. This is becoming more and more relevant with all the high res displays on mobile platforms as well as the retina displays that Apple is pushing.

Lightroom does support retina displays! (but only partially)

I broke down and bought myself a new retina Mac Book Pro a while ago. This is an amazing machine and that display is absolutely stunning. One thing that I thought is that Lightroom needed an update to support the retina display (Aperture and iPhoto already support it and they look fantastic) so I wasn't expecting that much from Lightroom. However after browsing for a while through my library I started noticing that the Library previews were really sharp. Taking a screenshot and blowing it up confirms that Library actually is using the full retina resolution, regardless of what setting you use for the display scaling. That is superb. Unfortunately Develop doesn't yet know about the retina display so there you still get the low resolution which makes for a big difference in feel for the image. I did notice that it is probably a good idea to turn up the size of your standard previews to get the full benefit. Here is the proof using 1:1 screenshots.
Left: Library fit view. Right: Develop fit view.

Ironically you will see the difference between these two better on a non-retina display as the browser doesn't automatically scale 1:1 but you get the gist.

Update: for retina owners, here the same screenshots at what should be 1:1 if you use "best for retina"

Retina

Normal in line image:


Retina quality (2x resolution). Will look no different than the above on normal displays but will look much more detailed on a high res display. The slight size difference comes from my smugmug site not having the image at every size.


I was reading a little on how to start supporting high resolution displays (i.e. retina displays in Apple parlance). Not easy as all solutions involve some server-side scripting that doesn't work if you use blogging services such as this site. Of course you can simply throw up high res images for everybody as I do above but that increases bandwidth for everybody.