Graphic File Formats

 .GIF files are the most common type of graphics file in use. GIF, which stands for Graphic Interchange Format, was originally developed by CompuServe and can support up to 256 colours. It uses a very basic compression algorithm, which is a type of mathematical formula that squeezes the data that makes up the graphic into a smaller space (graphics files can be really HUGE!). Some GIF's are called transparent GIF's because their backgrounds appear invisible when displayed in the browser window. Other GIF's are animated or appear like cartoons or moving pictures.
 

Regular .GIF file

Transparent .GIF File

Animated .GIF File

.JPG files (JPG is short for JPEG which stands for Joint Photographic Experts Group) can support up to 16.7 million colours so they are more photographic in appearance than GIF's. They use a much more sophisticated compression algorithm so they usually take up less disk space and they load faster than GIF's. On the other hand, their complex compression technique makes them slower to decompress and display compared to GIF's.

 There is no need to be concerned with whether to use one format over the other. Some designers prefer one over the other but the differences in speed and size aren't very noticable unless you are working with large graphics. However, if you are concerned about the quality of a graphic, such as a photgraph, you might want to use a JPG because they support millions of colours and can produce a more photographic image.

Types of Images

 BACKGROUNDS
Backgrounds are special graphics files that are used instead of a background colour on a web page. To use a background, you specify the background graphic file in the BACKGROUND attribute of the BODY tag. Background graphics are usually square or rectangular and 'tile' themselves along your web page like floor tiles. The following is a background graphic:

BULLETS
Bullets are small graphics that are used in lists of items or links. Most are either round (called spheres or balls), square or diamond-shaped but you can pretty much find bullets in all sorts of shapes and sizes. The following are samples of bullets:
   

ICONS
Icons are small graphics, similar to the icons you see in your Windows environment, that are often used for decoration or to emphasize something. For example, the  icon is used on these pages to let you know that the text in the box is informative or interesting. Some people also use an icon beside their email link or link to their main page on a web site.

DIRECTIONAL SYMBOLS
Directional symbols are images (usually arrows) that are used to navigate through a series of pages in a web site. With the Anchor tag, these images can be linked to other documents. For example:

This would be used to link to the previous page

This would be used to link to the next page

BUTTONS
Buttons are just icons or directional symbols that have a 3-D appearance so they look like buttons. They come in many different shapes and sizes and are usually used with the Anchor tag (the user clicks the button and they go somewhere). Here are some examples of button images:
 

HORIZONTAL RULES
Horizontal rules (often just called rules) are graphics used in place of the <HR> tag. When you use a rule image, you don't use the <HR> tag at all. Here are a few sample rules:

CLIP ART
Clip art is a broad category that includes any graphic or image that doesn't fall into other categories. Clip art images can be drawings, diagrams, photos, fractals, logos or any other medium to large sized graphic. Clip art is usually used to display something referred to in the text of a document or to decorate documents, although you can really use them for whatever your imagination allows.

Putting Graphics on the Page - the <IMG> Tag

 SRC
Example: <IMG SRC="squb.gif"> or
<IMG SRC="squb.gif">
The SRC attribute defines the 'source' of the image, usually a file but sometimes it can be a URL. If the image you are using is in the current directory, then you don't need a path or URL, but if the image is in a subdirectory, then you might need to use a URL or path. For example, I store my graphics in one directory off my main one, called PICS. When I display a graphic, my source file will usually be "/~WENDI/PICS/FILENAME.GIF". You can also use a URL to another site as the source, like with the image below.  The code to display this image is  <IMG SRC="http://www.lara.on.ca/~wendi/pics/cananow.gif">.
  You would do this when you wanted to link to a graphic on another person's server without copying it to your own server. Doing this is not really a good idea, even though it saves you space, because by linking to someone else's graphic you are forcing the browser to go to that person's server and retrieve a copy of the graphic. This slows down the loading of your web page and causes unnecessary traffic on the server where the graphic is located - neither of those things are examples of good 'netiquette'.

 ALT
Example: <IMG SRC="squb.gif" ALT="funny rule">
The ALT attribute stands for alternate text and is used to define the text that would describe a particular graphic. This is used when a user has a text-based browser or for users who are visually impaired and have systems with speech capabilities (their computers will read all the text on the screeen out loud and when they come to a graphic, the computer reads the Alt Text - this way they can 'see' what the graphic is). Also, some users will surf the 'net with their graphics turned off because it's much faster. This text is usually one or two words, such as "bullet" although for large graphics you can use more words, such as "photo of Hamilton skyline during Plastamet fire, summer of 1997".
 

You can turn off your graphics by choosing the Autoload Images option Netscape's Options menu. If the option is checked, your images are on, if it is unchecked, your images are off. While your images are off, you can view the images on the current page by clicking the images button on the button bar. Try viewing this page with the images off and see the ALT text (you may have to clear your cache first by going into Network Preferences in the Options menu).

 
BORDER
Example: Example: <IMG SRC="http://www.lara.on.ca/~wendi/pics/smiley.gif" BORDER="2">
The BORDER attribute determines the size of the blue border around your image when you place it within an Anchor tag. By placing an image tag in the Anchor tag, you create a link using the image instead of (or in addition to) the text. For example, I can use the code <A HREF="http://www.lara.on.ca/~wendi/misc/smile.html"> <IMG SRC="smiley.gif" BORDER="2"></A> to create a link that looks like this: 
 

You can turn off the blue border that appears when you use the image tag inside the anchor tag by using the IMG attribute BORDER="0".

 
ALIGN
Example: <IMG SRC="smiley.gif" ALIGN="center">
The ALIGN attribute determines how the graphic is aligned with any adjacent text on the page. Possible values for ALIGN are top, bottom and middle. Top will align the top of the first line of text with the top of the graphic. Middle will align the baseline of the current line of text with the middle of the graphic. Bottom will align the baseline of the bottom line of text with the bottom of the image.
 

Top Alignment

Middle Alignment

Bottom Alignment

You can also use the ALIGN attribute to configure how text will appear around the image.  Note however, that this feature is not supported by all browsers and my give you weird results.  One value you can use for ALIGN is "left", which will cause the text to wrap around the left side of the image, just like it appears for the Canada Now button.  The other value is "right" which will cause the text to wrap around the right side of the image.

HEIGHT, WIDTH
Example: <IMG SRC="../../pics/cfa/info.gif" WIDTH="25" HEIGHT="25">
This determines the height and width of the image. Leaving these attributes out will cause the graphic to display at it's default size. You can use these attributes to change the size of a graphic. For example, you may have a very large graphic but you want the browser to display it at half the size, so you can change the HEIGHT and WIDTH attributes accordingly. This is often done on web sites that contain archives of grahics for users to view and download. Some graphics are very large so they are reduced in size and displayed in groups on the screen for easy viewing (these smaller versions are sometimes called thumbnails).
 

Things to Consider When Using Images:  Use the ALT attribute!  Many people viewing your page may not have graphic capability. Don't use too many graphics - it slows down the browser and can make your page look too busy.  Don't use too many animated graphics - that really slows things down!  Try to use a uniform colour scheme on your pages.  Keep in mind when choosing graphics and backgrounds that many users may not have systems with 'high colour'.  Test your page in different graphics configurations to see how it appears - some pages look great in high colour but look really ugly in anything less!  To do this, change the Colour Pallette options under 'Settings" in the desktop properties (right click on desktop and choose Properties).  When choosing background graphics, choose ones that have a uniform appearance, such as all light colours, all medium colours or all dark colours. Backgrounds with too many different colours or too many shades of colours don't show text properly - on the dark parts you can't see dark text colours and on light parts you can't see the light text colours, etc. The sample background used above was a really bad one!

Where To Get Graphics and Images

Grabbing graphics off the 'net is perfectly legal as long as the graphics are not copyright. Any graphic in the public domain is free to use although some designers require that you put some sort of notice on your page that the graphic was created by them. There are tonnes of sites where you can find archives of free graphics so I put a few on the links page. Also, if you are visiting a page and you just happen to see a graphic you like, you can usually take it from there.  Be careful about editing graphics, though.  Most people don't mind if you use them but don't alter them in any way unless they say it is okay.

 To download a graphic, just follow these easy steps:

1. Position the mouse pointer over the graphic and right click to bring up the pop-up menu
2. Choose Save Image As...
3. A dialog box will appear. Select the drive and directory where you want to store the graphic file. You can leave the name as it is or change it if you want.
4. Click the OK Button

By now, you should have a good idea about what you want on your web page. With this in mind, browse around for some graphics to include on your page. When you've found some, save them to your disk and add them to your page.