Vector vs Bitmap (Raster) Graphics: Which is Best?

Grrrrrr!

Ever find yourself using an image only to find out that it's pixelated?  It's because you are using a Raster (Bitmap) image like PNG instead of a Vector image like SVG.  But, sometimes it is better to use raster than vector.



What's the difference between Raster and Vector?

Rasteror bitmap, images are built on a dot matrix (aka a grid).  For example, a 100-pixel bitmap is a grid of 10,000 squares (pixels), because 100 x 100 = 10,000.  Each square is completely or partially filled in so that collectively, when zoomed out, they create an image.  When scaled out, the image can appear smooth, but when zoomed in, the edges become jagged (pixelated).
Common raster formats:  BMP, GIF, JPEG, PNG


Vector images are built on mathematical equations that are created with points (nodes), each defined by an (x,y) coordinate, and paths that connect the points to create lines and enclosed shapes.  No matter how much you scale or zoom the image, the edges are very smooth.
Common vector formats:  AI, EPS, PDF, SVG




What does this all mean?

The type you should use depends on your needs.  Vector images scale/zoom nicely, because raster might display nicely in a high resolution but not when zoomed in.  Vector images are oftentimes smaller in size than raster.  Raster files are usually slower to display and print.  However, raster is usually better for digital photography and images with many color blends, because it can use up to 16 millions of colors compared to vector's mere thousands.




This presentation gives a little more information as does this article.  For complete information, please see The ACME Corporation.

Comments