A picture tells a thousand words.

Indeed, imagery is everywhere on the internet. Photographs accompanying your blog articles can break the blog up into easier to read chunks, and they can also convey the sentiment of the message you want to portray. Images can make or break a blog or even a whole website.

Over the years we have found images to be the biggest problem for users updating their own websites, so we hope you find these tips useful when thinking about imagery for your own sites.

Image Size and Shape

Take this picture of a monkey with her young. In it’s natural form, it’s quite cute.

Below are a few examples of what happens when you use the wrong size, shape or quality of image.

Have you got any of these on your website?

One of the most common mistakes is simply to upload a photograph for use in a blog.

A typical camera photograph will be 3-4MB in size and will be around 4000 pixels wide. A pixel is a unit of measure on a computer screen, a minute dot of illumination or colour. Together pixels make up images. A typical laptop screen is about 1400 pixels wide, an iPad 1064 pixels wide, and a large desktop monitor, up to 1920 pixels wide. You therefore don’t need 4000 pixels of image. The picture will take a long time to load, which is always infuriating for your website visitors. Does this look familiar?

It’s best to manipulate your images prior to loading into the website. Some browser software can make big images look grainy when they resize an image for display.

You can always shrink images, but you cannot expand them. If you try and use as smaller image in a bigger space, there are not enough pixels available to complete the picture and so the image becomes blurry.

Large images need to be cropped and/or resized, but be aware of the pitfalls and choose the right section of the image to crop, and make sure the resizing keeps the image proportions intact.

And finally, be careful when taking photos on your phone. Web images do not need to be as high resolution as those used for printed materials, but you may notice a reduction in quality on a low resolution image, particularly if you are using a large picture on your site.

Images that are too big may tlook grainy when shrunk to size.

An image that’s too small can become blurry when expanded.

Low resolution images can work, but you may lose clarity.

Poor cropping can cut out the important detail.

Resizing images can make your subjects appear fatter…

…or thinner

Photoshopping

Of course, sometimes, no matter what you do, you just can’t get the image right, and you need to resort to photoshopping. But before you ask us to turn your staff into catwalk models, consider what photoshopping really means.

• Firstly, it’s expensive. It takes time. It’s far easier to take the right photograph in the first place than to try and edit a photo.
• It’s good, but it’s not perfect. If you’ve taken a photo on your phone or a lo res camera, then we are never going to achieve the clarity and quality of a professional photograph.
• It can be obvious it isn’t a real photograph. Take the lady on the plane. Did she really sit there? If you are trying to kid people with your photographs, are you also trying to kid people with your marketing?

Below are a few examples of photoshopping we have done for clients. We can’t show you the photos (obviously) and all of the businesses will remain anonymous. Decide for yourself whether it was worth the cost:

• A client used a professional photographer for their staff photos, but the office manager wasn’t in that day. We were sent a photo taken on an iPhone of the manager sitting at her desk. We edited out the background with the desk with confidential client papers on it. It was a hot day when the photo was taken, so the manager was wearing a strappy top. We edited out the visible bra strap, but we couldn’t manage to edit out the sunglasses propped on her head without the photo looking faked.
• A hairdressing client had 2 uniforms, one with a red tunic and one with a purple tunic. Her logo, branding and corporate colours, all matched the purple tunic. She sent us a photo of her in the red tunic for the website, and immediately regretted it. We turned the tunic purple for her.
• An interior designer sent us some beautiful hi res photos of rooms they had designed for use in their project portfolio. We straightened out rugs that had curled up, edited out the photographer’s tripod and rucksack, and then we closed the door, drew the curtains and dimmed the lights for the night time shots of the bedroom.
• A gardener posed with his staff for an after shot of a garden transformation. We edited out the pile of grass cuttings, and the cigarette one of the staff was smoking.
• A company providing school lunches sent us a whole library of action photographs, but only 2 of the staff were wearing plastic gloves to serve food. We were able to photoshop some in, but we were limited in the choice of photographs that we could work with.
• Similarly, a construction company sent us a whole CD of images with action shots of their staff in branded hi vis jackets. The photos looked great, far better than stock images of “workers.” But it was a very long and painful job to add in the hard hats!
• A personal coach asked us to put a photo of her at the top of the website, but the image was seriously cropped. We gave her back her arms!
• A client selling food products was running a Valentine’s Day promotion, so we overlaid their products onto lots of different heart themed backgrounds.
• And finally, a sports team spent a lot of money having a professional portfolio of their action photographs, but they wore last season’s kit! Sadly, on this occasion, we simply couldn’t make it work for them.

All of the above are rather extreme cases, and cost the clients way more time, money and effort than if they had taken the right photograph in the first place. Before you press the button, make sure that everything you need in – and out! – of the photograph is there.