In my last blog, I addressed the first hurdle in helping you decide “Vector vs Raster? How to Choose the Right File Format.” In this article, I will take it one step further and help you choose the right file extension for the job from each of the two categories.
Vector vs. Raster
First, a quick recap of the differences between raster and vector, the two types of digital graphic images.
Raster images use individual pixels to form a complete image. The most common types of raster images are JPEGs, GIFs and PNGs. Since raster images are generated from a fixed number of pixels, they can’t be resized to create a larger image without causing the image to look grainy, blurry, or distorted. It is important that you save raster files at the exact dimensions you need in order to eliminate possible problems. If you have a 72 dpi (dots per inch) screen resolution on an image, it simply will not work in print, which requires 266 to 300 dpi.
Vector images are more flexible. They are constructed using mathematical formulas rather than pixels. Vector file types such as EPS or AI are excellent for creating graphics that frequently require resizing.
Now that we have that out of the way, let’s get down to decoding the different file types in each category. I know you are thinking, why is the file type important? Well, that group of letters following the period in a file name can actually determine the quality of the image. When choosing a file type, you have to consider both the image and where it will appear to be able to choose the right one.
To help you understand the different file types check out the detailed list below.
Raster File Types
JPG (or JPEG)
Joint Photographic Experts Group
Best for black and white images, images with complex coloring, still life imagery, and real-life photographs
Devised by photographers, JPG files were designed for photographs and photo-like images, so they work best with images that have smooth transitions between colors. JPG is the standard format for most digital cameras and are great for making smaller file sizes. JPGs can be optimized, so when saving them out of Photoshop, find the perfect balance of small file size and high quality. On the web, you want your image files to be as small as possible for your site to load quickly, but large enough to appear sharp and not pixelated. A JPG cannot have a transparent background so images are always in the shape of a rectangle or square with a solid background. They also use “lossy” compression when being saved, meaning image quality is lost as file size decreases, so you shouldn’t try to edit a JPG over and over because you’ll lose quality every time you decompress and recompress the file.
PNG
Portable Networks Graphic
Best for web images, flat areas of color, logos, transparent or semi-transparent images, and text images
PNG is a raster graphics file format that supports “lossless” data compression, resulting in cleaner and sharper images. While a PNG typically has a larger file size than a JPG, it can compress further when storing images containing text, line art, and areas of solid color. The PNG was created as an improved, non-patented replacement for GIF and is the most used lossless image compression format on the internet. A PNG allows you to have a transparent background making it ideal for logos or photo cut-outs on your website because it can appear on your webpage as a shape that overlays a colored background.
GIF
Graphics Interchange Format
Best for simple images like line drawings, color borders, and simple illustrations, animations, small icons
Most commonly known as the file format for animations on the web, the GIF uses lossless compression. GIFs store image data using indexed color, meaning each image can include up to 256 colors from the RGB color space. The fewer the colors and shades contained in the image, the smaller the file size. So, a GIF is ideal for images that use just a few solid colors and don’t have gradients or natural shades. You wouldn’t want to use a GIF for a photograph, for example, but it’s ideal for a line drawing. As stated above, GIF can also be used for animations. Ideally, ones made with line drawings and not photographs.
TIF (or TIFF)
Tagged Image Format File
Best for images that will be sent to print, images that need to be edited and have layers
TIF is an image format file for high-quality graphics and is excellent for print because there is no loss in quality. TIF was created in 1986 as a file format for scanned images in an attempt to get all companies to use one standard file format instead of multiple. TIF images are created using the CMYK color model for printing on a four-color press and are significantly larger in file size than their JPEG counterpart. TIFs don’t have to be 300 DPI but most are, as they are made for digital printing or traditional printing press use.
PSD
Photoshop Document
Best for images that have adjustment layers, masks, shapes, clipping paths, layer styles, blending modes
PSD files are the default format for saving data in Adobe Photoshop. Though some PSD files contain just one single image and nothing else, the common use for a PSD file includes much more than just storing an image file. They support multiple pictures, objects, filters, text, etc., as well as layers, vector paths and shapes, and transparency. Since PSD files are a proprietary file type from Adobe, they are best reserved for those who own the Adobe software.
Vector File Types
EPS
Encapsulated Postscript
Best for logos and illustrations
A true* EPS file is a vector file of a graphic, text, or illustration. Because it is a vector image, it can easily be scaled to any size and can be edited with virtually any design software. It also has an unlimited color capacity. An EPS is especially great for logos – it keeps the logo file from altering the layout of the final print piece due to its size and background. With a PNG for the web and an EPS for print, you can do anything you want to promote your brand effectively.
*I mention a true EPS because sometimes we have received EPS files that are actually raster images. Essentially the image was simply saved with a different extension. The file is not editable and wasn’t created by way of a mathematical grouping of points, lines, curves, and shapes. Also, as a reminder, once you save an EPS vector file in Photoshop, it becomes a raster image.
SVG
Scalable Vector Graphic
Best for crisp, clean vector web graphics at all screen resolutions
A SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The vectors can be simple shapes, paths, or, well, just about anything you can come up with in Illustrator. SVG images and their behaviors are defined in XML text files. SVG images can be searched, indexed, scripted, and compressed on the web.
AI
Adobe Illustrator
Best for logos and illustrations, but also great for easy edits between Adobe programs
Similar to a PSD file, AI is a proprietary file format by Adobe. Unless the file is saved with PDF compatibility, you can only view an AI with the appropriate Adobe Illustrator software. An AI file is editable, scalable, and transparent. It has the same capabilities as an EPS file, but as Adobe expands ease of transfer within its software programs, AIs are becoming a more viable format. It is most commonly used when creating logos and illustrations for print layouts.
Which format is best?
Working with images can be confusing, and unfortunately, there is no one “right” answer. Ultimately it depends on the application of the image. This guide should help you eliminate the guessing next time you have a project and are trying to gather your images. And don’t be afraid to experiment with a few different formats on the same image if you aren’t sure what is best.
While I have only scratched the surface of what’s available, you should now have a working understanding of the most common image types and when to use them. With enough time and practice, you’ll find that selecting the right format becomes a more automatic process.
