As a graphic designer, I start every project with a client asking for a few necessary items. They usually consist of design or vector files of their logo or current branding.
Whether you’re honing your design skills and looking to work with clients in the future or you’re a small business or marketing professional working on your current brand or next campaign – understanding file types, when to use them, and why they’re useful is a good start to being successful.
Vector vs. Raster Images
We can divide almost any file type into one of these two categories, so it’s important to understand the difference between vector and raster images right from the start. Both are incredibly useful, but only when they’re used in the right way.
Raster images are created using pixels or dots of color to form a complete image. Because they’re constructed with a fixed number of pixels, they can’t be dramatically resized without compromising their resolution. Trying to enlarge them to fit in a space they weren’t designed to fill makes them grainy or pixelated, so saving raster images to the precise dimensions of their intended use is needed for best results. JPG, GIF, PNG are all raster image file types.
Tip: If you’re designing for a client – make sure you ask where they’ll be using their logos and find out the exact dimensions so you’ll be able to provide them with raster files for their website and social media platforms.
Vector images are created using mathematical formulas, which allows for a lot more flexibility when it comes to changing their size. Company logos and branding graphics should be created as vectors and saved as a master file so you can get them to be the sizes you need, when you need them. EPS, AI and PDF files are all vector image file types.
Tip: If you’re a small business – make sure you ask your designer to provide you with vector files of your logo as part of the contract when they design your logo or refresh your brand. Treat these files as a master copy – always save a copy first before making any changes.
Hi & Low Resolution Images
Resolution is another huge key to getting or providing the right files for a project. You’ve probably heard designers or website guys talk about dpi. Just in case you didn’t know, dpi is the acronym for dots per inch. Those pixels that we talked about earlier – well those are the dots. And dpi essentially means how many of those dots are in an allotted amount of space. The higher the dpi the greater the resolution.
There are two numbers that you should always remember when saving and placing files. 72 dpi is low resolution and intended for web use only. It’s a low number, but is the maximum resolution for monitors so it looks great on screen and the file is small so it loads quickly and doesn’t take up a lot of space. 300 dpi is high resolution and is needed for professional grade printing projects.
Tip: More isn’t always better. Sending over a higher resolution when it’s not needed can actually cause the image to look muddy when it’s printed or take along time to load on screen. Always follow the specs to get best results.
File Types & Best Uses
PNG – This raster image can have a transparent background which makes it great for websites because it can be layered over other items or colored backgrounds.
Best use: logos, icons, and other images where a transparent background is optimal.
JPG or JPEG – A raster image often used for photos on the web. Jpg files can’t have transparent backgrounds so they always come in a rectangle shape with a solid background. These files can be optimized when saving them from photo editing software so you can get a small file size with a high quality – perfect for fast loading on websites.
Best use: Rectangle or square photos on websites.
GIF – This raster image is formed from up to 256 colors from the RGB colorspace. Fewer colors means that the file size is smaller. This file type is idea when the image has only a few solid colors and doesn’t have gradients or natural shades.
Best use: Simple web graphics such as buttons, icons or charts.
TIF – This raster image is larger than the others. With no loss in quality it is used primarily for images used in printing. This big guy isn’t great for web use.
Best use: Master logo files and graphics for print designs.
AI – A proprietary vector file type created by Adobe that can be created or edited by Adobe Illustrator.
Best use: Creating logos, graphics, and illustrations.
EPS – Vector file of a file, graphic, text or illustration. Easily resized to any size it may need to be and can be reopened and edited.
Best use: Master logo files and graphics for print designs.
PDF – Generally, a PDF is a vector file. However, depending on how the PDF was created it can be either a vector or a raster file. Flattening or retaining the layers of your file will determine the image type.
Best use: As specified by printers or site design or in emails for general viewing.
