about shop patterns projects printables extras sponsorship wild olive twitter flickr pinterest subscribe

formatting photos for retina display

RetinaDisplays1


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!

Embroidery colors

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.

Embroidery colors

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.

Embroidery colors

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?

9 comments:

  1. I had no idea! Thank you for sharing; it's very helpful!! I'm going to bookmark this page right now.<3
    And your blog photos are uploading fine; I use an iPad.

    Vegetarian Courtesy

    ReplyDelete
  2. I started reading and in my head it sounded like Charlie Brown's teacher! I have no head for tech stuff. Glad you figured it out though!

    ReplyDelete
  3. It is my understanding that the larger the size of the image, the slower it takes to load. I often have this problem when trying to load a Miss Mustard Seed post, and I think to myself, These images must be huge. Again.

    It's also my understanding that the images on Blogger (which I use) are all free if they're no greater than 800 x 600 pixels. I had no clue about formatting images for retina display, but I have noticed for years that all my images are indeed blurring unless they are *clicked*. Then they are (only) as crisp as you captured them.

    This post was interesting and I will go check this out some more!

    Hugs and happy week,
    Kelley~

    ReplyDelete
    Replies
    1. It is true that larger images take longer to load. I read about a work around for if you self-host images on your own server (not Blogger or Flickr) but it means saving two separate images, and using a script to display the correct one.

      I've found that Blogger will often choose a smaller image to display than the actual size of what you uploaded. Here again, you can tell Blogger to use the actual size of your image file in the line of HTML code.

      Delete
    2. Mollie,

      Would you share that reading you found for using the HTML code for the actual size of images please?

      Thanks!
      Kelley~

      Delete
    3. Here's what I found: http://briangardner.com/optimize-images-retina-display/ (I've also added the link in my post)

      Delete
  4. Great info! Unfortunately, my work has flickr blocked so I can't see any of your photos in this post from here, but I'll check it out from home sometime! :)

    ReplyDelete
    Replies
    1. Does this mean that you never see images on my blog? Because almost all of the images in my blog posts are through Flickr.

      Delete
  5. This is interesting. I was just looking at your clay necklace post and the pictures did take a while to load.

    ReplyDelete

I often reply to comments in the comments...check back if you have a question!