Using Photos and Images | Web Authoring | Student Writer's Web

GIF and JPG 

Why are these formats ideal for the web?

How do they differ?

The basic difference in the formats is the way colors are encoded numerically in them. They are bit-mapped files; the image is treated as a set of pixels each of which has some color

GIF is an indexed color system. One color number in a palette or table of colors is associated with each point on the screen. There are at the most 8 bits per pixel in GIF giving 256 color choices. Therefore, no graphic in GIF can have more than 256 colors.
GIF is the format to choose for animations or if you want a color to be transparent so a background of a page shows through.

JPEG is an RGB system. Each point on the screen has 3 numbers associated with it: a number for the Red amount, a number for the Green amount and a number for the Blue amount---three primary colors. The color on the screen is in fact a mix of these three primary colors. The numbers represent the saturation level of each of the primaries. JPEG can support 256 levels of red, 256 levels of green, and 256 levels of blue. Black is red at 0, green at 0, and blue at 0. White is red at 255, green at 255, and blue at 255. Setting red at 255, green at 0 and blue at 0 gives a deep red. The total number of possible colors is 256 x 256 x 256 or 16.8 million, so a graphic could have up to 16.8 million different colors in it.
JPEG or JPG files are the usual choice for photos on the web since the color is richer.  

What does compression do to a file?

A compressed file is normally about 1/10 the original size so the graphic will transfer much faster over the Internet. You set the amount of compression by the "quality" you choose when compressing in a graphic editing software. Usually choose above average quality but not  the highest quality setting. Most people cannot see any difference between high and maximum quality.

What are options for photo editing software?

Adobe Photoshop is the premiere application for graphic and photo editing. Alternatives for beginners are programs that come bundled with the computer operating system or with a digital camera. Useful functions in these applications include resizing and cropping an image, setting a transparent color (such as a white background), and creating special effects.

Top of page | Web Authoring | Student Writer's Web