Sunday, April 3

Vector vs. Bitmap

What exactly is a bitmap? Why is it different than a vector graphic? What is 'rasterization'? This post will help clear up some confusion about these digital formats.

Vector Graphics (SVG)

Scalable Vector Graphics (SVG) or more commonly 'vectors' are digital images that use mathematical and geometric formulas to control how the image is displayed on a computer screen. Basically a vector graphic uses points and curves instead of pixels when rendering an image. The advantage of vector graphics are that they can be scaled down or up to any size desired without loosing any integrity or producing artifacts like seen in raster images. Vector graphics can only be created and resized in programs that support it. Common programs include Adobe Illustrator and Inkscape.

Use of Vector Programs:
  • Create an image to be viewed and printed at different sizes. (Bussiness logos, Website banners)
  • Create a poster or other large scale image to print for smooth crisp edges.
  • Create a 3D image. (MAYA, 3ds Max)
  • Create sprites for flash animations.
Some Vector File Formats:
  • .svg
  • .ai - Adobe Illustrator
  • .pdf (If created using a vector program)
  • .cdr - CorelDRAW
  • .odg - OpenOffice Spreadsheet
  • .swf - Shockwave/Adobe Flash


Bitmap/Raster Graphics

Bitmap/Raster images are based on pixels rather than mathematical or geometric formula. Because bitmaps are based on pixels, they cannot be scaled without loss of integrity. Remember when you last zoomed in on a .jpg image it just looks like a bunch of squares? That is because the image is made of squares originally formed by pixels on a grid. When the image is displayed at 100% it may be hard to see because the pixels are small, but when scaled up to 400% it is easy to see. This shows that resizing an image does not rasterize (pixelate) an originally lossless image, but rather it has always been like that. I like to compare it to a painting, when viewed at a close distance you can see the brush strokes and small nuances, but when viewed stepping back a considerable amount you just notice the image painted and not the small details and marks.

Use of Bitmap/Raster programs:
  • Edit bitmap images. (Adobe Photoshop)
  • Create images to be viewed at one size. (Digital paintings)
  • Scan and save document files for quick and easy use.
Some Bitmap/Raster File Formats:
  • .jpg or .jpeg
  • .png
  • .tiff or .tif
  • .gif
  • .bmp
  • .RAW

Useful Links and Additional Information:


Posted by at Sunday, April 03, 2011
Labels: , , ,

2 comments:

  1. bdsApril 4, 2011 at 11:31 AM

    Thank you Mike for adding this . . .

    Under the Bitmap/Raster formats, .png can also be a vector file--based on certain requirements. For example, you can create a complete vector graphic in Fireworks and save it as a .png.

    ReplyDelete
  2. Mike GApril 4, 2011 at 1:21 PM

    Yes a vector program can save a vector image in .png format. While a .png is a lossless file type and very high in image quality, it is still a raster image. A .png scaled up will show pixelation at high magnifications such as 400% or higher.

    That said many applications and internet websites do not allow embedding svg or other pure vector file types, this means the vector image created will eventually need to be exported as a raster file to display in most places. For the best use of a vector file resize it in the vector program to the exact size you would like, then export it as a .png or .pdf. Those two files preserve the image the best.

    ReplyDelete

Subscribe to: Post Comments (Atom)