Which Image File Format Should I Use, and When Should I Use It?

Whether you’re a website developer or an everyday person who occasionally uploads and shares pictures or makes scrapbook graphics, at some point, you’ve been presented with the task of having to save an image in some type of file format of your choosing. The issue is that many people, even some of the tech-savvy, have no idea which file format to select and just randomly pick one, hoping that all the options are more or less the same thing. Then when the graphic or photograph is viewed in the final product, whether it be on a website or a brochure, questions arise as to why the picture or graphic appears grainy or distorted. Depending on where your images will be displayed, in a magazine or on a website, for example, or depending on what they will be used for, you will want to save your image files in one specific format instead of another to ensure the best image quality. In order to do that, you need to have at least some general knowledge of the different image file formats that are available and the various features and limitations that they come with. Here’s a brief guide on the major image file formats to be familiar with, some of the key differences between them, and general cases in which they should be used.

Vector vs. Raster

Before going through the different image file formats, it helps to first understand how they are defined and categorized. Image files fall under one of two primary file formats: vector and raster.

Vector Images

Vector images are images whose points, lines, and paths are defined and rendered by mathematical formulas. Because their shapes and appearance are dependent upon math equations and not finite visual points or lines, vector images can be infinitely scaled up or down without any change in file data size or quality. Vector images are resolution-independent, meaning that the sharpness of their appearance is not reliant upon them being of a particular size or having a certain set of dimensions. Vector images are usually used to create text, logos, animations, and illustrations; they are not recommended for complex images like photographs. Vector-based files are traditionally used and shared for work-purposes like art projects or presenting logos to clients for review. The final versions of vector images, or the final products containing them, are usually exported to a raster format that is displayed on the Web or in print like in a book or on a poster.

Raster Images

Raster images are made of tiny dots called pixels that have unique colors and image data that come together to form the actual image. Unlike vector images, raster images are resolution-dependent. This means that the quality of a raster image relies on the number of pixels present within a certain amount of length, which is usually inches. For instance, higher-resolution images display more pixels per inch (PPI), delivering more pixel data per inch to yield crisp, high-quality images. Images with low resolutions have relatively low or fewer pixels per inch, resulting in poor-quality images that are blurry or pixelated if they are scaled up to larger sizes that require more pixels per inch than are available in the image to appear sharply enough.Raster images are not only dependent upon resolution but also upon the actual number of pixels that comprise the image. Scaling a raster image down to a smaller size does downgrade its quality because some image data is lost in the process, but the loss in quality is typically not noticeable. However, if that image is scaled up for enlargement, especially without increasing the resolution, then the image will likely appear pixelated, particularly if scaled up too much. The reason for the poor quality is because the fixed number of pixels in the image are being spread or stretched out over larger dimensions in the enlarged version of the image, so the image is not as clear because the pixels are packed less closely together, resulting in less pixel data per inch. Raster images are used to create photographs, illustrations, and animations.

Types of Vector Files

EPS

Encapsulated PostScript, or EPS, is a standard vector file format that can be resized to any set of dimensions without degradation. EPS files are great for individual design items like logos but can also contain raster image components. They are useful for printing and can be viewed and edited in design applications that support vector-based file formats. They are not recommended for images that need to be displayed online. However, they can be exported to web-friendly formats.

AI

The Adobe Illustrator or AI format is a proprietary vector format created by Adobe; this file format usually should only be accessed and edited in Adobe’s Illustrator application. However, there are some open-source design programs like Inkscape that support .ai files so that they can be viewed and modified in those applications. Like EPS files, .ai files are good for creating logos and illustrations, as well as print projects like posters or business cards. Like EPS and any other vector format, they can be modified in size without loss of quality.

Types of Raster Files

GIF

Pronounced with a “J” sound like that in “jiffy,” a GIF, or Graphics Interchange Format file is a lossless image format, meaning that it retains all of the image data of an image’s original file. Thus, when compressed, GIF files will not experience any loss in quality. Able to produce images from a range of 256 colors, GIF images can create transparent images and animations like those in social media memes. They are ideal for cases when small file sizes are needed, and they are commonly used for graphic images on the Web. Because they are limited to 256 colors, they are not recommended for photographs.

JPEG/JPG

Joint Photographic Experts Group, known as JPEG, is probably the most popular image file format because it is widely used in web design and digital photography. JPEGs are lossy files, so when they are compressed, they decrease the file size significantly but at the expense of image color and overall quality because some image data is lost during compression. Depending on the size of the image, however, this loss of quality may not be visible in the final image. The relatively low file sizes of JPEGs compared to other formats make them ideal for websites, as smaller sized images help web pages load faster. JPEGs are also convenient for storing and sharing digital images, as well as for printing non-professional photos and artwork. The main drawback with JPEGs is that they do not support transparency in images. They are also not the best choice for professional graphic work like logo designs or for high-quality, professional printing of photos and artwork.

PNG

PNGs, or Portable Network Graphics files, are thought to combine the best of GIF and JPEG files together to create a convenient and versatile image format. Like GIFs, PNGs allow for transparency in images and are lossless formats that do not reduce quality when compressed. Similar to JPEGs, they are excellent for photographs and online images, but what makes them a step above both GIFs and JPEGs is that they provide higher quality than both and also support up to 16 million colors. The only potential negative with PNGs is that they tend to have bigger file sizes, which can slow down a web page’s load time. This is especially true if there are several PNGs on a page, which, in that case, would also increase the bandwidth usage of the site. It’s better if a mix of PNG and JPEG files are used for online images, preferably reserving PNGs for images that require transparency.

PSD

Another native file format of Adobe, the PSD format is used in Adobe’s Photoshop program, which is the industry standard in photo editing applications. Standing for Photoshop Document, a PSD is a layered image file that is used mainly to create and edit raster images, including their multiple layers of design features like transparency, color gradients, and decorative backgrounds. They can also contain vector image components, and they can be exported to web- and print-friendly formats like JPEGs and TIFFs, respectively.

RAW

Raw images are exactly that; they are raw, unprocessed images created by digital cameras and scanners. There are several raw formats like .nef by Nikon and .crw by Canon, as well as .raw. Designed for photo editing, raw file formats are the equivalent of double negatives because they contain a great amount of image data, including metadata, so they are really only ideal for photography, like in the shooting of photos, in addition to editing. For web or print output, raw images must be processed, converted, and compressed in a photo editing program like Adobe Photoshop so that they can be rendered in a compatible format like TIFF or JPEG for display in print or on screen.

TIFF

The Tagged-Image File Format (TIFF) is a lossless, high-quality format that is compatible with many graphics and photo editing programs. It supports transparency as well as layers like those in Photoshop files so that they can be accessed and modified after creation. Because they’re so high-quality and retain a lot of image data, TIFFs can be very large in size. This makes them great for printing large photographs and for the scanning of photos, artwork, and documents. But they are not recommended for web design or for online images.

Keep Digital Data Safe on the Web

Images and other types of digital data are assets, so they should be protected just like physical assets. Learn how to safeguard them by being aware of security risks on the Internet. Start with cyber security courses form Cybrary:

• Asset Security
• Risk Management
• Web App Security Fundamentals