formatting photos for retina display

Fair warning: This is a geek post for people with blogs. It's also long. You've been warned.

Not too long ago I decided that it was time for me to get a new laptop. It has already resulted in my getting more patterns made whilst keeping me engaged with the people around me. It was a good choice.

One of the features on my new Mac Book (which of course, I bought before the new models were announced) is retina display. This never seemed like a big deal to me, and wasn't important, and then I experienced it. Everything on the screen is so clear, so crisp, so beautiful! Except my blog wasn't.

My blog images displayed kinda blurry on my new screen, and I didn't like it. And if it looks that way to me, it must look that way to others with retina display. And I looked at other sites and found that some blogs and websites look good, and others have that same blur.

But before I get too far, let me show you what I mean. Some of this will be simulated to account for different displays, and I'm hoping that it works properly!



Above is how this photo should look on any computer screen. I've made some adjustments to my image coding and size to have it look pretty on a retina display.



The image above now has different settings. If you're on a standard monitor, a laptop, or mobile device, this probably looks fine to you as long as you don't zoom. But if you're viewing on a retina display, notice that the photo just isn't as crisp.



Now, this last image shows the blur, even if you're on a standard display. Without adjustment, this is how all the images on my blog (and potentially yours too!) look on a retina display. (On retina, it's just plain scary.)

Now, is this a big deal? Is anyone hurt by this? Certainly not. But whenever I can, I want to present things in the best way possible. As I learn something new, I want to improve! I want to go from good to great! Plus, I have a feeling we'll be seeing more of this sort of display coming along.

So, here's where it gets technical.

Photos are made of pixels, and my main blog column is 640px wide. So, I've been displaying the photos at 640px wide. That works for standard monitors.

Retina displays work by displaying twice as many pixels in the same space. So a 640px wide column actually shows 1280px. Tinier pixels all squished close makes the display so pretty! (I suppose that wasn't the most technical description...)

A Google search for retina display blog photos turns up some help on the topic, and I recommend having a look at that to find possible fixes for your blog platform. (This one didn't work for my blog, but helped me a lot.) Here's how I fixed mine.

My photos are hosted with Flickr.

I create all of my photos at 1280px wide or more. Actually, I usually make them at least 2000px wide, just so that I have edited copies at a larger size.

When I grab the html code from Flickr to place the images in my blog posts, it gives the option to choose what size you want. Instead of choosing the one that is 640px wide, I now choose the option for 1600px wide, or whichever is closest to 1280px, but still larger.

For your blog, you would choose whatever is closest to twice your blog width.

In the code, it tells the width and height that the image will display. I change the width to 640px and remove the height (it's not necessary, and I don't want to always do the math).

You're done! Now the images will display properly for both standard and retina displays!

And now I have to decide if I should go back in my blog posts and fix the images, or just move forward. I still have things to fix elsewhere on my blog (including my sidebar), so we'll see where I go with this. But I thought I'd share this sooner than later so you could get a jump on it...if you like geeking out about this sort of thing too!

Hopefully it's been helpful, and if you have any questions, I'll do my best to answer intelligently!

And a quick question for you: Have you noticed that the images on my blog are loading a lot slower lately, or about the same?