These days, there are a lot of file formats (or extensions) out there in the graphic world and each one of them has their own purposes, pros, and cons but it can be both confusing and overwhelming if you don’t know what the differences between them are. This post is dedicated to help you understand a little easier.
Currently, there’s 3 different types of image formats that you’ll see on images displayed on the web. They are .JPEG (.jgp), .GIF, or .PNG.
- JPEG (.jpg) – (Most Popular Web Format) JPEG stands for Joint Photographic Experts Group and they are the most common used format for photographic images on the web. JPEG is used most frequently due to its ability to compress the file size of an image but at the same time retain the quality of that image. Nowadays you can use .jpg for just about everything online because of fast internet speeds.
- GIF (.gif) – (You could probably never use this again and it would be ok) GIF stands for Graphic Interchange Format. Since GIF’s are limited to a 256 color palette, it was generally used for graphics that don’t exceed that amount of color such as web buttons, borders, logos, and animated images and wasn’t intended for photographic images which require much more color. One important thing to note about GIF images is that they could save the background of an image as transparent so a graphic could be displayed properly on website regardless of that page’s background color. Usage of .gif files are becoming more and more unpopular and typically isn’t used these days for graphics except from little animated images
- PNG (.png) – (Will soon take over jpg and gif)Portable Network Graphics (PNG) still isn’t supported by all browsers but is fastly replacing and is more commonly used these days than .gif’s due to its higher compression rate and better image quality. Like .gif’s, PNG’s allow for transparency but also allow different degrees of transparency which is known as opacity, which GIF’s do not.
- Adobe Illustrator (.ai) – (Where designers do their thing) Illustrator files are typically what most designers work with when creating vector-based artwork. Vector artwork is based on mathematical shapes which can be shrunk down or be scaled up to the size of a building (or as big as you can imagine) without any loss in quality, unlike raster artwork which is based on pixels and is only as big as the pixels used to create it.
- Encapsulated PostScript (.eps) – (Typically for sending to printers for the highest quality print job) the EPS format preserves the graphics you can create with Adobe Illustrator (or various other programs), which means that EPS files can be reopened and edited as Illustrator files.
- Portable Document Format (.pdf) – (Standard for exchanging documents) PDF files, created by Adobe, can show vector artwork, text, fonts, and images to anyone regardless of what kind of computer they’re on or what kind of applications the may or may not have.
- Photoshop Document (.psd) – (Mainly used to create graphics for the web) The PSD file is Adobe’s Photohop native format which supports many imaging options such as layers with masks, color spaces, ICC profiles, transparency, text, alpha channels, clipping masks, duotone, and spot colors.
- Microsoft Word (.Doc) - Doc (short for document) is a word processing file native to Microsoft Word but can also be read or saved by other programs such as openoffice, googledocs, or apple pages.
- Office Open XML (.Docx) – DOCX is a file usually saved by Microsoft Word and is a newer version of the .doc designed with XML format to be more efficient and smaller in file size. Docx is compatible on Word 2007 and up but can be converted to a .doc to be read by earlier versions of Word. Other programs such as OpenOffice (which is free) can also open .docx files.
- Microsoft Excel (.xls) – XLS is a spreadsheet file made by Microsoft Excel used for accounting and tabular data.
- Office Open XML (.xlsx) – Just like how .docx is the new version of Word files, .xlsx is the newer version of the Microsoft Excel document that is more efficient. XLXS only works on Microsoft Office 2007 and up and has to be converted to a .xls if you have an older version of Excel.
- Adobe InDesign (.indd) – When you want to create layouts for publishing (magazines, books, newspapers, flyers, etc.) designers use Adobe InDesign, or .indd, which provides many options for making professional layouts with sophisticated graphics and typography.
- ZIP (.zip) – (Makes files smaller) ZIPping files compresses them and can make the size of multiple files smaller by packing them together in what is called an archive. This can be very useful when you need to upload multiple files at once or email them. Instead of sending 50 attachments, you can archive (or ZIP) them together into 1 nice neat little package. Both Windows and Mac OSX has built in zipping abilities and you just need to select some files and right click “Compress.”
- Hypertext Markup Language (.html) - (Everything you’re reading right now) HTML is the basic building blocks of web pages on the internet. HTML is code where content is written between open and closing brackets such as <html></html> to format how a webpage looks. Your internet browser interprets these tags and displays the content correctly. HTML is used to show images, lists, headings, forms, etc.
- Hypertext Preprocessor (.php) – PHP is a scripting language that can be embedded into HTML to make dynamic web pages (pages that change with time and user interaction for example)
- Adobe Flash (.fla) – Flash is a program used to create add animation, video, or more interactivity to a webpage. It’s used a lot in advertisements, animations, and games on the internet.
- Adobe Flash (.swf) – When you want to add your flash creation to the web, you typically save it as a .swf file so the web page displays it correctly.
- MPEG-1 or MPEG-2 Audio Layer III (.mp3) - MP3 is a way to compress audio and is the standard format for music players like iPods etc.