Web Graphics: Bitmap vs. Vector Images

Website developers often wonder if they should use bitmap or vector images for graphics on a website. Image quality is one of the most important considerations when it comes to website graphic design. Before deciding on which format to use, it's important to know the difference in each.

Bitmap consists of pixels, which are dots of color, to make an overall image. When creating or resizing a bitmap, you need to know the dpi (dots per inch) or ppi (pixels per inch) because this will give you the crispness you want in an image. If you resize it, you will either lose or stretch pixels making the picture look blurry. It's important that when you first create the picture, you set the dpi or ppi appropriate to the size you need.

You can scan mostly any photograph or image into a bitmap format and retain the quality. You will need to have a good editing program such as Adobe Photoshop, Corel Paint Shop Pro or the free graphics program, The GIMP.

Vector images provide you with a cleaner look. This type uses curves, shapes, and lines filled with color and outlined to create pictures. This format is resolution independent meaning you can increase and decrease the size without quality loss. You can also create different shaped icons (circle, triangle, etc.) unlike in Bitmap, which is usually a square. The disadvantage to using the vector type is that it doesn't support photography well and most of these types of images look simplistic.

Vector images are not as common on websites since Shockwave Flash and SVG programming only support them. For the best website graphic design, you should convert all vector images to a bitmap format such asPNG or GIF. Remember that when you open a vector format in a bitmap editing program, you convert it to raster data so make sure you save the original. Also, remember, when you save it in bitmap format you specify the appropriate amount of pixels for the size of the picture you need for your website.