Web Graphics

Here’s the least you need to know before choosing the most appropriate Web graphics software…

Vector and Bitmap

When you want to create original Web graphics, you can use either a vector drawing application or a bitmap painting program. Here are the basic properties of vector images and bitmap images…

What is a vector image?

Vector images are defined mathematically as a series of graphical elements that are called objects. Each object is a self-contained entity, with properties such as color, shape, outline, size, and position on the screen included in its definition. Vector programs also allow you to incorporate bitmaps into your drawings.

Since each object is a self-contained entity, you can move and change its properties over and over again while maintaining its original clarity and crispness without affecting other objects in the drawing. These characteristics make vector-based applications ideal for illustration, in which the design process often requires individual objects to be created and manipulated.

Vector-based drawings are resolution independent. This means that they appear at the maximum resolution of the output device, such as your printer or monitor. As a result, the image quality of your drawing is higher if you print from a 600 dots per inch (dpi) printer than from a 300-dpi printer.

Unfortunately, vector images aren’t really very practical to use on a Web site because Web browsers can’t display these kinds of images unless a plug-in or helper application has been installed on your visitor’s computer. But that doesn’t mean you should avoid designing your Web graphics with a vector-based program since major vector graphics software can export your work as GIF or JPG images.

What is a bitmap image?

Bitmap images, also called raster or paint images, are made of individual dots, called pixels (picture elements), that are arranged and colored differently to form a pattern. When you zoom in, you can see the individual squares that make up the total image.

Bitmaps have a fixed resolution so a bitmap looks best when you display or print it at its original size. Increasing the size of a bitmap has the effect of increasing individual pixels, making lines and shapes appear jagged. Reducing the size of a bitmap distorts the original image, because pixels are removed to reduce the overall image size.

The color and shape of a bitmap image appear continuous when viewed from a greater distance. Because each pixel is colored individually, you can create photorealistic effects, such as shadowing and intensifying color.

However, because a bitmap image is created as a collection of arranged pixels, its parts cannot be manipulated (e.g., moved) individually.

Up-to-date, graphics-capable Web browsers can display graphics saved in the following bitmap-based file formats: GIF, JPG, and PNG, without the need for special browser plug-ins. For more information on this, see Web Graphics Formats. Older browsers only supported GIF and JPG file formats.

Newer bitmap painting programs support vector graphic editing. They let you create text and other objects that can be freely distorted without losing image quality.


Vector-based programs such as Illustrator, CorelDraw, and CorelXara are the best Web graphics software for creating custom text and illustrations.

Photo-editing programs such as Microsoft Paintbrush, CorelPaint and Photoshop are the best Web graphics software for working with photorealistic images acquired from digital cameras and scanners.

Good picture is always a compromise between how good it looks and how long it takes your Web visitor to download and see it. For more information on creating images that look good and are as compact as they can be, see Web Graphics Tips.

And a few words about banners – those graphic advertisements that you see at the top of so many Web pages. They are not so popular now as they were 4 years ago. But if you want to do some banner advertising or simply swap with another site, see Free Web Banners for information on creating your own banners from scratch or by using free Web banner generators.

From : buildwebsite4u

One thought on “Web Graphics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s