Web Graphics
There are only a few graphic formats that are suitable for the web. The most common are .jpg (aka JPEG) and .gif, while .png is a new format gradually gaining Web browser support.
This document is a web page even if you're not viewing it from the Internet. It is fairly easy to insert a .gif or .jpg into a web page. A .gif file is better for logos and images that use mostly solid colors. If you do want to end up with a .gif file, then you should render the image with colors from the 256 color palette. You should have the color depth set to 24bit (16 million) so you can take advantage of the adjustments and filters. When you save your .gif it will convert back to 256 colors. If you used colors that aren't included in the 256 color palette for blending and shading then the program will substitute with the nearest available color. In most cases the substitute colors will change the appearance for the worst.
The .jpg file is pretty straight forward. The .jpg format is 24bit and is preferred Web for images with lots of details, colors and shading. The .jpg format compresses the image data by discarding redundant (repetitive), information and printing details. A .tiff format converted to .jpg format can compress the contents to less than 10% of it's original size. A 5Mb (over 5 million bytes)file will be about 500k (500,000 bytes) after it is converted. 500k is much to big for Web pages though. The ideal size for fast loading is under 50k. You may not be as concerned about download time or maybe the extra details are worth the wait. It just depends on your intended audience.
Remember that when you are converting to .jpg there is an Options button at the bottom of the Save As dialog box. Clicking on the options button will bring up a panel that lets you adjust the level of compression. The higher the compression, the lower the quality of the image. The physical dimensions and file size of your image are important.
Considerations
Once you edit your graphics for the web you need to convert them to .jpg or .gif file format. Again, the .jpg format is best for detailed graphics (24K color). It compresses the file to about 10% of it's original size (500kb .tif becomes 50kb).
The .gif format is good for solid colored graphics that don't have a lot of tonal gradation. It uses less colors so the files are small. The .gif format also supports transparent backgrounds for when you want your image or character to stand out without being surrounded by an ugly square box.
Both of these formats and individual features are supported by most every web browser currently in use. Your image resolution should be 72 to 100 dpi and the dimensions should be 5 x 5 inch or less for faster loading (under Image, then Resize in PSP menu). You can offer better quality graphic files like .tif or .tiff for downloading through a link, but that's beyond the scope of this course.
How to convert a graphic file?
To convert a file to a different format, open the image and select file from the menu, then save as or save a copy then click the arrow on the file type bar at the bottom. A list of file types will drop down, just select the type you want. You should do your editing before converting it because some editing features won't work on .jpg or .gif. I usually scan and edit in the .psp format. If you are concerned about the appearance of your image cross platform (OS) or on different Web browsers, then you should use a web safe color palette. This site, ( http://www.visibone.com/colorlab/) provides all of the web safe colors and corresponding RGB% and hexadecimal value. Using colors from this palette will insure that your image will look good on IBMs or Macs, on any Web browser.
GIF Animations
Animated images are supported with the .gif format by layering each frame. The timing can be set for each frame and the sequence can be set to loop. Some drawbacks are, it is limited to 256 colors and file size is proportional to the number of frames. If you see animations on Web sites they are more than likely animated gifs. They are usually short and sweet and repeat after a few frames. In spite of the drawbacks the animated GIF file is supported by all Web browsers. Other animations such as Flash, require plug-ins (software) to run in a Web browser.
Below are a few animations that I created for advertisements on Web sites. The GreenTea banner only loops ten times. Click your Refresh button to restart it.
The Emerging PNG Format
Work is currently under way to have Web browser software companies support the emerging .png format. The .png format is supposed to support animation with 24 bit (24K colors) and compression ratio similar to the .jpg format.
