File Formats Explained aims to make implementing designs, images, and graphics easy as pie.
We’ve all seen it: the dreaded fuzzy picture on a website. A pixelated printed document. The annoying white background behind a graphic. These hiccups are totally avoidable if you know your file formats. And you need to know them, whether you’re adding an image to a website, printing a logo on a business card, or creating a colossal billboard image. To ensure that your final product is the best it can be, here are a few basic file formats explained in basic terms.
A JPG (or JPEG) is one of the most common image file types. With standardized compression, JPGs can be scaled down to help lower the file size for quick load times or just to save space. JPGs can be opened with or imported to any program that supports images.
Almost all photographs are JPGs by default, which is the ideal format. JPGs can also be used for graphics, but they will have a solid color background included in the image. JPGs are usually the smallest file size for rasterized (pixel or grid-based) images and are the preferred format for images on websites. They allow web pages to load as quickly as possible.
PNGs, short for Portable Network Graphic, are pretty similar to JPGs. But they support transparency, which makes their application more flexible. This also means that PNGs are typically larger files than JPGs. With PNGs, you can have an opacity that will overlay and interact with underlying layers. You can also have knocked out backgrounds. PNG file types can also be opened with any program that supports images.
PNGs are great for overlaying one image on another without the background color, like overlaying a logo on a photo.
Portable Document Format files, or PDFs, were created to present documents that support text and images. PDFs are incredibly common and have evolved to include some formats that are editable. Adobe PDFs allow text and image editing, making them a great standard file type that leaves room for manipulation and changes. PDF documents can be opened with image-supported programs as well as design software.
PDFs are ideal for print projects. However, just like JPGs and PNGs, they must be exported at the correct size and quality to keep them clean and crisp.
While a JPG and a PNG are both raster file types, meaning they’re defined on a grid of pixels, EPS files can have both raster and vector images. Vector images are created in vector software, like Illustrator, and are mathematically defined to be scaled up or down to infinity while maintaining quality. Raster files are limited in their resizing depending on the quality of the original image. An EPS file that doesn’t have any raster images in it can be used at any size without looking pixelated. Similar to PNGs, ESPs also support transparency. Standard preview programs should be able to open ESP files. However, the selection is more limited as ESP files are typically opened in design programs.
EPS files are primarily used for design purposes. For example, if an image needed to be sent to a printer or designer for anything from business cards to billboards. ESP files can be opened in multiple design programs, so they’re perfect for sharing working files.
SVG stands for Scalable Vector Graphic, and it’s just that. Like ESP files, SVGs are vector images, meaning they can be made as small or as large as you want while retaining crystal clear quality. SVGs also support transparency, as well as interactivity and animation.
SVGs are great for the web since, like EPS files, they are defined by code stored in the metadata of the image itself. This makes the files a bit larger but allows for a bit more wiggle room as far as manipulation and usage.
SVG and EPS files are extremely similar. The major difference being that SVGs were specifically designed for the web, and EPS files are more tailored towards design software.
AI and PSD
AI files are design files from Illustrator, a vector design program. PSD files are design files from Photoshop, a raster design program. These file types must be opened in their respective programs, but are fully editable working files. They allow you to manipulate the file as well as export different file types, sizes, and qualities.
AI files are not images and cannot be used like such. They offer complete flexibility and the ability to export an exact file type should a project require it.