|
By now I will have a dozen e.mail's on their way to me from graphic artists who want by blood if they misunderstood the last page and the comments I made!
The fact is I am (to stress a point) as guilty as the next website maker of excessive use of graphics. I remember my very first website. It was so 'graphic rich' that it was hard to see exactly what I was all about. I will not name that site here, as it is still 'live' and I am embarrassed by it. The client loved it, and still uses it!
Oh well. So what did I learn from those early days? KISS - keep it simple stupid!
So where's the compromise? Use a light colouored background, keep the navigation system as simple as possible (in this case the fastest - visible text links), and virtually every graphic on the entire site is stored on our server. The space taken up on our server is well compensated for by the speed of loading.
Back to graphics. I generally use GIF's wherever possible. This is purely down to a personal preference, plus I have found they load quicker and are more reliable for what I do than JPG (or JPEG)'s.
A GIF (or to give it its full name - Graphics Interchange Format), is probably the most widely supported graphics format on the net. It can display monotone, greyscale and colour images but to a maximum of 256 colours or grey scales.
Software seeks out from the range of these 256 colours to match as closely as it can the original colours, then stores it. For 99% of clip-art type graphics this is fine as they are 'cartoon' type characters.
You may have heard something about 'dithering'. That's not you being unsure which clip-art site to raid, but where the 256 colours thing comes into conflict with two or more graphic images on a page.
What happens is, the software tries to load the images. It sees two different images from different sources that are not using exactly the same colours from the 256 range. So it 'dithers', or in other words, compromises over the colours it has to use to get the best effect!
There are two types of GIF's. (For the 'techies' they are GIF87 and GIF89a). The GIF89a is the transparent one. Generally one colour (less 'dithering'?), and can be overlayed over almost any background without 'white out' of the background. Let me demonstrate.
Here is a piece of clip-art with a non-transparent background (GIF87). The immediate area surrounding the aircraft is black so it obviously stands out against the white page background. You could of course get a graphic with a white background, but what if your webpage isn't white, but off-white or cream?
Okay, let's introduce a GIF with a transparent background - see the difference? Of course you do! You get the same effect of course, but it doesn't matter about the background colour.
Now let's up the stakes a bit with a large graphic. This is from the Russian website 'Russia on the Net'. This is best seen against a coloured background as well so you can see the difference even more. So let's put it in a coloured box.
You can clearly see the transparency of the GIF against the yellow. If you dowload any GIF from a clip-art website, aim to get it in the transparent state rather than solid. This may not always be possible of course!
A JPEG (Joint Photographic Expert Group) is different. It is more suitable for the storage and display of photographic images, rather than clip-art. There are varying compression rates of a JPEG which basically means the higher the compression, the better the image. The JPEG can store millions of colours rather than the GIF's 256. However, they do take longer to de-compress, so making load times potentially slower.
This may go some way to explaining why relatively few 'graphics' are stored in JPEG format! A rule of thumb is - if it's a photgraphic image use a JPEG, if it's a clip-art, use the GIF format! Some banner advertisement use the JPEG format very well, usually they contain (obviously) a photographic image.
One of my favourite types of GIF is the flag. I don't know why, so don't ask - I just do! So here are a couple of gratuitous mobiles which are here for demonstration purposes - as I said before I am not exempt from the affliction!
This is nice. In case you don't recognise it, it's the flag of the Royal Air Force. It demonstrates (like I need an excuse!) just how big a mobile graphic can be. When a page first loads you may find the 'mobile' is actually 'static' until the page has fully loaded.
If you are unlucky it may slowly grind to a start and then suddenly whizz into top gear - if you are lucky it will start flapping in the breeze straight away!
The next page deals with the mechanics of introducing graphics to a website. There are a few rules that you must follow to enjoy snag-free graphics!
[1] [2] [3] [4]
Top
<<< Previous page
|