I recently left my company of seven years and started a job at a start-up in downtown Portland. I love it so far. It’s been a challenging transition (because baby) but also pretty rewarding.
One of the sweet perks of this new position is that we are very much an Apple-centric work environment. My new laptop is something that I never in a million years would hope to afford for home use. It has a Retina display that makes ordinary text on a webpage so easy to read. When I’m at work and I switch from my secondary monitors back to the screen on my laptop, I can actually feel my forehead relax because my eyes don’t need to strain. Anything that’s in vector format looks crisp and amazing, just like the screen on my iPhone 4. Pretty fun stuff.
This has unintended consequences, however. On my work laptop, the text in this website looks fantastic. However, the graphics in it looked like something that came out of a dog’s anus, and not a particularly cute dog, either. For instance…
Logo without Retina display optimization on an average screen:
Same logo on my sweet laptop, without Retina display optimization:
This is simulated but honestly, it’s pretty accurate. Look at the difference! As we say in America, that dog won’t hunt, and not just because that dog has PNG files coming out of its butt.
A quick search on the Googles revealed this very informative article from the geniuses at Smashing Magazine. There are a variety of tricks you can use to optimize your site for a retina display, but the simplest is to make your graphics twice the size and use CSS or IMG tag width and height attributes to re-size them down by half. This way, the retina display doesn’t have to size a graphic out to fit the intended dimensions. There’s no discernible difference in the quality on a normal display. Admittedly, the file sizes are now almost four times greater because of the doubling of the width and height but the files weren’t that big to begin with. It’s possible to do normal and retina versions of each graphical element and write in some CSS logic that only serves up the larger files for visitors with retina displays, but whatever.
Now, my site is retina display ready. I had to go back into my source files and recreate some of the graphical elements but all and all, this took about an hour to do. Now, I have to say, the site looks quite fantastic.