Web Graphics
If you would like a picture to appear online, the file is linked to from a directory, unlike some other applications which embed the image on a page. Following some graphical standards will ensure a quick download and a crisp image.
Image Size
Your image size should be the same as what appears on the web page. In HTML, you can tell an image to be any height and width you want, but it should match the image's own dimensions. Never enlarge an image - the pixels will become visible. Save your image at 72 dpi (dots per inch) for online viewing -- as this is as high a resolution as your monitor is capable of rendering.
File format: Gifs and Jpegs
"Graphics Interchange Format" (.gif) and "Joint Photographic Experts Group" (.jpg) are two of the most popular methods for displaying images online. When to use each type depends on the image itself. An image with a photographic quality, or continuous tone, is typically saved as a Jpeg, and one with flat color without a lot of shaded variation (think of a cartoon) is better saved as a gif. If you require a transparent background of your image, you should use .gif.
Using Photoshop
Compression makes an image take up less disk space, but the smaller the file size, the worse the image will look. Jpeg compressions are shown here, from no compression (100) to very compressed (10). Look at the detail in the image, and see how it gets lost with higher compression.
Quality 100 (max), 72 kilobytes (KB)
Quality 60 (high), 20 KB
Quality 30 (medium), 12 KB
Quality 10 (low), 8 KB
Notice the edges around the trees and the sky. This sort of "halo" effect is typical with images that have been saved with a low quality setting.
Gif is used for illustrative work, or images with large amounts of the same color.
Gif image, no color reduction, 16 KB
Same image saved as a jpg, medium quality 30, also 16 KB. But reduce the image quality to "low", and the area red is not rendered well at all in a jpg:
There are ways of reducing a .gif image size while maintaining high quality. You do this by reducing the number of colors in the file.
The original image has 256 colors. Look at the same image with 128 colors (original is on the right):
No perceivable loss, and the file is 12 KB instead of 16 KB.
Same image saved with 32 colors, 8 KB. Still no perceivable loss.
16 colors, 8 KB. But, we're not saving any disk space with the color reduction.
8 colors, 4 KB, very bad quality.
Now here's something that seems odd: I enlarged the file dimensions, but used an existing color, saved it with 32 colors:
One might think that it would be a larger file size, but it's still only 8k. Why? Because that red color is already in the pallette, it's not taking any more memory to render more of it. Even if I increase the height to almost 4x the original size, the file size does not change.