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 ad­di­tion­al in­for­ma­tion (e.g. in­fo­graph­ics) or can be thought-provoking. While it’s obvious why images are used, there have been in­con­sis­ten­cies 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 fre­quent­ly as vector graphics, despite being dis­ad­van­taged when it comes to scaling, which is par­tic­u­lar­ly 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 pre­sen­ta­tion of pho­tographs, which plays an important role in modern web design. This means that any photo can be easily scanned and digitized 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 com­pres­sion. Since the standard itself does not contain any pro­vi­sions on how the image should be saved, an ad­di­tion­al format is necessary, with the JPEG File In­ter­change Format (JFIF) es­tab­lished as a cross-browser standard. Al­ter­na­tives that are rarely used are the Still Picture In­ter­change File Format (SPIFF) and the JPEG Network Graphics (JNG) graphic file format.

Com­press­ing JPG format changes the usual structure of pixel graphics by combining 8 x 8 pixels into one block and con­vert­ing them into a single layer. For example, a color con­ver­sion between the RGB color space, YCbCr color model, and a low-pass filter (where high fre­quen­cies are filtered out in order to reduce the file size). Depending on the chosen com­pres­sion level, this process is as­so­ci­at­ed with a certain loss of quality since not all image in­for­ma­tion is retained. According to W3Tech sta­tis­tics, around three-quarters of all websites are based on images in JPG format, which is due mainly to the ef­fi­cien­cy as­so­ci­at­ed with com­pres­sion.

Rec­om­mend­ed ap­pli­ca­tion scenario: storage and pub­li­ca­tion of photos.

PNG (Portable Network Graphics), a uni­ver­sal­ly rec­og­nized graphic file format developed by the World Wide Web Con­sor­tium (W3C), appeared for the first time in 1996. As a patent-free and modern al­ter­na­tive to GIF (Graphic In­ter­change Format), it is char­ac­ter­ized by the pos­si­bil­i­ty of lossless com­pres­sion as well as a maximum color depth of up to 24 bits per pixel (16.7 million colors) – or as many as 32 bits with alpha channel. In contrast to GIF, however, an­i­ma­tions can’t be generated with PNG. The PNG format supports both trans­paren­cy and semi-trans­paren­cy (thanks to the in­te­grat­ed alpha channel), which makes it suitable for all types of images, as well as in­ter­lac­ing, allowing for an ac­cel­er­at­ed build-up of the image file during the loading process. The color and bright­ness cor­rec­tion mech­a­nisms 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 com­pres­sion process, the files are still com­par­a­tive­ly large, which is why the format is less suitable for dis­play­ing pho­tographs than JPG, for example. It also offers the pos­si­bil­i­ty of reducing the color space (to 1 to 32 bits per pixel). Rec­om­mend­ed ap­pli­ca­tion scenario: storing and pub­lish­ing small images and graphics (logos, icons, bar charts, etc.), graphics with trans­paren­cy, loss-free photos.

The online portal, Com­puServe, in­tro­duced the Graphics In­ter­change Format, GIF for short, in 1987 as a color al­ter­na­tive to X BitMap (XBM)’s black and white format. In contrast to other solutions such as PCX or MacPaint, the GIF files needed sig­nif­i­cant­ly less space thanks to the efficient LZW com­pres­sion (data com­pres­sion 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 in­di­vid­ual images in a single file, which is why it is still used to create small an­i­ma­tions.

All color in­for­ma­tion is stored in GIF in a table, the color palette. The table can contain up to 256 colors (8 bit), which is why the image format is not suitable for dis­play­ing pho­tographs. The in­for­ma­tion can also be defined as trans­par­ent – however, unlike the more modern PNG, partial trans­paren­cy is not possible, meaning that a pixel can be either visible or invisible.

Rec­om­mend­ed ap­pli­ca­tion scenario: creating an­i­ma­tions; clip art, logos, es­sen­tial­ly things where a low color depth isn’t prob­lem­at­ic.

TIFF (Tagged Image File Format) is a graphic file format that is es­pe­cial­ly used for trans­mit­ting print data and high-res­o­lu­tion images. It was developed as early on as 1986 by Microsoft in co­op­er­a­tion with Aldus (now belongs to Adobe) and is specially optimized for embedding color sep­a­ra­tion and color profiles (ICC profiles) of scanned images. Fur­ther­more, TIFF supports the CMYK color model and allows a color depth of up to 16 bits for each color channel (the total color depth is 48 bits). Since 1992, the format has been able to be com­pressed loss-free using LZW com­pres­sions, 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 pub­lish­ers and print media work with the image format. The archiving of mono­chrome graphics e.g. technical drawings, counts as one of the most versatile ap­pli­ca­tions. GeoTIFF was es­tab­lished with ad­di­tion­al tags for saving and pre­sent­ing raster-based Geo-in­for­ma­tion (maps, aerial images, etc.)

Rec­om­mend­ed ap­pli­ca­tion scenario: trans­fer­ring high-quality images with high res­o­lu­tion for printing.

When saving graphic projects created with the best-known Photoshop software, the man­u­fac­tur­er Adobe offers its own PSD format (Photoshop Document). This is char­ac­ter­ized by the fact that it secures all in­for­ma­tion about layers, channels, or vectors, which makes sub­se­quent editing possible. For example, layers can be added, du­pli­cat­ed, scaled, moved, removed, and cus­tomized. In a single PSD file, several layers, as well as the re­spec­tive image data can be stored loss-free. The Adobe image file format is es­pe­cial­ly practical when it comes to graphics with a high recog­ni­tion 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 re­stric­tions, although ex­chang­ing files between ap­pli­ca­tions 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 pro­cess­ing procedure. However, for output to the web, the file should be converted to the PNG format or al­ter­na­tive­ly 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. Rec­om­mend­ed ap­pli­ca­tion scenario: caching and editing of fre­quent­ly 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 color depth of up to 24 bits per pixel. The un­com­pressed image format assigns exactly one color 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.

Rec­om­mend­ed ap­pli­ca­tion 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 com­pa­ra­ble pixel graphics. The cor­re­spond­ing formats do not describe which color com­po­nents a pixel has in the re­spec­tive 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, di­men­sions, colors, and other prop­er­ties. In com­bi­na­tion with the afore­men­tioned aspect of loss-free scaling, realizing re­spon­sive 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 en­coun­ter­ing any problems, but the dif­fi­cul­ty increases dis­pro­por­tion­ate­ly with the in­creas­ing com­plex­i­ty of the image file. Another advantage over pixel graphics is the pos­si­bil­i­ty of creating an­i­ma­tions with JavaScript.

In co­op­er­a­tion with software man­u­fac­tur­ers, Aldus and Altsys, Adobe developed and published the vector graphics file format EPS (En­cap­su­lat­ed Post­Script) in 1987. The name of the format is due to the fact that the re­spec­tive files are stored in the page de­scrip­tion language Post­Script, which enables the output of complex pages on laser printers and im­age­set­ters. To this end, Post­Script describes the elements of the print page, such as lines, circles, images, etc., and provides in­for­ma­tion on where they are po­si­tioned. EPS expands this image in­for­ma­tion with precise state­ments about the output size, the so-called Bounding Box. EPS files op­tion­al­ly contain a preview image in low res­o­lu­tion, which can serve as a place­hold­er. The Adobe’s graphic file format describes the in­di­vid­ual objects in­de­pen­dent­ly of the output device later on, which enables the exchange between different output media.

EPS was used es­pe­cial­ly 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 pre­sen­ta­tion of text documents.

Rec­om­mend­ed ap­pli­ca­tion scenario: de­scrip­tion of complex print pages (format no longer current).

While many other vector graphic formats such as the AI (Adobe Il­lus­tra­tor Artwork) format are also un­suit­able for use on the web, the SVG (Scalable Vector Graphics) rec­om­mend­ed by W3C im­pres­sive­ly offers the afore­men­tioned ad­van­tages of vector-based image files. Spec­i­fy­ing the de­scrip­tion of two-di­men­sion­al vector graphics (which are based on the XML language) has been an im­pres­sive al­ter­na­tive to the tra­di­tion­al raster graphics, es­pe­cial­ly with regard to mobile and re­spon­sive websites, since the com­pre­hen­sive HTML5 support of popular browsers. In addition to a loss-free scal­a­bil­i­ty and a very small amount of data, SVG files offer various other ad­van­tages such as the following:

• All pre­sen­ta­tion at­trib­ut­es such as colors, fonts, etc. can be ma­nip­u­lat­ed with CSS.
• Scripts can access content via DOM (Document Object Model).
• SVG graphics are machine-readable.
• Cor­re­spond­ing code is cus­tomiz­able 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, es­pe­cial­ly 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 pre­des­tined for technical graphics. A look into the afore­men­tioned sta­tis­tics 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 in­for­ma­tion as well as guide­lines for how to integrate it. Rec­om­mend­ed ap­pli­ca­tion scenario: technical or in­ter­ac­tive graphics (logos, buttons, icons, etc.).