Image file formats: An overview of 10 image file types

Most users know common picture formats such as JPG and PNG. However, their exact dif­fer­ences and ad­vant­ages of the different formats aren’t well known. It’s often difficult or im­possible to tell the dif­fer­ence between a JPG file and a PNG or GIF file. But a closer look at the different image formats is worth­while. Each format has ad­vant­ages and dis­ad­vant­ages and is designed for different areas of ap­plic­a­tion. We’ll show the most common image file formats (pixel and vector graphics) and explain when you should choose which format.

Before we go into detail on which image file formats exist, it’s worth un­der­stand­ing the basic dif­fer­ences between pixel, raster, and vector graphics.

As the name already suggests, pixel graphics consist of pixels. What exactly does this mean? Pixels are in­di­vidu­al dots that make up a picture or graphic. The larger the number of pixels in an image, the higher the res­ol­u­tion and file size. The dis­ad­vant­age of pixel graphics is that scaling the image is as­so­ci­ated with a loss of quality. Each pixel has a defined size. If you enlarge a file, the pixels are also stretched and the quality decreases.

Vector-based graphics don’t have this dis­ad­vant­age. These image file formats have an image composed of two-di­men­sion­al objects that define the position, di­men­sions, and colours of the image. This allows vector graphics to be scaled flexibly while main­tain­ing constant quality. Picture formats in this category are suitable for graphics that are used in different sizes, typically logos or other marketing materials.

Choosing the right image file type largely depends on how you’re going to use the image. The following factors influence the file format choice:

• Do you need the image in different sizes?
• Are you using image formats for web or print?
• What file size do you need the image in and how important is a high image quality?
• Does the image require many different shades of colour?

For web purposes, quality comes in second place. What’s more important is a small file size and a short loading time. Ac­cord­ingly, lossy com­pres­sion is often ac­cept­able. In this case, the process leads to a loss of quality because data is removed from the image or reduced to one pixel. With lossless com­pres­sion, on the other hand, the quality is main­tained even with a reduced file size. When com­press­ing images, pixels of the same colour category are grouped together and metadata is removed.

JPG, PNG, or GIF: Some of the best-known image file formats are pixel formats. The reason: Raster graphics are suitable for almost all areas of ap­plic­a­tion and can be opened and edited in­de­pend­ently of which program you use. In addition, the usually detailed colour grad­a­tions and complex colour gradients are ideal for present­ing pho­to­graphs in the best light. The lossless com­pres­sion also lends itself perfectly to the present­a­tion of detailed graphics on the web. Below, we’ll introduce you to the most common pixel formats as well as their ad­vant­ages and dis­ad­vant­ages:

Have you ever noticed animated ad­vert­ising banners on a website or moving pictures in your Facebook feed? These were probably GIFs. GIFs are char­ac­ter­ised by their animated nature. A single GIF file contains all frames and time in­form­a­tion needed for an animation.

This image file format consists of up to 256 colours in the RGB colour space and is therefore not suitable for colourful and complex photos that normally cover several thousand colours. At the same time, the limited choice of colours is an advantage if you’re using image formats for web, because the reduced file size means shorter loading times – even with animated files. Sharp edges of shapes or fonts are even better rep­res­en­ted in the GIF format than as a JPG image. This image file type is therefore ideal for small graphic elements and for web graphics.

The PNG image file format was developed as an advanced al­tern­at­ive to GIFs. Unlike a GIF, a PNG can be saved with a trans­par­ent or semi-trans­par­ent back­ground and supports the alpha channel. In addition, the PNG format adapts to optimised computers, meaning that it adjusts itself to a growing range of colours. The colour spectrum covers up to 16 million colours, which is sig­ni­fic­antly more than a GIF. However, this image format is not suitable for printing because PNGs do not support the CMYK colour model. This is where the name ‘Portable Network Graphics’ comes from, which implies the primarily digital use.

PNG is a typical image format for the web that is char­ac­ter­ised by lossless com­pres­sion. Even small files are able to retain their high quality and res­ol­u­tion and show fine nuances. Ac­cord­ingly, PNGs are suitable for logos or other small images with many shades, making them ideal for further pro­cessing and for saving in different sizes. However, this also means that they require more memory space. A PNG file is up to ten times larger than a com­par­able JPG.

The JPG format is the most commonly used image file format. The files are char­ac­ter­ised by high com­pat­ib­il­ity and universal ap­plic­a­tion pos­sib­il­it­ies. This format can be opened and converted with almost any ap­plic­a­tion. In addition, JPGs offer the full colour spectrum with up to 16 million colours. The dis­ad­vant­age is that com­pres­sion of an image file leads to the loss of image data due to the com­bin­a­tion of similar pixels, which in turn leads to a loss of quality. This is also the main dif­fer­ence between JPG files and the PNG format.

For web use, the quality of a JPG file is suf­fi­cient in many cases, and lets you benefit from a fast loading time thanks to the small file size. So-called pro­gress­ive JPEGs offer an ad­di­tion­al advantage in terms of the user ex­per­i­ence, as images are loaded pixel by pixel, so that unwanted white areas are avoided on websites. A JPG can also be sent quickly and easily by email as a preview. Without com­pres­sion, high-quality JPG files are also suitable for printing.

The TIFF format differs sig­ni­fic­antly from other image file formats presented so far. Most web browsers do not support this format, which makes it un­suit­able for images displayed on the web. However, TIFF offers sig­ni­fic­ant ad­vant­ages when it comes to editing images. The format supports both RGB and CMYK colour models and has a high colour depth of up to 32 bits per colour component. In addition, layers, masks, and trans­par­en­cies can be saved.

Lossless com­pres­sion allows you to store or copy files without any loss of quality. The TIFF format is therefore ideal for printing high quality images. Image in­form­a­tion is either not com­pressed at all or com­pressed without any loss of data. However, the high-quality means that images require more storage space. This property also virtually rules out the use of image formats for web.

Since 1990, the BMP image file format has been an integral part of the Microsoft operating system and Windows 3.0. Ac­cord­ingly, BMPs can be opened without ad­di­tion­al plug-ins or third-party programs. Although this image format has now been largely replaced by other formats, it is still in use.

BMP is a simply struc­tured image format that is char­ac­ter­ised by fast pro­cessing times. Even after lossless com­pres­sion, image data is still re­l­at­ively large because all pixels are stored with their re­spect­ive colour values. Today, there are other image file formats with which an equally loss-free com­pres­sion is achieved alongside by a smaller file size. In the age of com­mu­nic­a­tion via email and web platforms, this image format is therefore becoming in­creas­ingly un­in­ter­est­ing and un­suit­able for modern ap­plic­a­tions.

PSD is the format of the leading image editing program Adobe Photoshop and a format fre­quently used by graphic designers. However, editing requires the ap­pro­pri­ate software. Therefore, the PSD format is often un­suit­able for in­di­vidu­als and for col­lab­or­at­ive work. You can work around this problem by using Adobe Photoshop and con­vert­ing the file to another image file type. Con­ver­sion is also necessary before printing.

With the PSD format, each image consists of several layers that can be easily edited. In principle, these files are raster graphics, but they can also contain vector graphics. This image file format is therefore ideal for extensive image editing.

In contrast to pixel graphics, which are fixed in size, vector graphics are much more flexible and therefore ideal for dis­play­ing geometric shapes and fonts. Lossless scaling also makes it easier to create re­spons­ive web elements. In most cases, special graphics programs are required for pro­cessing these files. Therefore, the following image file formats are usually ex­clus­ively used by graphic designers. But in­di­vidu­als are in­creas­ingly also taking a liking to the easily adaptable vector graphics thanks to free software al­tern­at­ives.

The PDF image file format is developed by Adobe, but, unlike other Adobe formats, does not require any company-specific software (although Acrobat Reader is the cor­res­pond­ing standard). The PDF format has es­tab­lished itself as a reliable exchange format and can be viewed without paid editing software – on any device, any operating system, and any web browser. The format is par­tic­u­larly popular to showcase print files.

With the Adobe range of programs, which are subject to a fee, PDFs can be processed in a versatile and flexible way. The found­a­tion of this picture format par­tic­u­larly shows its strength for vector graphics, but also maps pixel graphics. Even in the free version, PDFs can be expanded on with ad­di­tion­al features such as notes, comments, or file at­tach­ments. Ap­pro­pri­ate security settings can be used to prevent editing by third parties.

Like the PDF format, the AI format is a native image format of the Adobe family. However, unlike PDF, you need the Adobe Il­lus­trat­or program to display these files. The vector-based format can be scaled flexibly and offers the pos­sib­il­ity to embed or link raster graphics. The image file format is mostly used to save logos and other marketing materials, which are required in different sizes.

With Adobe Il­lus­trat­or, files can also be saved in any other common image file format. This fa­cil­it­ates the exchange of files between graphic designers and private in­di­vidu­als. Another advantage is that you can save multiple vari­ations in a single file by hiding and unhiding layers.

In 1987, Adobe published the EPS format in the Post­Script pro­gram­ming language. Today, the image format has largely been replaced by the more widely used PDF, which is also based on Post­Script.

EPS was the first format that made it possible to display documents exactly as they appear in print. EPS files, like PDFs, can be opened with free software across all platforms. The most common program to open EPS files is Adobe Acrobat Reader, but there is a wide range of al­tern­at­ives available. The lossless format in­teg­rates pixel and vector graphics and is char­ac­ter­ised by a par­tic­u­larly high degree of ad­apt­ab­il­ity and scalab­il­ity. One of the dis­ad­vant­ages is that EPS files are limited to one document page and do not dis­tin­guish between vector and bitmap.

The XML-based vector format  SVG appeared in 1999 and shows images and their elements in text format. Since not all users, es­pe­cially in­di­vidu­als, have access to Adobe Creative Suite, AI files are sometimes un­suit­able for sharing. SVG graphics, on the other hand, are ideal for sending vector graphics, as they don’t require any specific software. In theory, the vector format can be created in a simple text editor, but this isn’t common practice.

The SVG image file format has been around for over 20 years. It is ex­per­i­en­cing a boom due to the in­creas­ing variety of screen sizes and its re­spons­ive design. SVG graphics are rescaled with every screen layout. Ac­cord­ingly, the files are always displayed in maximum sharpness and make it much easier to set up a re­spons­ive design. The World Wide Web Con­sor­ti­um (W3C) also stand­ard­ised the format in 2001 and re­com­mends SVG for dis­play­ing two-di­men­sion­al vector graphics on the web.