Graphic file formats

Images have been an import component of websites since the internet began. Whether it’s a photo or a graphic, visual elements are used to attract visitors’ attention. In many cases, images provide users with clear added value and improve the web project by backing up the text content. They also offer additional information (e.g. infographics) or can be thought-provoking. While it’s obvious why images are used, there have been inconsistencies as to which image file format should be used. The abundance of options can make it difficult for website managers to find the right format, which is even more important when it comes to mobile devices.

Raster graphics are used much more frequently as vector graphics, despite being disadvantaged when it comes to scaling, which is particularly due to the fact that they can be generated quickly and are suitable for almost all scenarios. Therefore, graphic website elements can also be saved in pixel formats such as PNG format or JPG format like complex graphics. However, the greatest strength of the pixel display is clearly the presentation of photographs, which plays an important role in modern web design. This means that any photo can be easily scanned and digitised as a pixel graphic – and edited if need be. In addition to the graphic file formats already mentioned, there are a number of other free and fee-based formats, although only a few of them are in general use.

The format known as JPG or JPEG is actually a 1992 published standard (ISO/IEC 10918-1), which describes different methods for image compression. Since the standard itself does not contain any provisions on how the image should be saved, an additional format is necessary, with the JPEG File Interchange Format (JFIF) established as a cross-browser standard. Alternatives that are rarely used are the Still Picture Interchange File Format (SPIFF) and the JPEG Network Graphics (JNG) graphic file format.

Compressing JPG format changes the usual structure of pixel graphics by combining 8 x 8 pixels into one block and converting them into a single layer. For example, a colour conversion between the RGB color space, YCbCr color model, and a low-pass filter (where high frequencies are filtered out in order to reduce the file size). Depending on the chosen compression level, this process is associated with a certain loss of quality since not all image information is retained. According to W3Tech statistics, around three-quarters of all websites are based on images in JPG format, which is due mainly to the efficiency associated with compression.

Recommended application scenario: storage and publication of photos.

PNG (Portable Network Graphics), a universally recognised graphic file format developed by the World Wide Web Consortium (W3C), appeared for the first time in 1996. As a patent-free and modern alternative to GIF (Graphic Interchange Format), it is characterised by the possibility of lossless compression as well as a maximum colour depth of up to 24 bits per pixel (16.7 million colours) – or as many as 32 bits with alpha channel. In contrast to GIF, however, animations can’t be generated with PNG. The PNG format supports both transparency and semi-transparency (thanks to the integrated alpha channel), which makes it suitable for all types of images, as well as interlacing, allowing for an accelerated build-up of the image file during the loading process. The colour and brightness correction mechanisms ensure that PNG image files look the same on different systems. In order to compress a graphic in PNG format, you can use tools such as the pngcrush. Due to the loss-free compression process, the files are still comparatively large, which is why the format is less suitable for displaying photographs than JPG, for example. It also offers the possibility of reducing the colour space (to 1 to 32 bits per pixel). Recommended application scenario: storing and publishing small images and graphics (logos, icons, bar charts, etc.), graphics with transparency, loss-free photos.

The online portal, CompuServe, introduced the Graphics Interchange Format, GIF for short, in 1987 as a colour alternative to X BitMap (XBM)’s black and white format. In contrast to other solutions such as PCX or MacPaint, the GIF files needed significantly less space thanks to the efficient LZW compression (data compression with the Lempel-Ziv-Welch algorithm), which made the format very popular when the internet first took shape. As a format for photos and graphics, JPG and PNG are now clearly ahead but since version GIF89a (1989), the format has been able to combine several individual images in a single file, which is why it is still used to create small animations.

All colour information is stored in GIF in a table, the colour palette. The table can contain up to 256 colours (8 bit), which is why the image format is not suitable for displaying photographs. The information can also be defined as transparent – however, unlike the more modern PNG, partial transparency is not possible, meaning that a pixel can be either visible or invisible.

Recommended application scenario: creating animations; clip art, logos, essentially things where a low colour depth isn’t problematic.

TIFF (Tagged Image File Format) is a graphic file format that is especially used for transmitting print data and high-resolution images. It was developed as early on as 1986 by Microsoft in cooperation with Aldus (now belongs to Adobe) and is specially optimised for embedding colour separation and colour profiles (ICC profiles) of scanned images. Furthermore, TIFF supports the CMYK colour model and allows a color depth of up to 16 bits for each colour channel (the total color depth is 48 bits). Since 1992, the format has been able to be compressed loss-free using LZW compressions, which is also used in GIF format.

Thanks to these features, TIFF has become the standard for images where quality plays a more important role than file size. This is how publishers and print media work with the image format. The archiving of monochrome graphics e.g. technical drawings, counts as one of the most versatile applications. GeoTIFF was established with additional tags for saving and presenting raster-based Geo-information (maps, aerial images, etc.)

Recommended application scenario: transferring high-quality images with high resolution for printing.

When saving graphic projects created with the best-known Photoshop software, the manufacturer Adobe offers its own PSD format (Photoshop Document). This is characterised by the fact that it secures all information about layers, channels, or vectors, which makes subsequent editing possible. For example, layers can be added, duplicated, scaled, moved, removed, and customised. In a single PSD file, several layers, as well as the respective image data can be stored loss-free. The Adobe image file format is especially practical when it comes to graphics with a high recognition value such as logos, banners, etc., which are to be adapted quickly across different platforms and display sizes. By default, images in PSD format can only be opened with Adobe Photoshop without restrictions, although exchanging files between applications on different operating systems (such as Windows or macOS) works without problems. The graphic file format can, therefore, be described as system-wide, in a sense. PSD primarily acts as a storage format during the processing procedure. However, for output to the web, the file should be converted to the PNG format or alternatively to JPG before being uploaded to the server, since the loss-free saving of the image data and all the layers enable effective post editing, but also bring a large amount of data along with it. In order to convert a PSD graphic, you can use a simple web tool like Zamzar. Recommended application scenario: caching and editing of frequently used graphics, design templates.

BMP (Windows Bitmap) was developed for Microsoft and IBM operating systems and was first released in 1990 with Windows 3.0 as a memory format for pixel graphics with a colour depth of up to 24 bits per pixel. The uncompressed image format assigns exactly one colour value to each pixel, which is why BMP files are very large by default. For this reason, the format is not suitable for use on the web.

Recommended application scenario: saving photos/graphics for offline use.

Vector graphics are very suitable for use on the web because they often require much less space than comparable pixel graphics. The corresponding formats do not describe which colour components a pixel has in the respective image, but rather the objects that make up the image – round and angled surfaces, text, straight and curved lines, etc. as well as their position, dimensions, colours, and other properties. In combination with the aforementioned aspect of loss-free scaling, realising responsive and barrier-free web elements becomes child’s play. In addition, you can make changes to files in vector graphics at any time and without encountering any problems, but the difficulty increases disproportionately with the increasing complexity of the image file. Another advantage over pixel graphics is the possibility of creating animations with JavaScript.

In cooperation with software manufacturers, Aldus and Altsys, Adobe developed and published the vector graphics file format EPS (Encapsulated PostScript) in 1987. The name of the format is due to the fact that the respective files are stored in the page description language PostScript, which enables the output of complex pages on laser printers and imagesetters. To this end, PostScript describes the elements of the print page, such as lines, circles, images, etc., and provides information on where they are positioned. EPS expands this image information with precise statements about the output size, the so-called Bounding Box. EPS files optionally contain a preview image in low resolution, which can serve as a placeholder. The Adobe’s graphic file format describes the individual objects independently of the output device later on, which enables the exchange between different output media.

EPS was used especially in the print sector but it has now also been replaced by the well-known successor format PDF (Portable Document Format), which is also suitable for sending e-mails because of the much smaller file size. However, neither the old-fashioned EPS nor the modern PDF are suitable as image formats for web projects. They are much better suited to the exchange or presentation of text documents.

Recommended application scenario: description of complex print pages (format no longer current).

While many other vector graphic formats such as the AI (Adobe Illustrator Artwork) format are also unsuitable for use on the web, the SVG (Scalable Vector Graphics) recommended by W3C impressively offers the aforementioned advantages of vector-based image files. Specifying the description of two-dimensional vector graphics (which are based on the XML language) has been an impressive alternative to the traditional raster graphics, especially with regard to mobile and responsive websites, since the comprehensive HTML5 support of popular browsers. In addition to a loss-free scalability and a very small amount of data, SVG files offer various other advantages such as the following:

• All presentation attributes such as colours, fonts, etc. can be manipulated with CSS.
• Scripts can access content via DOM (Document Object Model).
• SVG graphics are machine-readable.
• Corresponding code is customisable as a separate file or directly in the HTML document.
• Can be animated in various ways (SMIL, JavaScript, CSS).

The SVG format is an excellent choice, especially for graphics that contain symbols (e.g. logos) or those that react to the input of website visitors (dynamic diagrams). The modern vector image format is also virtually predestined for technical graphics. A look into the aforementioned statistics of W3Techs shows, however, that SVG is not yet used in most web projects (in contrast to the raster graphics). In the following guide, you will find detailed information as well as guidelines for how to integrate it. Recommended application scenario: technical or interactive graphics (logos, buttons, icons, etc.).