Vector or Raster? A Guide to Image Formats.

Image formats are known to most of us as three-letter acronyms like GIF, JPG, PNG, etc. These formats control how a computer compresses and decompresses the image data into something we can display or print. Some image formats use tricks to make the image small enough to load quickly on the web (png). Other formats are designed to carry transparency information (gif). Others are designed to carry dense enough data for high quality printing (tif). For our purposes, we are selecting digital images to color. So which format is best for us?

Image formats fall into one of two categories of information storage: raster or vector. In general, raster images are better for greyscale coloring, hand-drawn artwork, photography, etc., while vector images are better for traditional “black line” coloring pages and for creating graphic design elements, such as a company logo. Understanding how these two format categories differ can help you choose which type is right for your creative needs.

Vector-or-Raster-Image-Formats.jpg


Raster images like GIF, JPG, and PNG store image information in the form of pixels. Pixels are actually the smallest element of a digital image, the “atom” of a digital image. A pixel carries exactly one piece of information: color. A raster image is a defined grid made up of millions of dots (pixels), each one carrying a color value. When we look at the image, the pixels are so tiny that we see a picture and don’t see the dots at all. It is important to understand that raster images often do not respond well to dramatic changes in size because the clarity of any given raster is determined by how many pixels fill a specific amount of space, like an inch. If a raster is resized dramatically, those little dots of color information are squished or shoved apart, and the result is the all-too-familiar “pixelated” image—Blurry, jagged, and not very pretty!

Vector images are made from math. Raster images are made from blocks.

Vector images are made from math. Raster images are made from blocks.

Vector images like SVG and even PDF take another approach for encoding the image as data. Instead of storing a grid of dots with values like a raster image, vector images encode the mathematical instructions required to draw the image from points, lines, curves, and polygons. When you display a vector image, the software follows those instructions and recreates the image in a nanosecond. It can be helpful to think of vectors as blueprints or as the DNA for creating an image. Vectors resize easily, without losing quality, because all that changes is the math or basic instructions for making a line, curve, or polygon larger or smaller.

Thanks for reading - now get out there and create!

Cayce Garrison