Pin Me

Web Graphics: Bitmap vs. Vector Images

written by: Marce•edited by: Robin L.•updated: 3/17/2010

You want your web graphics to grasp visitors attention so they stay on your site long enough to get the information they need and come back for more. You can use bitmap or vector images for graphic design on a website, read this article to find out which is most attractive.

  • slide 1 of 4

    Knowing the Difference

    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.

  • slide 2 of 4

    Bitmap Images

    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.

  • slide 3 of 4

    Vector Images

    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.

  • slide 4 of 4

    What's Best for Web Graphics?

    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.

All About Web Graphics

Need to know what graphic formats to use on your web site? Check out this three part article series that details the kinds of graphics, and how to choose your format.
  1. Web Graphics: Web Graphic Basics
  2. Web Graphics: Bitmap vs. Vector Images