Arrows

Vector vs. Bitmaps Syllabus File Types

Concept Map

OBJECTIVES
  • Define Bitmap Graphics and Vector Shapes
  • Define JPG's, GIF's, and PNG's
  • Define Vector Shapes
  • Overview of Two Print Formats
   

 

VECTOR SHAPES AND BITMAP GRAPHICS

Make informed decisions about graphics you'll by using in either print or web form by establishing an understanding of the differences between the two major graphic types: bitmap graphics and vector shapes.

BITMAPS IMAGES (GIF, JPEG, PNG)

Bitmap Example ABitmap images (Raster) are made up of pixels in a grid. Pixels are tiny dots of individual color that make up what you see on your screen. Images that are created and edited in Photoshop for example, are referred to as bitmaps because they are made up a series of pixels; resizing a bitmap to a larger size causes the bitmap image to appear rougher (Pixalate) than a vector graphic and file sizes tend to be larger because of the many square dots.

The advantage to bitmapped images are that you can get a great deal of detail, as much detail as a photograph. The downside is that you will always be confined by the pixel resolution of the image.

  • Bitmap images (Raster) are made up of pixels in a grid.
  • Pixels (square dots) are made up of different colors and values
  • Resizing to a larger size causes the bitmap image to appear rougher than the vector graphic (Rasterize or Pixelate).
  • Larger file size because of the many square dots.

GIF - Graphics Interchange Format - Images using a fixed color palette (limited to only 256 colors - not the full spectrum of colors available to your monitor). The GIF format uses compression for smaller files and faster downloads. This format is best for images with solid colors or areas of uniform color such as illustrations and logos.

Bitmap Example Aztec Calendar

JPEG - Joint Photographic Experts Group - Used for photographic (continuous tone) images. Unlike GIF files the JPEG format can take advantage of the full spectrum of colors available to your monitor. The JPEG format also uses compression for smaller files and faster downloads. However, unlike the compression method used in GIF files, the JPEG compression is "lossy" which means it discards data in the process. Once a file is saved in JPEG format the data is permanently lost. If you want all the image data available for future use, save the image using no compression or "lossless" compression and make JPEG copies from it.

Bitmap Example JPG - Barber

PNG - Portable Network Graphic -  Not supported by all Web browsers.  Developed to overcome the limitations of both the GIF and JPEG formats.  Native format for Macromedia Fireworks product, yet GIF and JPEGS are still more common. Advantages include: Lossless compression, 48-bit, true-color depth, varying levels of transparency, gamma correction, better compression, 10-30 percent smaller files than GIF, searchable content , patent-free compression algorithm

VECTOR IMAGES

Vector Paths ExampleVector Shape ExampleVector graphics use mathematical relationships between points and the paths connecting them to describe an image. These objects are defined by mathematical equations rather than pixels, so they always render at the highest quality. Objects consist of lines, curves, and shapes with editable attributes such as color, fill, and outline. Vector images are crisp illustrations, with distinct outlines and fills.

 

  • Nice Clean Lines
  • No Pixels (No Square Dots)
  • Vector describes the graphic mathematically as mathmatical points.
  • Vector shapes are made up of lines (Paths).
  • When you enlarge a vector graphic, it retains its solid appearance
  • Takes up much less file size than a bitmap graphic because there are no dots to keep track of.
  • Flash downloads faster when vector graphics are primarily used.

PRINT DOCUMENTS

TIFF - Tagged-Image File Format - Used for bitmaps only. The TIFF format is supported by virtually all graphics applications.

EPS - Encapsulated PostScript® - A file format used for both vector graphics and bitmaps. EPS files contain a PostScript description of the graphic data within them. EPS files are unique in that you can use them for vector graphics, bitmap images, type or even entire pages.

If the graphics application you are using cannot read native vector files the next best thing would be to save them as EPS (Encapsulated PostScript) files. These are self-contained PostScript files that contain the same mathematical descriptions as the vector files they are made from. Even bitmaps can be saved in the EPS file format. EPS files are supported by most all graphics applications and is the most portable format. It is best to use EPS files for all line art and illustrations because they can be reproduced at any size or resolution and still display exactly as they were drawn. Use them wherever native vector files cannot be used.