ABOUTPORTFOLIOSERVICESRESOURCESCONTACT
REQUEST A QUOTE
designworks RESOURCES

VECTOR GRAPHICS VS. RASTER GRAPHICS
PYTHAGORAS VS. SEURAT

VECTOR GRAPHICS - REMEMBER ALGEBRA?
Remember the day you started talking about graphs in Algebra? All those x and y coordinates making lines and shapes? Remember thinking that you will never use this stuff in the real world? Well you were right. Thanks to the good people who have written vector based drawing programs like Illustrator, Freehand, and CorelDraw. They have done all the dirty work for us. Now we just open up their programs, draw some circles and squares and drag some handles around until we get what we want.

It’s not really that easy, but the point is that the shapes and lines are created using Algebraic equations. The images created in these programs are called vector-based graphics or just vector graphics. Vector graphics have many strengths and weaknesses. Their strengths include their ability to render type and large areas of color with relatively small file sizes. They can also be reduced or enlarged to any size without loosing any image quality. One major weakness of vector graphics is their inability to show continuous tone images like photographs or complex blends.

RASTER GRAPHICS - PIXELS, PIXELS, PIXELS
Enter raster graphics, which are also known as pixel-based graphics or bit-mapped graphics. Raster graphics are built on a grid of pixels. The number of pixels in one inch determines an image’s resolution. For example: Image A is 3 inches tall by 5 inches wide. Image B is also 3 inches tall by 5 inches wide. Image A is saved at 72 dpi (dots per inch). Image B is saved at 300 dpi. As you move in closer to view the detail in Images A & B, You will notice Image A will start to look jagged and clunky. While at the same viewing distance, Image B will still appear smooth, with clean, fine lines. Image B has a higher dpi and therefore better resolution. For a visual demonstration of this principle go to our section on Web Graphics vs. Print Graphics - Image Resolution.

Raster Graphics are best used for large photographic images. We use programs like PhotoShop to create and manipulate raster graphics. Their strengths include their ability to show continuous tones and shading in photographic images. Their weaknesses are in their poor scalability and relatively large file sizes.

BRINGING IT ALL TOGETHER
As designers, we use vector and raster graphics every day. Programs like Quark Express and PageMaker let us combine the two types of graphics to make datasheets, letterheads, tradeshow graphics, and other printed pieces. In the web world, the only two widely supported graphic formats are GIF and JPEG, which are both raster graphic formats. New technologies like the Flash Plug-in are beginning to utilize the smaller file sizes of vector graphics, but the change is coming slowly.


Downloads







ARROW
The Web Demystified
    Page Loading Time
    Screen Sizes
    Color on the Web
    Compatibility & Plugins
    Web Graphics vs. Print Graphics
    Image Quality vs. Download Time
    Vector Graphics vs. Raster Graphics
    Reaching Your Web Market