If you’re confused over the difference between the many image file types, you are not alone! When we start a new project for a new customer, we request a vector file of their logo. That request causes a confused look or the statement “can’t you just pull my logo off my website?”.
The answer is no. What is on your website is to look at. What we need is a good crisp piece of vector art for printing. Vector is infinitely scalable.
So… What is a VECTOR file and what is a RASTER image?
Raster images use many colored pixels (tiny dots) as building blocks to form a complete image. PNG’s, JPEGs, GIFs and are common types of raster images. Almost all of the photos found on the web and in print catalogs are raster images.
Because raster images are constructed using a fixed number of colored pixels, they can’t be dramatically resized without compromising their resolution. When stretched to fit a space they weren’t designed to fill, their pixels become visibly grainy and the image distorts. This is why altered photos may appear pixilated or low resolution. It is important that you save raster files at precisely the dimensions needed for them to remain sharp and crisp.
Vector images allow for more flexibility. They are built using mathematical equations rather than colored blocks. Vector files such as EPS, AI and sometimes even PDFs* are excellent for creating graphics that frequently require resizing. Brand graphics like your logo should be created as vector art and saved. Create a folder with a “master copy” of the logo and build whatever other raster images from that master.
* PDFs are generally a vector file – but – if you create it with a cheesy image that you pasted into MS Word, then export to PDF you won’t magically have “vector” art. Sad to say, but the old adage “garbage in, garbage out” definitely applies in everything related to graphics. Every tool has a purpose. For example: AI = Illustrator (illustrations – your logo!), PSD = PhotoShop (pictures or illustrations – but NOT your logo!), and IDD or IDML = InDesign (where you design your business card, letterhead, menu board, etc)
HIGH RESOLUTION OR LOW RESOLUTION?
To determine whether your raster images are a suitable resolution for a specific project, you need to verify pixel density. Units of measure are dots per inch (DPI) or pixels per inch (PPI). If you lift an image from the Web, you can be pretty certain that it WILL NOT BE good enough to use for Print!
Most Web designers create 72 dpi/ppi images to speed page loading in your browser. Even though your fancy new mobile phone is super high resolution, that doesn’t make magic and cause your art to be better that it was…
DIFFERENT IMAGE FILE EXTENSION TYPES AND THE BEST USE FOR EACH
JPG:
JPG (or JPEG) is a raster image that is used for photographs. JPGs can be optimized, when you save them in PhotoShop. On the web, you want your images files to be as small as it can be so your site loads quickly, but large enough to still appear crisp on screen. A JPG can’t generally have a transparent background so they are almost always rectangles or squares.
Best use = rectangle or square photos and photographs on your website.
PNG:
PNG is another raster image type. This is for Web Design. It is NOT for printing on paper, plastic, metal or anything where ink or paint is involved in the application of images onto those materials. The PNG format has been made more popular by mobile devices and free or “almost free” apps. Something to remember and consider: If it is free, there may be a reason why…
Best use = logos, icons and other images where a transparent background is preferred.
GIF:
A GIF is another raster image. A GIF is created from 256 colors from the RBG (screen) colorspace. The fewer colors and shades in an image, the smaller the file size. GIFs are ideal for images that use just a few solid colors like charts, graphs, and Web buttons (not photographs).
Best use = simple web graphics such as web buttons, charts and icons.
TIF:
A TIF (or TIFF) is generally a large raster file. It has no loss in quality and therefore is primarily used for images used in printing.
Best use = images and photographs for high quality print.
EPS:
An EPS file is a vector file of a graphic, text or illustration. Because it is vector it can easily be resized to any size it needs to be. An EPS file can be reopened and edited.
Best use = logos and complex illustrations or your entire design – ready to print.
AI:
An AI file is a proprietary, vector file type created by Adobe. They own the software (Adobe Illustrator) that allows you to edit those files. It is most commonly used for creating logos and illustrations – but NOT print layouts! (Ask us about a piece of design software also by Adobe called “InDesign”)
Best use = creating logos, graphics, illustrations.
Save with outlined fonts
Saving in “outlines” is a term that you will hear when sending files for print. If we do not have the exact font that you used in your design the text won’t have the desired look. Things will “move” in your design. Saving “outlines” basically means you are locking the text so that it’s no longer technically a font but instead made up of vector shapes that form your letters. This is important when sending graphics to print. Saving a file in outlines makes your text no longer editable – even by us! Be sure to save yourself an editable master BEFORE you create an outlined EPS for print.