BITMAP VS VECTOR

Before using these formats, it is helpful to know:

1. WHAT they are
2. WHEN to use them
3. WHERE to use them
4. WHY that are used for specific images

Before we can start working with graphics formats, we need to define what they are:

What is a Bitmap?

A BITMAP (somtimes called raster) uses a set of PIXELS on a FIXED grid (map) to define an image. Hence, the term bitmap.

NOTE: Pixels is a blended word from picture and elements)

Because a bitmap uses pixels in which each pixel's color, location has to be registered in memory at fix locations on the screen, it has two inherit characteristics:

• It will have a larger file size compared to its vector format counterpart that which will be explained next.
• It will be resolution dependent (Its size is dependent on its resolution.  If you atempt to scale it much larger than its ORIGINAL size, it will become pixelated)

What is a Vector?

A VECTOR uses a set of POINTS based on a FORMULA that is used to define an image (its strokes and fill colors).

Because a vector uses a formula and not a set of pixels, it also has two inherit characteristics just the opposite of a bitmap:

• It will have a smaller file size compared to bitmap.
• It will be resolution independent (Its size is NOT dependent on the resolution. If you scale it much larger than its original size, it will look the same but larger)

NOTE: Both format is ultimately RENDERED to the screen as PIXELS.

Bitmap and Vector Formats

It is important to know when and where to use one format over the others and why. Below are definitions that will define both graphic formats and when to use which one.

• Bitmap – *.jpg, *.gif, *.png (where to use them: these are web friendly formats)
  • *.jpg – used mainly for digital pictures (from cameras, smart phones, videocam, etc) or scanned images – It supports 24 bit or over 16.7 million colors, but doesn't not support transparency. It decompresses slowly.
    
    
  • *.gif – used mainly for image with a lot of solid color and lines (e.g., clipart, lineart).   It supports 8 bit or 256 or less colors and it supports INDEX transparency.  It also supports animation (e.g., animated gif). It decompresses quickly.
    
    
  • *.png – used mainly for images. It has the best of both worlds (16.7 millions colors like jpgs and transparency like gifs).
    
    NOTE: PNG files comes in two main flavors: An 8-bit PNG which is similar to a GIF file in that it is limited to 256 colors, including a single transparent color and a PNG-24 that can store as many colors as a JPEG file but have 8 bits for transparency. This means each pixel of a PNG-24 image can have 256 levels of transparency. The png format also uses lossless compression like the gif format that will be discussed later.  Colors are displayed more accurately. PNG compression may result in a larger file than JPG. As a result, it it best used when transparency is needed with the image.
    
    
  • *.tiff, *.bmp, *.pict, etc. other bitmap formats that are not used on the web.
    
    
  • *.eps – can contain both bitmap and vector data and is being replaced by the PDF format.

• Vector – *.swf, *.svg, *.ai, *.eps, and pdf
  • *.swf – Flash Small Web File compiled format that is used on thhe web or in RIA (Rich Internet Applications)
    
    
  • *.svg – Scalable Vector Graphic format – used in Google and Yahoo maps, etc.
    
    
  • *.ai, *.eps – Adobe Illustrator vector formats using in print production and by other programs like Photoshop.
    
    
  • *.pdf -- a versatile file format that can contain just about any type of data including complete pages.

NOTE: It is helpful to think of when working with bitmaps that you are PUSHING on PIXELS and when working with vectors that you are DRAWING VECTORS (Paths).

Converting from one format to another

Sometimes it is necessary to convert from one format to another (e.g., If you are creating a logo, it may be helpful to convert it to a vector format):

• The process of converting from a bitmap to a vector is called vectorizing or outlining. You can use programs like Adobe Illustrator, Flash or CorelDraw.
• The process of converting from a vector to a bitmap is called rastering. You can take a screen shot of the vector image or you can open it in Photoshop and save it as a bitmap.

Lossless vs Lossy compression

The gif and png formats support lossless compression. In losseless compression the image data is not lost or "throw out" only encoded. Hence, the image quality doesn't degrade as the amount of file compression increases.

In order to get the file size down smaller, it can be compressed using various compression algorithm. One type of compression is called Run Lenght Encoding (RLE).

See Demo below of an example of RLE.

TO ENCODE the image use the formula: 10b, (1b, 8r, 1b)8, 10b

To DECODE the image, the formula is read back to draw (render) the image to the screen in the form of pixels.

The jpg format support the lossy compression which does "throw out" image data.  That why it is not good to recompress an image that has already been compressed.  Image quality DOES degrade as the amount of file compression increases.