Graphics - Get The Picture!

I have just spent a whole heap of time grappling with graphics on my websites. Even if you don't have your own website but spend a lot of time visiting different websites then you probably wonder why some web pages take ages to load while other web pages load almost instantly.

MORE...

Nine times out of ten the answer lies in the graphics being used inappropriately on the web page.

Of course, there is nothing wrong with having graphics on your pages as long as they don't slow down the loading of the page. Your visitors will most likely leave if the page takes too lomg to load. Other reasons that pages take so long to load incluse slow modems, heavy network traffic or slow network servers.

When designing a web page to include graphics, you need to have a reasonable understanding of the limitations and advantages of the two most common graphics file types that are used in web design today - GIF's and JPG's.

GIF's and JPG's are bitmap format graphics files that are the most commonly used format because they are supported by all modern browsers.

The General rule when saving image is that if an image has a limited number of solid colors it should be saved as a GIF. An image with many colors should be saved as a JPG.

Some reasons for using GIF's

1. GIF's do a better job of compression of large areas of solid color and maintain original color better. Compression is important when reducing load times.

2. GIF's support animated images.

GIF's are best suited to -

1. An image that is a line drawing
2. Small graphics
3. A graphic with a small number of solid colors
4. Images with horizontal lines (example - a background of horizontal lines). GIF compresses horizontal lines considerably more than vertical lines in an image.

JPG's are best suited to -

1. Saving a photo
2. Saving a photo with text superimposed on it.
3. Saving images with hundreds, thousands or millions of colors.

What I tend to do when creating a graphic is to save it in both formats and see what file size and quality of graphic I end up with and then I use the best of the two.

Once you have created your graphic you should also consider 'crunching' the image even further using an appropriate piece of software.

I have been using 'GIF cruncher' and 'JPG cruncher' by Spinwave.

You can check them both out at -
www.tell-me-how.com/spinwave.html

If your looking for some great graphics generating programs I can recommend a 3D graphics program and a web graphics program by Xara.

Check them out at -
www.tell-me-how.com/xara3d.html

and

www.tell-me-how.com/webstyle.html

As you can imagine web graphics is a fairly complex subject and all I have attempted to do today is make you more aware of any considerations when designing graphics.



Terry
http://www.tell-me-how.com