Vector vs. Raster 101

We have been answering this questions since we first started using graphics on the computer. I will attempt to break down the basics without out too much tech jargon.

Raster Files Extensions: 

  • TIFF (tagged image file format)
  • JPG (Joint Photographic Experts Group)
  • GIF (graphics interchange format)
  • BMP (bitmap)
  • PNG (Portable Network Graphics)

Vector File Extensions:

  • EPS (encapsulated postscript)
  • AI (Adobe Illustrator)
  • SVG (Server Vector Graphic)

Mixed File Extensions: 

  • PDF (Portable Document Format) Can contain any or all of the above)

Raster images are made up of pixels tagged to be a certain specified color. If you have a one-inch square image that is at a resolution of 72 DPI (Dots Per Inch or pixels per inch) it contains 5184 pixels. 72 x 72, just like figuring square feet. Heres the import thing that differentiates Raster from Vector. Resolution is not scalable. Only the image is scaled. not the resolution. If you take the 72 DPI image and make it 3 inches square, you now have a 3-inch square image that is at 24 dpi. Same goes for reverse. Make the image smaller and the image tightens up. Web pages use a screen resolution of 72 DPI for most screens. Print uses screens from 85 DPI for a newspaper to 150-200 DPI for offset printing. So as a rule of thumb, an image that works at 3 inches across on the web may only work as a 1inch wide image in print or smaller. Lower resolutions for the particular format and size results in pixelation.

So to say you have a 300 dpi image means little of usability unless you include the size.

 

Same image at 10 DPI and 72 DPI.

Raster images are used for photographs that can contain millions of colors.

Vector images are often used for graphics like logos. A vector image is made up of lines of code that tell the display how to draw something. So take the 1-inch square. Make a point (vector) in the top left, one in the bottom right and create a rectangle, now fill it with black. You end up with a black square. Scale it up to 10 feet or down, does not matter because it’s simply a line and a fill now matter how big or how small. The actual file for this is extremely small and does not change based on the size. The other benefit is the vector formats support transparent backgrounds, which helps in placing a logo on color or a photograph without getting a white box behind it.

  • 1 inch square in TIFF format 72 DPI – 35,928 bytes
  • 1 inch black square in JPG (compressed) format 72 DPI – 350 bytes
  • 1 inch photograph square in JPG (compressed) format 300 DPI – 11,305 bytes
  • 1 inch black square in EPS format – 950 bytes

So the graphics and their use can determine what is best in certain formats. Photos don’t make good eps files (Monster size files). But vector files are scalable.