When I was building this new website, I was debating whether to create it retina-ready or not. Creating the images themselves is not a problem, it’s the availability of retina products out there and the bandwidth.

The MacBook Pro Retina, alongside other Apple products such as the iPhone 4s and iPad with Retina are some that are available to take advantage of such crisp images. So, in reality, my target audience would most likely be Mac users, which is fine, I’m one of them!

The downside is that I’m not hosting my site on a dedicated server, and serving such large images can really slow down my site. The galleries for each of my projects have images as big as 1000×500 pixels. they can go up to 180KB in size. To make these images Retina-ready, I have to double them up in size, to 2000×1000 pixels, and with that, the size doubles as well, but they look stunning on the display.

I love how it looks that I decided to slowly update all my projects to be Retina-ready, and I might end up moving my site to a faster server to compensate for such large images.

A script I use to figure out if the user is visiting my site with a Retina display is Retina.js. From the Retina.js website “When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.” Check it out if you’re interested in making your own site Retina-ready. http://retinajs.com

In the meantime, all my portfolio pieces on the homepage load for Retina-ready displays, but not the actually gallery images inside, except for the DCUO website, which you can visit here.