Categories / Tutorials
Infographic: The Missing Guide to File Types
Marshall Taylor March 31, 2021 · 7 min read
(.ai) Adobe IllustratorAdobe Illustrator is a vector based program, which, in it simplest form, uses bezier curves to create shapes. There is a substantial advantage to being a vector based program, and that is thanks to the scalability of the working file. A vector working file can easily scale from one square inch to ten square feet, with no image quality loss. Logos, for example, should always be made in vector form, since a logo’s application can range in sizes from that of shirt tag, to the side of a airplane. Main Feature: Scalability. Common outputs: JPEG, PNG, PDF, SVG
(.psd) Adobe PhotoshopPhotoshop is synonymous with the modern graphic designer and is a powerful digital tool. At the core of the program, it is raster based and conforms to a pixel grid. Its uses range from photo retouching and digital painting to web design and app design. A raster working file is great for highly detailed imagery in addition to working within a specified pixel dimension. Main Feature: Pixel Perfection. Common outputs: JPEG, PNG, GIF
(.indd) Adobe InDesignAdobe Indesign is the premier desktop publishing software and is used predominantly for print projects. Indesign is best for when projects will have a lot of copy, and may span multiple pages, in addition it will give the designer the largest amount of tools and functions for typesetting. Print projects are ideal candidates and should almost always be created in Adobe InDesign. The INDD working file will often come in a package along with the project’s fonts, images, and other working files that were used. For example, your INDD working file may have utilized external files like a PSD, the external files remain editable, but will need to be linked to the INDD file so that updates are reflected in real time. Main Feature: Print Layouts Common output: PDF
(.jpeg) Joint Photographic Expert GroupA JPG is a very common image file type, versatile and compact. It is used for a variety of applications, so keep in mind its core features to know when it is the needed file type. A JPG is great for when both the final dimensions and the intended use is known. For example, the pixel dimensions of a Facebook profile header on a desktop viewport is 851×315 (width x height), meaning you would want to have a JPG that matches those dimensions. A JPG can also be outputted at different quality levels. The advantage to this is that the weight of the file can be controlled, keep this in mind when a file is intended to be passed around. A website mockup could be sent as low quality jpg, speeding up email transfers and avoiding going over an emails maximum file size.
(.png) Portable Network GraphicsA PNG is also an image file type, and can often carry a little more digital weight than a JPG; however, the lossless compression and transparent backgrounds make up for the con of the additional megabytes. A lossless file type allows the image to be passed around digitally, through email for example, and have zero degradation of the image’s visual quality. Along with that, a PNG can also have a transparent background. That quality is helpful for when you want to use a logo, for example, and you intend to overlap that logo onto an established background, avoiding the disruption that a rectangular JPG would cause. Look at the logos used on many websites, they will likely be PNGs so that they can adapt to their surroundings better with transparent backgrounds.
(.gif) Graphics Interchange FormatThe unanimated GIF image file type is becoming slightly antiquated since larger file transfers are becoming faster and easier to access. A GIF’s main advantage is its small file size, but the compromises of its restricted color palette do not make it a good choice for static images. A static GIF might not be as commonly needed, but thankfully there is a resurgence of quality animated GIF’s, albeit some more questionable than others.
(.svg) Scalable Vector GraphicsThe Scalable Vector Graphic is accurately named, and currently has fairly specific uses. Like the Ai working file, a SVG is a vector image, but unlike the Ai working files, a SVG is code not an image file. In fact the SVG is comprised of XML files that dictate its vector shape, color, placement, and so on. This allows both a vector editing program and a developer with knowledge of the XML language to edit the outputted look of the image. For example, web developers are beginning to use SVG files on websites in replacement of a vector based image. Logos, icons, illustrations and more are being replaced with SVGs, which can help decrease production time when on the fly changes are made.
(.pdf) Portable Document FormatIn my experience, a PDF is very commonly used when the file could or does have a printed version. Forms (interactive or not), brochures, annual reports, books, posters, and any document that could be printed is usually transferred as a PDF. This is because the PDF, when outputted by Adobe Illustrator or Adobe InDesign, has a huge range of options, giving it a lot of control over its compression, file size, printer settings and more. A PDF can also carry additional data like vector paths or originals image files, and can remain text editable when needed. PDFs can be small when needed, but when keeping the highest fidelity, the file size can also quickly increase. Large PDFs will be common when they are outputted for print, since the highest quality will be wanted. Additionally, be aware that you may be sent small PDFs initially as drafts, but before going to print, double check with who ever created it if that file size and quality is “print-ready.” It should be obvious that this list is not a comprehensive gathering of all file types, rather an introduction to common file types you may encounter when interacting with digital creatives. Knowing when to use a certain file over others can avoid headaches, wasted money, and lost time.
Products Seen In This Post: