Working With Images
Formats
Web browsers can recognize and display graphics saved in the following three formats. Each format has its own advantages and disadvantages.
GIF (pronounced jiff) - Compuserve Graphics Interchange Format
GIF is good for images that contain large areas of the same color (e.g. clipart). Most images except photographs are saved in GIF format. You can only save GIF that have less 256 colors. The file format averages out colors to get them down to 256 colors.
JPG (pronounced jay -peg)
JPG can save small varitions in color (as in photgraphs and photgraphic art). JPG, however produces larger file sizes that take longer to load using slow modems.
PNG (pronounced ping) - Portable Network Graphics
PNG is an excellent general purpose graphic format. It contains few of the disadvantages of the other two formats. Its only disadvantage is that browsers have little support for this format.
Inserting images on a page
Insert images on a page using the <IMG SRC="imagename.fmt"> tag. Imagename is the location of the image on the server. FMT is the image format (i.e. GIF). Images are usually placed together in a folder. The folder can be named anything, however, the most common are pictures, images, graphics, pics, pix, etc. In this case the tag would look like this: <IMG SRC="pictures/imagename.fmt">.
Alternate text
You can specify text to appear when the visitor rests the mouse over the image. The text can provide any information you want to share about the image or anything you want to say in 256 characters or less. The text appears after one or two seconds and displays for five or so seconds or until the visitor moves the mouse pointer off the image. Use the tag <img src="imagename.fmt" ALT="Your text here">.
Centering Images
Just like text, you can center images using the <CENTER> tag. Close the center tag with the </CENTER> tag.
Transparency
GIF images can display images that include transparency. This is a technique in which you choose a color in the image that will be transparent. The background shows through this color. You must use paint software that can create transparency.
Fake Transparency
You can make an image appear to have a transparent background by setting the page background and image background the same.
Animation
GIF images can be animated. You must use software that can create animations. As in cartoon animations, you create each picture individually and then put them together in the animation software to create the animation.
Decreasing Load Time
Image files can be large. Though DSL and cable modems are gaining in popularity, 99% of users still use dial-up modems of 56K or less. Most people will not sit there and wait forever for your page to load. You should, therefore, use every technique to make image files as small as possible.
Image size
Keep the size of the image as small as is practical and aesthetic.
Resolution
Most monitors have a resolution of 35 dots per inch (dpi). To use images with a higher resolution than that makes the image unnecessarily large and wastes load time. If the visitor prints the page, however the image will not look as good on paper.
Specifying size
If you include code for the size of the image, the text will load first while the images fill in. Making the page display faster. You can get information on the image size from the paint software. While you can change the size of the displayed image, this is not recommended and you should ALMOST NEVER make the image smaller. You should instead alter the image size. That will make the file smaller and therefore load faster. Use the <img src="imagename" WIDTH=n HEIGHT=n> tag. N is the size of the image in pixels.
Text Images
Because you cannot control and do not know what fonts the visitor may have installed, a good way to include good looking fonts is to use text images. These are regular images (usually with transparent or fake transparent backgrounds) that take the form of text.
