Friday, February 11, 2011

The 4 best ways to use photos on your website

Most websites, if not all, look much better with good pictures. But what is the best way to present those pictures? Believe it or not, you can make your website look unprofessional even with the best of pictures.

It's not just how good your photos are that matters, but also how you present them. For example, if your website is cluttered with photos then it won't be attractive. No one likes clutter.

Another way to make your site look unprofessional even with good photos is to not size them properly. If they're too small then they're unimpressive and won't get noticed. If they're too large than they're overwhelming. The right balance is necessary.

Here are the 4 best ways to incorporate pictures into your website:

1. A "thumbnail" photo gallery

Explanation: Take your photos, and make 2 copies of them. One copy is the full sized photo, the other copy is a small little "thumbnail" version. Set it up so that when the users clicks a thumbnail, the full size version pops up in an attractive format.

Example: Our portfolio page at www.freshlookwebdesign.com/portfolio

Benefits: You can post a lot of pictures without slowing down the page load speed because the large images aren't loaded until you click on them.

Downside: No huge downside here, but one thing is that the thumbnails on the page won't look as good as a full sized image would. In other words, there's no real aesthetic value until the images are actually clicked on.

2. Scattered images

Explanation: Instead of having only a lot of text on a web page, put some photos here and there to break it up and make it look more interesting. This style is similar to what you might find in a newspaper where you have a story with a photo off to the side with a caption.

Example: www.oldhouseauthority.com/about

Benefits: Scattering images makes an otherwise boring page look much more interesting. It also won't slow down the page load speed because typically you only have 2 or 3 images...and if you happen to have a couple more than they're far down on the page and the reader can view the top portion while the rest of the page loads in the background.

Downside: If you include too many pictures it looks very cluttered. You need to have a good text to picture ratio...make sure that there's still a lot more text than pictures. If you have too many pictures than you'll need to use a photo gallery like a...

3. Controllable Slideshow

Explanation: A controllable slideshow is a user controlled picture slideshow. The user is automatically shown the first picture, but is required to click "Next" to make the next picture appear. Another way to do it is have small thumbnails below the slideshow which can be clicked on.

Note: Sometimes these slideshows are set up so that when you click "Next" the entire web page has to reload. We don't like that kind. It takes too long to wait for the next photo to reload every time.

Example: www.oldhouseauthority.com/experts/chandelier/roeper.php

Benefits: With this type of slideshow you save a lot of space. You can put a dozen or more pictures in a box which conserves space for your text. And it of course gives the user control over what pictures they want to look at.

Downside: This type of photo gallery sometimes takes longer to load initially. That's because it's loading all the pictures at once to avoid having to reload the page every time you click "Next". So if you want to use a lot of photos (more than 20 or so) than your page will take a little longer to load.

4. Fading Slideshow

Explanation: The fading slideshow is one of the most popular ways to display pictures on the web. Basically it's a picture that fades in and out every few seconds into a different picture.

Example: www.chincoteaguechamber.com

Benefits: The fade effect is what makes this photo gallery look good. It's a great way to give users that "wow" factor when they first come to your home page.

Downside: Sometimes if the page is still loading, the first transition from one photo to another can be a little jerky. Once the whole page has loaded that won't be an issue. Also if you have too many photos rotating in the gallery it will eventually slow down the page load speed.

We hope these little examples will give you some great ideas for your website. Remember...it's not just the pictures which make a great website but also how you present them. Good luck!

Don't forget to let us know if you're interested in improving your website or just want some consulting help.

No comments:

Post a Comment