Layout images like a pro

What makes a good image?

Finding the right images and using them appropriately is a very important part of giving your website visitors a great first impression of your company. The images should fit well with the text on our page and help convey the message we are trying to get across.

Sourcing the right image

If your website is selling products, the quality of your images could make all the difference between making a sale or losing the sale. Therefore, sourcing good quality images should be one of your top priorities.

If you want to take images of your products to use on the website, the best way to go about it is to get a professional to come in and do all the photos for you. The professionals will have the right equipment, they will make sure that the lighting is right and often the quality is very high. Remember, images can ultimately influence the way your customer perceives your website and your company. So using quality images will make your website look professional and tidy - and therefore, give a great first impression of your company.

If getting a professional photographer is out of your budget, consider sourcing an image through a stock image library like Getty Images or iStockphoto. That way you can use a 'concept image', which is something that represents the service you are providing and it's not very expensive.

Just to make things easier for you, we have compared a number of top stock photography suppliers and rated each supplier out of 10 for the selection of pictures they offer, quality of images and the price you have to pay for these. We've given 10 to those that are excellent and 1 if it's average.

Whichever option you go with, remember that in order to use the image on your website you need to own the image. Do not just use Google image search to find images and then actually use them without paying for the image or taking the permission of the owner of the image. Places like Getty images have a team of mean lawyers that are armed with high tech image recognition robots that are constantly on the prowl for unlicensed images. Even if you try to change the image by reversing it, or changing the colours, adding text or other graphics to it, the robots can still recognise it and you will most likely end up with a nasty letter from Getty lawyers demanding thousands of US$ in damages!

Think of the relevance

When it comes to using images, relevance is the key. The images used on each page should support the content and tie in with the general idea of the page. For example, with the homepage, the image you use should instantly explain what your website and business is all about. So find images that fit in with what you are trying to say with words.

Using pretty faces

We are all naturally attracted to the image of a face and find it engaging to look at faces in general. Traditionally, marketers tend to use this as a way to attract customers. The theory behind this is that when we see images of happy, successful people, we subconsciously, if not consciously feel that if we also drink coke, or buy those jeans or use that perfume, we will also end up looking and feeling great.

Studies also suggest that images of pretty faces help build trust and credibility. So using images of friendly, approachable, professional business owner may help with building the trust and credibility of your organisation. It could help build a relationship with the customer and make them feel as if there is a friendly face behind the website.

Do take care - if you decide that using a pretty face is a relevant option to your website, try to source images that look like real people because you want your target customer to relate to the models. So if you are targeting people in New Zealand, take care not to use obvious American models and environments. It could come off looking cheesy, if not offensive.

The environment

Another factor to consider when using an image for your site is the environment in which the product is usually placed. Say you're selling paintings, using an image of the painting on a wall of a trendy lounge will help me imagine what that painting might look like on my wall. And it also helps with perspective – I can immediately picture the size of this painting relative to a couch.

Layout images like a pro

Once you've found the right images for your website, use the following simple tips to make sure that your images are fast loading, tidy and professional - while still conveying the information.

Understanding the different image formats

When you are dealing with images, you will find that there are often few different file formats available - meaning the file names will have different extensions. Each one has its own benefits and depending on the situation and the kind of image, it is a good idea to look into which format works best and use that file format. The two most popular file formats for images that you will come across are Jpg and Gif:

Jpg format 

The Jpg format is very commonly used and it is good for displaying photographic images, which normally contain colour blends and tones. The Jpg file format can have several million colours, but it does not support transparency. Transparency is a feature that allows you to overlay a background colour on to your image. This is a great feature when you want to include text on a graphic background - if you go with Gif file, the background will come through the text box so the text is just sitting in as part of the background. Where as a Jpg image will not support that feature.

Image file types - Jpg vs Gif - photographs are a lot clearer in a Jpg format when the file size is small

Gif format

Gif images are good for small images or images with a small number of colours that are just solid colours without any fading, for example, company logos typically have a few colours and they are generally flat colours that are suitable for a Gif format. The Gif file format can have up to 256 colours and supports transparency.

The Gif format is great for smaller size images with limited colours or tones

The Gif format also supports basic animation so you can include files with animation for extra effect like these cute kittens for example:

Gif file animation

Laying out images and text together

Learn how to layout your images and text together on the same page

Use image editing software

When you are editing images, like for example you want to add text to an image to explain its context or you want to change colours or play around with it to make it your own, you will need to use third party image editing software. Zeald image manager also gives you access to an image editing program but it is more basic so anything that requires editing of the image itself like colours, we recommend using other software.

You can look into Adobe programs like Photoshop and Illustrator or Fireworks but there are number of online applications you can use that are free and also very easy to use. So no need to download a program on your computer. And some of these free applications also allow you to store your files on the internet. We have reviewed a few of these options so you can choose from the best available.

Crop and resize images

Image files are made of pixels and every pixel of an image takes time to load. One of the most effective methods used for reducing the file size of an image is to remove pixels by reducing the dimensions. 'Cropping' and 'resizing' are two ways we can use to do this, and depending on the kind of image you have and what you would like to focus on, you could either use one of these methods or you can use a combination of both. Keep in mind that the final image should still contain all the necessary information to get the story across.

Cropping

'Cropping' is a feature that allows you to cut the unwanted edges of an image, which makes it a very effective technique for reducing the size of an image, while still keeping the most valuable part of the image intact. By cropping an image we can remove elements of the image – like unwanted background, sky, grass, crowds, office walls, etc. This method is pretty much like the zooming function, because we are highlighting the part of the image we want our visitors to look at.

The cropped image on the right retains the information that we are trying to convey, while the original image on the left does not tell the story

Resize

'Resizing' an image allows you to change the size of the entire image – so all the elements of your image are still present, just in a smaller size. And because we are changing the size of the image, it is important to keep the proportions of the image the same, i.e., the height and the width ratio of the image, otherwise the image will look squashed or stretched. The Zeald website image manager program allows you to 'lock' the proportions so you can just change one of the dimensions, either height or width and the other will change automatically in proportion to the original image.

Use small thumbnail images and link to large files

Another technique used to reduce the download time of a page is to move large images, audio, video and animation files to other pages. Then create a link to them on your web page using much smaller images (called thumbnails). This will reduce the download time significantly so your customers can quickly have a look at the smaller images and choose which ones they would like to see a larger image of. So instead of having all your big files download onto a page, which could be slow and lose you customers, you will be showing them a gallery of images very quickly and giving them the choice to see more of whatever they would like.

A product category page is a perfect example of this method of displaying images. The category page presents a list of thumbnails and short product descriptions, which are linked to the larger more detailed page.

Read our article on how to link a thumbnail to a larger image

Reuse images

Web browsers have special software built into them that allows them to store files once they have downloaded, so that they can be reused. This is called caching. This means that if we design pages that reuse the same images, they do not need to download again and will display faster.

So once your users have loaded the first page, the transition to loading up secondary pages will be a lot smoother.

Some examples of images we can reuse on your website include:

• Logos and branding graphics
• Background image and textures
• Stylistic images, such as dividing lines, header backgrounds
• Product images for product highlights
• Icons, for example email marketing, shopping cart
• Accent graphics, such as "New" or "Hot"
• Call to action buttons and graphics 

Increase the compression rate

'Compression' is basically reducing the size of a file, which also lowers the visual quality of the image. So if you have a 1Mb file and you reduce the size down to 100kb, you will lose some of the sharpness in the image. Therefore, reducing the file size is a bit of a balancing act. You want to reduce the size but still make sure that the image is not too blurry or unclear. Compression works really well when you use it to display a smaller image like a thumbnail and then link it to the larger file which will open in a new page (as described above).

Compression is usually done in image editing software such as 'Adobe Illustrator', 'Adobe Photoshop', 'Fireworks' or any of the free online sources like Picnik or Photoplus 6. You can also use the Zeald website manager, which includes software that can do basic image editing that will allow you to specify the file format you want to use, i.e., Jpg or Gif and also compress it by reducing the quality. Depending on the format of the image file you are working with, the reduction in quality appears different in different image formats.

With a Jpg image, compression can make the it blurry and also muddy. With Gif images, compression reduces the number of colours so they end up looking monochromatic.