Get Your Pictures Ready for Your Website

I'm fortunate to work with some true web artists. Their medium is light and electricity rather than paint and canvas, but they're certainly artists, and if websites were always created by people like them, the web would be a more beautiful place.

Oh, well.

There are lots of times when we need to get pictures ready for the web ourselves, whether we're artists with images or not:

• We need to add images frequently. On our blogs, for example, where we post every day. Or on our website, where we need to change the Featured Products or the Employee of the Week or the New Items more often than our webmaster is going to do it for us.
• We want to use our own photographs. Stock photos have their uses, but sometimes we need or prefer to use our own. And we may not want to pay for the web artists to do the production work, if we have more time than money.
• We want to do things on our own schedule. I'm fortunate to have an amazing webmaster, myself, but I have worked with plenty who are very slow to respond. In fact, I just read an industry study claiming that 38% of web designers miss deadlines regularly, so this may not be a group that can be expected to get your picture fixed up within the time frame you have in mind. If you have access to your site, you can do simple things with pictures yourself.

 

So let's learn a couple of very simple skills. The picture at the beginning of this post is the kind of thing clients often supply. It's a happy snapshot, just the kind of thing you might want in your photo album. and look at all the stuff in it -- the exit sign, the random cords and electronic stuff, the high-contrast meaningless shape on the wall.

These things don't look good on your website.

Fortunately, it's easy to crop your pictures and remove most of the extraneous stuff. You'll need a photo editing program of some kind. Chances are something like MS Paint, which is what we're using here, came on your computer when you bought it, or with your camera. If not, you can download Picasa for free.

Open the program, use "file" or "open" (probably somewhere on the left hand side of your screen) to track down your picture, and then look for "crop." In Paint, it's under "Image."

You'll click and drag to make a box on top of your picture. Whatever's outside of the box will go away when you click on "crop."

The end result is a picture of just the things you want.

Now, this may not be just the things you want. You might want to include the fireplace, or the bass player, or to get the dog out the picture. You might also need a particular shape of picture -- this one is sort of wide for its height. Because you might need to try a couple of different things before you get the image you want, it's wise to save the cropped picture with a different name from the original. Imagine that this picture was originally called "band." After you crop it, click on "Save As" and give it a name like "band2." That way, you can always open "band' again and give it another try.

The other very basic thing you can do is resize your picture. The snapshot we're working with was a large file size to begin with -- see? The top corner of the fireplace took up our whole screen. Using pictures this big can really slow down your web page.

It's easy to resize pictures with Paint. Under Image, right where you found the Crop button, there's also a Resize button. Click it, and it'll ask you how much you want to reduce your picture. Try 20%, and if looks about right, go ahead and save your image with a new name. You might want the higher resolution version for some other purpose in the future.

If your photo editor doesn't have an easy resizing option, you'll find many resizing tools online. All of them will give you a smaller image.

When you have something complex that needs to be done to a photo, go ahead and hire someone with specialized skills. But for everyday use, just start with a reasonably good photo and use these two simple tricks to get your images ready for the web.

Stock Photos on Your Website

When I got this fine header in my email from graphic designer Jay Jaro, I had a moment of "huh?" I hadn't been imagining a stock photo in this image, and I wasn't sure I liked it.

Fortunately, I'd just had a conversation with designer Tom Hapgood on the subject of prejudice against stock photos. I was therefore able to step back and respond more rationally.

Do you have the same problem?

In my conversation with Tom, I'd actually been on the side of stock photos. We have a shared client who doesn't like them, but who is also having some trouble getting photos together for the site we're working on. Stock photos can be a great solution in a case like this.

I'd agreed that the client wouldn't want images of people pretending to be their workers, but suggested that we could use nature photos, like the one used below by designer Miriam Hudson-Courtney.  It doesn't matter, it seems to me, whether this is some butterfly we know and love, or whether it's a complete stranger. The message is the same.








And that, I think, is the issue to consider when you're thinking about stock photos, and the source of the distaste some people feel for them.

In discussing this issue when my own site was being designed, I said quite firmly that I didn't want a shot of two models conferring seriously over a piece of paper. It seemed to me that these photos are unconvincing. Visitors don't think that the model getting way too excited over your product is really you, or really your customer.  I felt that there was, in stock photos of people, an unavoidable element of inauthenticity.

A butterfly, regardless of who took the photo, is a symbol in our culture of freshness and transformation. Miriam's butterfly image is designed to say, "Look how fresh these plans are!" It is no less effective because that particular butterfly came from a stock photo site.

Let's re-examine Jay's design from that point of view. This is obviously a model -- she's standing there holding a light bulb and grinning, not something most of us do in the course of a normal day. In his other variation, which you see below, she is listening to the light bulb, or perhaps transferring its ideas to her brain through osmosis.









In other words, there is no pretense that this image represents a quick snapshot in the office at FreshPlans. It uses the light bulb, a common symbol for ideas in our culture, and an image that accurately represents the primary audience for this website: young professional women. It is as clear in its message as the butterfly.

A few months after my website went live I had a client who wanted a picture of the author and the designer of the website for the company blog. Ironically enough, designer Shan Pesaru and I made her a picture of the two of us, conferring seriously over a laptop screen. It was essentially the picture I had rejected so strongly for my website -- except that, since it wasn't a stock picture, we weren't as well lit and don't look nearly as enthusiastic. It was a snaphot in the office, and it's a good image of what I do.

I don't regret not using that stock image on my website. I've learned that many people think the models in stock images are actually the people who work for the company that owns the website, and I think there could easily have been a false impression created. I also rejected a shot of wadded up paper -- "I'm not that kind of writer," I said at the time, and I'm not. I do have a stock image, though -- antique typewriter keys. Designer Ashley Cox found an image that implied writing, worked with the design vision of the site, and didn't suggest anything that wasn't true, because no one expects me to be using a typewriter.

You can do the same for your site. When you consider using a stock image, think of what it communicates. If the image it creates in your visitor's mind is authentic, then it isn't inauthentic to to use a stock photo -- and it's very likely to be a better picture than the office snapshot.

Read more on this topic:
"Where Should You Get Pictures for Your Website?"

Photos for Your Website

We've talked about whether to use stock photos or to use your own images. Say you want to create your own images, how can you go about it?

First decision: should you hire a photographer, or do it yourself? Assuming that you are not yourself a skilled photographer, these are the questions you need to ask yourself:

• How important is quality? If this is the photo of your building which will provide the centerpiece of your web design and indeed of all your graphics from now on, then hire a photographer. If it's one of the hundreds of images you need every year for your blog, then you might want to do it yourself.
  
• What post-production options do you have? If you're a wizard with Photoshop, you have more flexibility in choosing photos than you would if your skill extended no further than clicking the "autofix" button on your computer's built-in photo editing program. If your photos have to go onto the screen just as they are, then you need better pictures to begin with.
  
• Are you a good judge of quality in photos? We say "beauty is in the eye of the beholder," but research has shown that visual artists across cultures are generally in agreement on what makes a good picture. Non-artists, on the other hand, have widely varying judgments. Just as some of us can tell whether an instrument is in tune and some cannot, some of us can tell whether a picture is good or not. Find the person in your organization who can tell -- if there isn't such a person, hire someone.

If you're game to try it yourself, you don't have to have an expensive camera, but there is a difference in results from one camera to another. The photo of Josepha doing the photo shoot above was taken with a Kodak EasyShare, a good basic digital camera. The photo she took, below, was taken with a Nikon CoolPix, also a good basic camera.




In addition to the difference in the cameras, there's also a difference in skill and composition. Do a little honest evaluation of your abilities, and plan out your shots to make the best use of your skills and resources.

Did I say "plan"? Yes. We were taking pictures of a party for a client's blog, and we got some nice shots during the actual party. However, we also took lots of shots beforehand, and then the next day we reconstructed the scene in daylight to get the shots we wanted, but which hadn't come out as well as we wanted. It's worth taking the time to do this.

My dad was a professional photographer, and his advice was always to take lots of pictures. The professional photographer, he said, was the one who took three rolls of film to get three great pictures. We don't use film nowadays, but it still makes sense to take lots of shots. Your chances of having great pictures increase when you do that.