Vector vs Raster
Raster images are a series of pixels that form a complete, flat image. JPEGs, GIFs, PNGs, and TIFFs are all common raster image types. Raster images are constructed using a fixed number of pixels and cannot be resized to fit a specific space without distorting or blurring the image. Raster files should be saved at the exact size needed for the application to avoid these issues. For example, a Facebook Cover should be sized to 820 pixels wide by 312 pixels tall. Most promotional products, such as pens, mugs, t-shirts, etc., require that the artwork be setup to vendor specifications. Typically raster files can be reduced but should never be enlarged. Because raster files are a flat piece of artwork, no changes can be made to the image itself, other than enlarging or reducing, or having color enhancements made in software such as Photoshop.
Vector images are far more flexible. They are constructed using individual pieces rather than pixels. They are perfect for artwork that often needs to be resized or reformatted. For example, a company logo should originally be created as a vector file so it can be sized to fit any application and then exported to any raster image required.
The resolution of an image determines how it can be used effectively. Resolution refers to the pixel density of an image — dots per inch (DPI) or pixels per inch (PPI). Resolution is important depending on whether you need the image for print or web. Web images are typically 72 dpi and print images 300 dpi or higher.
Image File Extension Types
JPG (or JPEG) stands for Joint Photographic Group and is most often used for photographs on the web. JPEG files are web-friendly as the files are typically smaller because the image is decreased as it discards digital information through compression. JPGs can be used for print, however, the resolution and file size must be larger to maintain better quality. You never want to enlarge a jpg when used for print. JPGs do not have a transparent background but they can be cropped or converted into a shape using a clipping path using software such as Illustrator or Photoshop.
GIF stands for Graphics Interchange Format. GIFs are often used for graphics and animation effects. They have a limited color range that is perfect for the web. Like JPEGs, the format compresses images but no details are lost in the process. While GIFs are still used, the PNG format is favored by most designers.
PNG stands for Portable Network Graphics. PNGs can have a transparent background and are generally larger and higher quality. PNGs are great for interactive documents such as web pages but are typically not suitable for print. PNGs allow you to save an image with sharper, higher quality, more colors, and a transparent background.
TIF (or TIFF) stands for Tagged Image File Format and is a large raster file. When a file is exported as a TIF, the file does not lose information or quality like a JPEG and can be used for printing. However, TIF files are not recommended for online use, due to size and load time.
EPS stands for Encapsulated Postscript. It is a vector-based file that can contain text as well as graphics and illustrations. The file can easily be resized — from business card to billboard — without losing quality and can be edited using vector-based software such as Adobe Illustrator. EPS files are perfect for print purposes but can be easily altered by the vendor or another person with vector-based software. If you have strict graphic standards, make sure EPS files are only sent to vendors you trust to maintain and follow your standards.
PDF stands for Portable Document Format. PDF was created by Adobe as a way to capture and review information from any application but has become the preferred format for commercial printers and for advertising in magazines or newspapers. When exported correctly, the PDF contains all the fonts, graphics, colors and other information required to ensure a smooth and high-quality print process. While a link can be made to a pdf on a webpage, a pdf cannot be used for image purposes. When exported from vector-based software, like Illustrator, PDFs, like EPS files, can be altered when dropped back into vector-based software if not flattened.
Raster images used for the web are saved in RGB (red/green/blue) color format while vector images are typically saved as CMYK (cyan/magenta/yellow/black).
