Image via KittyVector.
What’s an SVG? How do you pronounce GIF? We go over the basics of the most common file types for graphic design in this overview.
File Format Categories
There are three main types of art files a designer will use. In each category we cover, we’ll share an example of an “exchange” file type — those designed to be universally accepted — and a “native” file type — those designed for specific applications.
We’ll exclude files for layout programs, such as Adobe InDesign. Those files link to and compile many file types. Layout programs have proprietary systems, but most of them will read files created in other programs.
Image via iana kauri.
Vector files mainly use the .eps, or Encapsulated PostScript. An .eps file is a legacy file format, created to support both vector and raster information across platforms. Being relatively old, they can be read by any professional design program you can think of.
You can convert and flatten layered .eps files to a .jpg or .png for web; a .pdf for web or print; or a .tif file for high quality reproduction.
Specific to Adobe Illustrator are .ai files. These are also version-dependent, which means a file has attributes and capabilities relative to the version of Illustrator in which it was created. This is why you’ll sometimes see a pop-up window asking if you want to update or convert an older file to the current version of Illustrator.
Most free and web-based programs can interpret .ai files, rather than read them, so the results may not mirror what you would see in Illustrator when you open up these projects.
Image by Aris Suwanmalee.
There are tons of raster file formats. They are used for drafting, auto-cad, architecture and all sorts of planning programs. We will stick to the graphic design-centric formats, as usual. I don’t want anyone to get confused out there.
Photography and flat art (made of pixels, or bitmaps) mainly use .jpg, .tif, and .bmp, or bitmap image file. These are simply container files for a map of pixels that make up a picture on a computer screen.
A .jpg, or Joint Photographic Experts Group, can be used for a simple web-based icon, and it can be used for very high quality images from digital cameras. But, this file type uses lossy compression method to keep file size down. When you save a .jpg you’ll be asked to set the compression or quality level, which gives you control over the file size but can affect the look of the image.
A .tif file, or Tagged Image File Format, is uncompressed, or compressed in a lossless format, to retain every available detail. Use this in such cases as scanning historical documents or archival photo files — .tif files can get very big. They can support Photoshop layers, but when it comes to those. . .
A .psd is a Photoshop raster format that supports all the attributes in a Photoshop file, such as layers, smart objects, effects, and typography. While a layered .tif is cross-platform and sometimes smaller due to compression, it’s easier for people to see a .psd and know that it is a working Photoshop file.
Tip: If only for easy communication, and to keep working files organized among multiple users, we generally use .psd for working/layered files and .tif for flattened files.
Image via KittyVector.
In addition to using .jpg image files, the web uses .gif, or Graphics Interchange Format, for animation. The main difference when using static images between the two formats is quality and number of colors.
A .jpg can use a higher number of colors than a .gif*, with higher quality edges and smoother gradients. A good rule of thumb is to use .jpg for static images with no transparency, and use .gifs for animated images.
Another popular format in web design is the .png file, or Portable Network Graphics, and is the most widely used lossless image compression format. These are great because they support transparency. This is crucial to rich web designs, as you don’t have to color-match backgrounds and are not forced to contain images in boxes. Learn more about how png vs jpg stacks up.
An .svg stands for Scalable Vector Graphics and, as such, is a vector file you can use on the web. They support interactivity and animation, and can be edited with drawing software such as Illustrator.
.svg files creates super sharp web images no matter the platform. Use .svg files when designing for interactive websites, animated web videos, or whenever you want dynamic, crisp vector shapes instead of compressed pixel images.
*By the way, there is only one way to say “gif,” so please avoid ridicule and get it right.