Images for Website

Use of Appropriate image to its best Usage

It is very painful when someone reads the image in a wrong way, while delivering messages through images its always important to choose the perfect image suiting the message. Images can deliver a powerful message in any media. They can reinforce a news story, indicate the position of people, places and objects, explain process and help to build an atmosphere or emotion. On the other hand, a misplaced image can ruin a carefully constructed campaign – the image of a car that has been recalled for a fault will not help to build trust. Choosing a images for the message is very important, the image selected should reflect the audience what message you are delivering to the user.

Images are an integral part of most websites. They help build brand awareness, sell a product or simply make the visit to the site more enjoyable. But like most other forms of media, adding images to a website requires a little thought.

Appropriate images

Part of the design process is the selection of images. If you are selling a product then an image of that product is essential. You may need more than one and the product usually looks better in-situ rather than on a plain background. Show somebody wearing cufflinks or clothes, hang a picture on the wall, a saucepan on the stove and so on. This gives the customer an idea of size and setting.

Do not use images indiscriminately, lots of images can loose the page focus – the visitor may not be able to work out what is important and what is decoration.

If you use stock images do not use the freebies – you may well end up with the same pictures found on sites similar to yours.

Image for Effect

There is nothing wrong with adding a few images to make the site attractive but don’t spent too much time fiddling, it is much more important to concentrate on the purpose of the site and add the images afterwards. And be careful not to overdo things, if the site relies on the images to impress your visitors then it means they will not be focussing on the important things (like buying stuff).

Image positioning

Keep your images as close sas possible to the related text. This may not be the physical position on the page but does mean keep the image close to the code with the accompanying text. For example, if you have an image of a garden gnome, make sure is is positioned in the code close to the paragraph/heading that discusses garden gnomes. The best way to do this is to use Cascading Style Sheets.

Image size and Resolution

The image size refers to the file size not the dimensions. Smaller files load faster, reduce bandwidth and usually look just as good as high resolution images. Its very important not to alter image size as per layout requirement, image size always needs to be alerted according to its dimension otherwise there is a chance of losing its resolution, due to improper adjustments to its height and width, always it should be done  proportionately.

If you save the image at a higher resolution but force the image to fit into a smaller space on the screen all you will do is increase the load times – the image will not look any clearer.

If you do want to display high quality images then use a thumbnail on the main page that links to the high quality image.

Alt Text and Titles

Alt text and titles provide screen readers and the search engine robots with information about the image. They also allow browsers to display a description of the image as a tooltip. So make sure they are relevant and descriptive:

25cm plastic garden gnome.

Is far better than:

Product 12345, Image1256, Img 124… etc.

The alt text is properly used as an alternative to the image. The title is properly used to provide information when the pointing device hovers over the image. Internet Explorer gets it wrong (as usual).

Image Names

Saving your image as ‘romper-suit’ is better then ‘product-12345′. Ok so you may be restricted by the supplier’s database but if you want to impress and convert then you need to take the time to rename the files.


4 thoughts on “Images for Website

  1. Pingback: Images for Website | Web Designing - Top Tips for Web Developments |

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s