Vector vs raster

Raster Image Files – .jpg .gif .png .tiff .bmp

Rasters are what most people think of when they think of images. They are the type of image produced when scanning or photographing an object. Rasters are made up of pixels, or tiny dots. Each pixel contains unique color and tonal information that when combined, create an image.

The number of pixels that make up the entire image as well as the number of pixels in a defined area (the resolution), determines the quality of an image. Resolution is measured in DPI (dots per inch) or PPI (pixels per inch). Raster images with a higher number of dots per inch are higher quality.

When increasing or decreasing the dimensions of a raster image, the size of the pixels is also increased or decreased. So if you enlarge a raster image, the pixels are stretched over a larger area, causing a loss of quality. This may make the image look blurry or pixelated.

Printed materials require a higher resolution (typically 300dpi) to ensure the image appears crisp and clear when printed. Digital images appear crisp and clear on screen at lower resolutions (72-150dpi). A lower resolution equates to a smaller file size so it is advisable to use lower resolution images for websites as it will allow pages to load more quickly.

Vector Image Files – .eps .ai .pdf .svg

Vector images are created digitally using software such as Adobe Illustrator or CorelDraw. A vector image is made up of points, lines, and curves that are based on mathematical equations. Elements are created using proportional formulas which allows them to be scaled up and down in size as needed with no loss of quality. Logos and brand graphics are usually created as vector files.

How do I tell the difference?

Unfortunately it’s not always easy to tell. If an image contains lots of variation of colour and graduating shades (e.g. a photo), it is most likely a raster image. Vector images usually have fewer and more flat colours (such as a logo, icon, or illustration).

If the file type is .jpg, .gif, .png, .tif or .bmp it is a raster image, even if it looks like a vector image. If the file type is .eps, .pdf, .svg or .ai the image MIGHT be a vector image. However, vector images are sometimes converted to raster images and unfortuantely, raster images cannot be converted back into vector images so it is important to keep vector versions of your logos on hand in case they are needed by your designer or printer.

Common image file extensions

JPG (or JPEG) – Joint Photographic Experts Group
PNG – Portable Network Graphics
GIF – Graphics Interchange Format
TIFF (OR TIF) – Tagged Image File
BMP – Bitmap
SVG – Scalable Vector Graphics
RAW – Raw Image Formats
PDF – Portable Document Format
EPS – Encapsulated Postscript
INDD – Adobe Indesign Document
AI – Adobe Illustrator Document
PSD – Photoshop Document