:: code war·ri·or                    
                   

Creating Images

I'm not going to go into a lot of detail on creating images, because it's not really what this site is meant for. I will give you a quick overview though, just to get you started.

If you do need to find out more then have a look in the help files of your graphics application, or out there on the web.

Graphics Applications

If you're even vaguely serious about your web site you will need a decent graphics application.

At the basic extreme you just need something that can create, open and save images of the GIF and JPEG formats. Obviously the more bells and whistles it has the better, but don't go spending a fortune unless you're sure you need to.

One of the most common applications used for web graphics is Paint Shop Pro from Jasc software.

GIF Images

Many image files on the web are saved in the GIF format. You'll never see BMP files on web sites, as they're too large. A GIF file basically compresses your image so that it still looks OK without taking ages to download from the server. The GIF format also offers some neat tricks.

Firstly, you can have transparency. That means that certain parts of your image (or all of it if you want) are completely see-through, allowing the visitor to see whatever is underneath on the page (e.g. a background image). Exactly how you do this will depend on your graphics application - check the help files for more info.

Transparancy DemoLet me give you an example - see the picture on the left? It's exactly the same graphic file that produces the Go button on the right hand bar of this site. Over there you can see the orange background, but here the pale colour shows through. That's because I've used transparency.

Another useful tool you can use with GIF images is interlacing. If you make your file interlaced, when it loads it will first appear very distorted, then a bit clearer and so on until it's perfect. Non-interlaced graphics just appear row by row.

The reasons for wanting to interlace are varied - it just depends on the image in question and your preference. To see a comparison, click here.

Animated GIF Images

GIF files can also be animated, but this will dramatically increase the file size depending on the number of frames. Some graphics applications can produce these images for you, otherwise you'll have to rely on what you can find elsewhere. Paint Shop Pro comes with a utility called Animation Shop that lets you take several GIF images and make an animation, specifying how long to display each frame and how many times to repeat the animation (amongst other things).

Beware though - some people find animations a little irritating and a waste of download time. Keep an eye on the file size and don't go over the top with them.

JPEG Images

Wow, GIF's sound great don't they? The snag is they can only contain 256 colours - not much when it comes to high quality images. So if you do need more colours (and this generally applies to photos) you need to save the image in the JPEG format.

Again, this is designed to minimise file size but not quite as much as with GIF's. Some graphics app's let you specify how much quality to sacrifice - again, look in your help files.

Note that with JPEG's you can't do any of the clever stuff you can do with GIF's - so no transparency. and no interlacing. But you probably won't want those for photographs anyway, so it's not a problem.

A Word of Caution

Images may look nice, but too many and your site will be very slow for people accessing it using a regular connection. Keep the file sizes down and don't go over the top - remember things load a lot faster from your hard drive than they will over the net. If in doubt test your pages online to see how fast they download, but don't forget your connection may be faster than others.


· code-warrior
· HTML Tutorials
· Images


Quick Links
· Creating Images
· Adding Images
· Image Maps



SHOP
· Book @ Amazon
· Software @ Amazon

Please send any comments to
This HTML guide is a free resource
© Code Warrior 2002