Types of Web Graphics and Files

Bitmap and Vector Images

Bitmaps:
Most of the graphics displayed on the Web are bitmap images (.bmp). These are images that are made up of rows of tiny dots (they are actually squares) called pixels or picture elements. They are so small that they blend together on your computer monitor and you don't even notice them. If you get very close to your monitor, you might be able to make them out.

When you are working with a bitmap image your computer records the color of every pixel in the image. The more pixels in an image, the larger the file size will be. Other things that help determine the file size of a graphic are the number of colors, the color depth and the amount of compression used when saving the image. And as you might have guessed, the bigger the file size, the longer it will take to download a graphic image from the Web to your computer screen.

When you edit a photograph with a photo editing program, you are working with the pixels, so a photo editing program is a Bitmap Based Program.

Vectors:
There is another type of program that is used to create graphic images and they are Vector Based Programs.

A computer screen can display both Bitmap and Vector Images These programs create graphics using shapes that are mathematically defined by "vectors" or lines, instead of dots . The advantage of vector graphics is that the images can be easily resized and made bigger or smaller because this just changes some of the mathematic information about the image. This is not something that can be done with Bitmapped images.

Web Browsers don't display Vector Images because the Web can not display them. So when you create a vector graphic using a vector based program, if you want to display it on the Web, then you have to save it as a Bitmapped Graphic. Most vector drawing programs will have the ability to convert a Vector Image and save it as a Bitmap Graphic. You'll want to save it as a GIF, JPG or PNG type file.

Good Graphics Programs

There are enough graphics program on the market to make your head spin and many are very good. Here's a few recommendations. All are programs that I either use, or would use.

CoredDraw Graphics Suite - Vector Graphics creation and Bitmap Photo Editing
Adobe Fireworks - Create & edit Web Graphics. Vector and Bitmap.
Adobe Flash - Create motion graphics and interactivity
Adobe Illustrator - Vector graphics creation
Adobe After Affects - Create animated GIF sequences
Adobe Photoshop - Vector Graphics creation and Bitmap Photo Editing

GIF, JPG and PNG File Formats for the Web

Gif, Jpg and Png are Web graphics file formats. As I mentioned earlier, most all images displayed on the web are bitmap graphics, but there are many different formats for bitmap files. They all have one strong similarity, in that they record the color of each pixel, but they have different strengths and weaknesses. Some hold more information, others produce smaller file sizes, and some are compatible with a wider range of programs.

For Web designing there are four formats you should know about, and probably only two that you will use for your Web images:

1. GIF (Graphics Interchange Format, pronounced "jiff")

GIF Images are used mostly for line art and simple graphic that have large areas of flat color, like logos, buttons, drawings, cartoons, maps and charts. This format stores up to 256 colors (8-bit color) from the image in a table called a color palette. Since photo images have millions of colors, when you save a photo as a GIF file using a photo editing program, the program will select the best colors to represent the whole image. When the image is displayed, each pixel in the image is then displayed as one of the colors from the table, much like painting by numbers. When saving the photo, you will also have the option of using dithering to simulate more colors.

GIF images have two advantages:

The backgrounds of the image can be made transparent. To do so, you specify which color in the table is to be transparent. When viewed with a Web browser, the browser replaces all the pixels with that color with a pixel from the web page's background. This allows the background to show through the image in those areas.
Animations with GIF. By rapidly flipping through a series of images, GIFs can be animated much as a movie simulates motion using a series of still images. This works best with line drawings but can also be done with photographs. One downside to animating photographs is that if your computer's bandwidth is too small, the animation may not work the first time. However, once the images are stored in your computer's cache and replayed, it will work the next time.

2, JPG or JPEG (Joint Photographic Experts Group Format, pronounced "jay-peg")

JPG is the most popular format for displaying photographs on the Web. It can also be used for illustrations and graphics that have many colors and complicated shading.

Just so you'll know, the term "JPEG" is often used to describe the JFIF file format (JPEG File Interchange Format). JFIF is a file format that contains an image compressed with the JPEG method.

JPEG images have two advantages:

JPEG uses a "lossy" compression scheme (which will lose quality) but you can vary the amount of compression that is used to trade off file size with image quality.
It supports 24-bit color, which is why it is good for photographs.

CAUTION: Every time you open a JPEG file and then save it, the image is compressed. As you go through a series of saves, the image is increasingly degraded.

Keep the original image untouched and use it only to make copies from. Every time you need to make changes, make a copy from the original and work with the copy.

3. PNG (Portable Network Graphics Format, pronounced "ping")

PNG is a newer format that was developed to replace the aging GIF format and is supported by both Microsoft Internet Explorer and Netscape Navigator. PNG combines the best features of GIF and JPG.

PNG advanced features:

It has 254 levels of transparency (GIF supports only one).
Allows more control over image brightness.
Allows more than 48 bits per pixel. (GIF supports 8 bits for 256 colors).
Supports progressive rendering, as interlaced GIFs do.
Compresses better than a GIF.

The problem with the PNG format is that it has never caught on and some Web browsers don't support it so it's best to avoid it for now. It could become more popular as the Web continues to evolve.

4. BMP (Bimap)

BMP files are usually not compressed, so they typically have a much larger file size than compressed image file formats of JPG, GIF and PNG. These are all a form of Bitmap Images.

Because of their large file size BMPs are generally not used on the web because of the time it takes to load the images.

The most likely place you will see BMP images used will be as very small images, such as background tiles.

In the next section on Displaying Images, I'll talk about how Pixel density, Screen Size and Screen Resolution all relate to how your Graphics Images are displayed on a computer screen.