What’s the Difference Between Various Digital Image Files?

We’ve all encountered JPG (JPEG) and PNG images before, and most of you will have heard of or know a bit about TIFF, EPS, vector images and some others. But what properties separate these images from each other? They’re all digital images, right? To web designers and graphic artists, these terms are encountered on a regular basis, and to us, we understand the subtle differences that differentiate between each file type. But to the majority of the public, some of these terms are not so regularly used, and can cause confusion when talking to a design professional.

In this tutorial, we’ll be going through all the digital image files we regularly encounter. In order to help you understand these file formats a bit better, we’ve grouped them into main graphic format families, or categories: raster, vector, and compound.

 

Raster Formats

The definition of a raster graphics image from Wikipedia is “a dot matrix data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium.” So…what does that even mean? Simply put, think of a raster image as a grid with square dots (pixels), where each pixel is defined by a certain colour. However, because each image has a specific grid size, that makes raster images resolution-dependent.

Most web images and digital photos are raster images, which means that if you enlarge them past their native resolution, it will result in a loss of clarity and increase of blurriness. Some examples of raster file types are JPEG and PNG files. But there are various others; check them out below!

 

JPEG (Joint Photographic Experts Group)

We have all seen JPEG files before; they’re probably the most commonly used types of images for most applications. JPEGs have a file extension of JPEG or JPG. Think of them as small-size images, compressed to store a lot of information. But, because it is compressed into a small file, it suffers from something called lossy compression, where image detail can be lost in order to achieve smaller file sizes. Usually, JPEG files are used for photographs and web/document images since they are small and easy to load. They are not recommended for line drawings, logos and graphics because this compression makes the lines jagged or blurry.

But wait…why are there JPEGs and JPEG 2000 image file formats? A lot of people believe the two to be the same, but they’re actually not. JPEG 2000 is a compressed image file that enables both lossless and lossy compression. It has the file extensionJP2 or JPX and is capable of storing different parts of the same picture using different quality.

 

GIF (Graphics Interchange Format)

Animated GIFs are popular on the web and have the file extension GIF. They’re commonly used for animated profile pictures or web images, but never for printing or photography. Why’s that? Because unlike JPEG image files, GIFs have an extremely limited range of colours (8-bit or 256 colours) that are only suitable for the web. However, GIFs enjoy something called lossless compression, which means that the file cannot be as small as a JPEG. You can save logos as a GIF image file format if there are a limited number of colours.

 

PNG (Portable Network Graphics)

Have you ever seen an image with a transparent background or a checkered background? It’s most likely a PNG image file, with a PNG file extension. PNGs are similar to the GIF image file, mainly because it was created as an open-source alternative to the licensed GIF file format. Like GIFs, a PNG image file enjoys lossless compression. However, there are several improvements! First, it is capable of 8-bit, 24-bit, and 48-bit palette colours, while the GIF image file only supports 256 colours (8-bit). That’s a huge difference! With 8-bit, you get 2⁸ = 256 colours, and with 24-bit, you get 2²⁴ = 16 million colours! Secondly, PNG excels at compression and is now the most used lossless image compression format on the Internet.

 

TIFF (Tagged Image File Format)

No, it’s not the Toronto International Film Festival. It’s a TIFF image file format with the file extension TIFF or TIF. TIFF image files are very large because they are uncompressed and contain a lot of detailed image data. One of the perks to this uncompressed data is that TIFFs are extremely flexible in terms of their colour palette. They can be grayscale, CMYK (for print purposes), or RGB (for web publications). In addition, you can save layered images or image tags within the file. Because TIFF image files contain a lot of data pertaining to the image itself, it is commonly used in photo editing software like Adobe Photoshop and print design software like Adobe InDesign.

 

BMP (Windows Bitmap)

Usually, BMP files are graphic files with a BMP file extension that are found in the Microsoft Windows operating system. Like TIFF image files, they are large, lossless and uncompressed. Its only advantage is that it is simple in structure and accepted across all Windows systems. But in all honesty, it’s not commonly used nowadays unless you have a very old Windows PC.

 

Vector Formats

According to Wikipedia, the definition of a vector graphics image is an image which employs the “use of geometrical primitives such as points, lines, curves, and shapes or polygons (all of which are based on mathematical expressions) to represent images in computer graphics.” You can think of a vector graphic as an image that is made up of mathematically-defined vectors and paths. Since everything is defined by a mathematical expression, we can deduce that vector graphics suffer from zero loss of quality and can be scaled to any size we wish. This is something that raster graphics (or pixel-based graphics) cannot do.

So, can you think of multiple occasions where we can use vector graphics? You got it! Logos, graphic art and large print materials are all game to be saved in vector format. If you’re a company looking for a logo, be sure your graphic designer gives you a logo in a vector format so that you don’t end up with a blurry logo if you decide to enlarge it.

There are a couple of different vector image file formats, which are described below.

 

SVG (Scalable Vector Graphics)

An SVG image file format is pretty self-explanatory if you know what the letters stand for: Scalable Vector Graphics. These images are graphic files that have scalable vectors and have the file extension SVG. They are an all-purpose vector format for the web and other applications and is uncompressible.

It is also important to note that SVG images and their behaviours are defined by XML text files. XML stands for Extensible Markup Language, a language that defines encoding rules for documents. Since SVG files are XML-based, this means that SVG images can be searched, indexed, scripted and compressed.

 

DXF (Drawing Interchange Format or Drawing Exchange Format)

Unlike a two-dimensional (2D) SVG image file format, a DXF file is in a 3D vector format. To help explain this better, it is good to know that the DXF file extension comes from AutoCAD, a computer-animated design file format developed by Autodesk for “enabling data interoperability between AutoCAD and other programs.” Though DXF is specific to AutoCAD, it is possible to convert between DXF and SVG, and vice versa to allow for additional versatility.

 

Compound Formats (Metafiles)

By definition, the word “compound” means something that is composed of two or more different elements. So this means that compound images or metafiles are file formats that can store multiple types of data. When referring to image files, this means that compound formats can contain raster and vector data. There are two popular types of compound formats: EPS and PDF.

 

EPS (Encapsulated PostScript)

An EPS is a file extension for vector-based graphics in Adobe Illustrator and can contain both text and graphics. EPS files commonly include preview pictures of the content, but only is the software used to open the EPS file is compatible with it. If not, the preview will show an empty box on the screen.

 

PDF (Portable Document Format)

Everyone uses PDF files. But what most people don’t know is that a PDF is just a document that includes text, fonts, graphics and other information needed to display it. It is a versatile file format, and is commonly used for printing.