Image File Format Guide
As a designer that works with digital media, it is important to know what formats are available and which to use in any given situation.
With so many different file formats out there, it may get confusing on which ones should be used for specific situation. You may be comfortable with a few already, but knowing the different use cases for each can help you be a more efficient designer.
In the world of file formats, there are two main types of image files. Knowing the difference between the two is helpful. Vector-based formats are composed of paths, while raster-based formats are composed of pixels.
Let me break down some of the most popular file formats for you.
Vector Formats
.SVG
Scalable Vector Graphics is an image format for two-dimensional graphics. SVG has been developed by W3C since 1999. SVG images are defined by XML text files, meaning they can be created and edited inside of a text editor. It is Best used when you are looking to modify an image using code, need a scalable image, and when you need small file sizes.
.EPS or .EPSF
Encapsulated PostScript files describe an image or drawing and can be ‘previewed’ inside of almost any type of program from Illustrator to MS Word. EPS was developed by Adobe in 1992. The format is typically used to save artwork such as logos or drawings and can be opened using most all drawing programs.
Raster Formats
.JPEG or .JPG
In 1986, the Joint Photographic Experts Group (JPEG) formed to develop a standard for compressing image files. Typically used for photos, not images with text or solid lines. Each time a JPEG is edited and saved, it loses quality (lossy). Most images (photographs) you download from the internet will be in this format. Best used when you need to keep the file size small and don’t mind giving up some quality.
.PNG
Portable Network Graphic file format was created as a replacement for GIF. Unlike JPEG, a PNG supports lossless data compression. Developed by the PNG Development Group. Best used for web and mobile. Best used when you need small file sizes with no loss in quality. Many icons and logos will be saved in this format.
.TIFF or .TIF
Tagged Image File Format was created by the Aldus Corporation for use in desktop publishing. It has since been passed onto Adobe for development. Good for for bitmap (pixel based) images because of its use of the CMYK color palette. TIFF is lossless, but typically produces larger file sizes than a PNG file.
.GIF
Graphics Interchange Format was created in 1987 and has grown in popularity due to how portable it is. GIF is lossless, uses a 256 color pallette, and supports animations; making it quite unique. Best used for low color images such as logos or graphics.
As a developer, it’s specifically helpful to know which file formats to use so that you can minimize the size and download speed of a website. For example, if you’re using a logo that isn’t very complex and has only a few colors, you could save space by saving it as a .GIF instead of a .PNG.
I hope this guide has given you a decent understanding of file formats, their history, and the best times to utilize them.
Ben Dixon is a student in the Web Design and Development program at Utah Valley University. The above article relates to the ‘Image and Management Technical Brief’ project in the DGM 1240 class and is representative of the skills learned therein. View the project here.
