How to add images to your web design

Introducing imagery to your website can add more than interest and excitement. They can form the centrefold of your site, and can make all the text and all the figures, even more appealing.

Plus they are incredibly easy to add.

All you need to remember is how to use tags, and once you have grasped them, you will be well on your way.

So what is an tag? Simple. It is made of 2 parts:

SRC - this attribute tells the browser which image to display.
ALT - tells the browser what to display if it cannot show the image.

But before you go and get ahead of yourself, there are two other attributes to consider which we strongly recommend that you use: width and height.

Forget these within your web design, and the width and height of all your images will be affected, and will be translated back onto your web page.

For a start they enable the web page to render more quickly. By setting a fixed width and height the browser will then instantly be able to allocate space for that particular image and then move onto the rest of the page –whilst the image is still downloading.

How to find width and height

The easiest programme to use for this is called Netscape. This simple programme allows you to see the width and height of your image within the title. For example it will probably say ‘GIF image width × height pixels – Netscape’.

Internet Explorer on the other hand displays the height and width that are specified by the HTML, not the real size of the image you have downloaded. This can be deceptive if you’re not paying attention, but can be easily remedied.

Simply right click on the page and choose the correct properties.

The Tag

This part is even simpler.

All you need to do is enter this code:


Or if you want to use more complicated imagery, there are also GIF, JPEG and PNG images to consider.

GIF Images

These are great if the images you want to use have a small number of colours on them: generally no more than 256 unique colours per image.

GIF’s are also much easier to control. Place them side-by-side with a JPEG images, and you’ll instantly notice a difference between the complexities of their algorithms. GIF’s are much more compressed. Their only problem is when you use flat colour images and text; together they will produce very small file sizes.

Things to remember…

The type of format GIF uses makes them unsuitable for photographs or images with gradient colours. Why? Their colour limitation. GIF’s only have a select range of colours, so gradients and photographs will all end up banding together when saved in a GIF file.

Not exactly ideal if your photographs represent an important aspect of your company i.e. your product.

JPEG Images

Of all these 3 formats, JPEG’s offer the best colours and graphics when working with photographs.

Why? Well, for a start they have got millions of colours for you to choose from. And its complex algorithms enable you to create smaller graphics. Smaller than GIF’s.

The only problem with JPEG’s – a part from sacrificing some of the quality of your image as you shrink it down – is its inability to work with text, large blocks of solid colour and simple images with crisp edges. The reason? When compressing the image the text, colours or lines surrounding it may blur, causing your image to lose definition and become less sharp.

PNG Images

This format was originally designed to be a replacement for GIF’s when GIF images became subject to royalty fees.

But with this re-design came a better formatting programme. PNG graphics have a better compression rate which in turn allows you to save even smaller images than if you used GIF’s. Plus your website can benefit from alpha transparency and animation on top of reduced image sizes.

Yet despite all these improvements PNG’s are still not suitable for photographs.

Yes, it is possible to avoid the banding issue - which is the main problem of GIF’s - by using true colours, but this simply results in very large images. And to top it all, many of its special features are not well supported by Internet Explorer, which could cause browser problems at a later date.

So which one do you choose? Which one is better?

We recommend a combination of GIF’s and JPEG’s. Together you can find the right image balance that will enable you to use a variety of graphic images to keep your website interesting and fresh.

And the rest? Will just fit into place.

So what have you got to lose? With these simple tools, you could soon be inserting your images into your graphic designs with complete easy.

Frank Woodford is a Nottingham based web designer currently working for a digital marketing agency. Having over 10 years experience within the field of web design, he has worked with both small and large companies to promote their online presence and business credibility.