As a graphic designer, I feel embarrassed that my blog has had a very mediocre design for the last years.  To be honest, it’s kind of like the interior designer whose house is a clutter of unintentional and mis-matched furniture, or the chef who opts for a mac n cheese dinner over risotto when cooking for themselves.

The truth is, my blog is mostly a recreational endeavor, so it doesn’t get the intentionality a good design requires.

But last week I finally invested an evening redesigning this blog. And in doing so, I unearthed a vice that’s effecting probably every travel blogger out there.

You don’t have to be a graphic designer to fix your travel blog design

Before you bounce off this post or send it to your graphic designer, know that everything I’m talking about here can be done by any blogger.  You don’t have to download plugins or dig around in your code or anything.  The fix I’m discussing in this post is pretty specific, and pretty manageable for anyone, so stick with me.

The photographic traffic jam

Why is this a common problem for travel bloggers?

In the book 100 things every designer needs to know about people, the behavioral scientist Susan Weinschenk explains that photographs trigger the emotional part of a person’s brain- a generally positive thing when you’re hoping to grab someone’s attention or commitment. She says this is especially true for photographs of people.

Well if there’s one resource that I have in plenty, it’s photos. Not just thousands of photos…terabytes of photos.  And I know this is true for many of you travel bloggers out there.

Why not? It’s a powerful way to get people enthusiastic about the subject of our content.

What is “load time” and why does it matter?

But herein lies a problem.

I just spent over an hour examining 100 different travel blogs and almost all of them have horrible load times. Yes they have gorgeous and enticing photos but you only get to see them if you’re willing to wait, in some cases, 60 seconds!!!!!  Can you remember the last time you sat in front of a computer to let something take that long to load?  The last time I waited that long for something to load I was in a tiny village in Bali, or logging onto AOL instant messenger on a dial up computer.

Load time is very simply the amount of time it takes for a website to fully load. And it’s very important given that, according to this inforgraphic by KISSmetrics, most people only wait 6-10 seconds for a website to load before abandoning the page all-together.

So to put it simply, the longer it takes for your website to load, the more traffic you lose.  And even if you don’t have a travel blog that you monetize, I imagine you want people to actually read what you’re taking the time and effort to publish.

How can you fix this problem?

1. How much is too much?

   Start your photo traffic jam fix by just evaluating how many of your existing photos are important.  It always strikes me how much impact National Geographic can make with a single, high quality photo on a page.
   By contrast, I’ve seen websites that include a graphic header for the website’s title followed by a slide-show of full-width photos, followed by a blog roll with a featured image for each post, followed by an instagram roll in the footer widget, a personal photo in an about me widget, and a graphic background for a call-to-action section.This is not to say that one is the optimal number of photos.  I don’t think there is an optimal number- just an intentionality for recognizing when a page has crossed the line from impact to clutter.

   How can I test my load time?

   The tool I’ve been using to test my load time is tools.pingdom.com.  Simply plug in your web address and a location you’re curious about testing.

   In my experience, this isn’t a 100% accurate tool and is better seen as an approximation, effected by your own internet speed. But it can be a good way to test the effect of certain changes, for instance, testing the difference between “optimizing” your photos, and uploading them straight from your camera. (We’ll talk about that in a second.)

   Here’s an example of how my load time changed after I resized and optimized my header photo.

   

   Before optimizing header photo

   

   Load time after optimizing my header photo

   Even if it’s not exact, it definitely indicates improvement.

2. Pay attention to the photo’s pixel size:

   Pixel size can effect a photo’s load time so if you do nothing else, at least resize your photos to something reasonable.  Your photos don’t need to be any bigger than 1200 px wide.  Unless you have a wordpress theme that suggests a certain pixel size for a header or banner or something, in which case, make your photo that exact pixel size suggested.Aside from pixels, you also have to pay attention to the photo’s file size.  That’s where optimizing comes in.

3. How do I “optimize” photos, and what does that even mean? 

   What is optimizing:

   For the most part, no one can tell the difference between a photo that’s uploaded at its highest quality and one that’s compressed or “optimized” into a smaller file that loads more easily on the web.Can you tell which of these photos I compressed and which one I didn’t?
     
   One of these photos is more than 4 times larger than the other, and yet I’d argue it’s not 4 times better.  So practically speaking, optimizing your photo simply shrinks the file to a size that loads more quickly, but still looks just about as good.

   Here you can see an example of how the file size of my header image changed with each step, starting with the original header photo, then the resized photo, and then the photo that was both resized and optimized/ compressed.

   

   Original header photo

   

   Header photo resized to the exact pixel sized recommended by my theme

   

   Header photo after resizing and optimizing (compressing)

   How to optimize:

   If you don’t have a photo editor, here’s how you can optimize your photos:

   If you don’t have a photo editor, there are several free online tools that help you.  When choosing which tool to use, make sure the tool is actually resizing the file, and not just the pixels.  Do this by paying attention to the before and after file size, which the tool will provide.

   Jpeg-Optimizer is the tool I tested out for this post, but this article provides a few other options as well as some other helpful tips.

   When I tested Jpeg-Optimizer, it did just as good a job as my Photoshop.

   Using Photoshop to optimize your photos:

   If you have Photoshop, all you have to do is save your photo by selecting “save for web” instead of the usual “save” or “save as”.  This will give you a screen where you can make all kinds of decisions.  The only decision I worry about however, is the file type option.

   
   Generally Jpeg will be a good option for maintaining a reasonable quality as well as a reasonable file size.  Otherwise, leave the other settings as they are.

   The easiest method- adjust the quality in the “save as” screen of any generic photo editor:

   Most generic photo editors include a “quality” slider when you hit “save as” for a photo file.  This includes the “Image Preview” program on the Mac. Again, Jpeg is a good option for maintaining good quality while simultaneously not having a huge file.  So in your photo viewing software, save your image as a Jpeg and slide the slider down so that it’s not all the way to the highest maximum quality.

   If you are looking for the simplest solution, do this.

   

Conclusion

Try testing the load time of your website and see if you’re consistently coming in under 10 seconds.

If nothing else, start by optimizing the images that are part of your design like header images and widget images by simply opening your photos up in a generic photo viewer, resizing to a <2000px size, saving as a Jpeg, and adjusting your quality slider somewhere lower than the “best” option.

My hunch is that this will reveal the greatest change in load time for those of you who have full-width photographic headers, or photographic backgrounds to certain sections of your site. Especially any of you who are shooting photos with a DSLR of some kind.

Let me know if any of these changes helped your load time!