Retina-enabled Tumblr in 5 minutes
09 Jan 2013I've been really liking how Marco and Duncan Davidson are showcasing Retina images on their blogs lately. I wanted to try for the same effect but wanted to stick with Tumblr and not invest much effort into the process.
First I did some quick poking around with uploading images and letting Tumblr do it's thing... and was slightly disappointed. It seems the maximum rendered display width is 500px and the maximum zoom width is 1280px. If that's all you need, great. You could just upload 1000px wide images and quickly wire up Retina support with some JS and creative use of the {PhotoURL-HighRes} and {PhotoURL-500} tags.
My goal was the large, wide images like Duncan and Marco. 500px wasn't going to cut it. Luckily I'm a SmugMug subscriber and two of the thumbnail sizes they offer are 800px and 1600px. Isn't that a nice ratio?
Here is what I ended up doing:
- Pull source images from an existing service that offers a variety of ready to use resolutions (SmugMug in my case)
- Add a snippet of Javascript to upgrade the images from standard to retina-quality for devices that support it (rewriting SmugMug URLs is super easy - here is what I went with)
And here is the result:
In the future I might try using SmugMug's 1024px thumbnail down-sampled to 900px for the non-retina version. 800px looks a little narrower than I like, but I'm going to give it a little bit and see if it grows on me. I realize that using a 1600px wide retina image down-sampled to 900px might upset purists, but I have a feeling it would look pretty damn good - and definitely much better than the original.
Update: Oops, had to tweak the Javascript URL matching regex a bit.... this image wasn't actually Retina quality at all earlier.