Graphics — Introduction

In the year 1993 the still very young www experienced a revolutionary enhancement with the introduction of the MOSAIC browser by the NCSA. This browser was, in contrast to earlier applications, able to show images embedded in web pages. Equipped with this ability the Mosaic browser and the web experienced fast growing popularity.

Hundreds of graphic's file formats exist, last not least every image editing software has its own very special formats, but only very few are really suitable for the web at all. First of all, for a file format to be suitable for web pages it has to be platform- and browser independent and secondly it should produce acceptable file sizes in order to keep loading times and network utilization as low as possible.

Vector Graphics and Raster Graphics

Two types of graphics can be distinguished, vector graphics and raster graphics. A vector graphic is defined by points, lines and curves. Due to this structure these graphics are infinitely scalable without any loss of quality. This makes these graphics very popular in CAD and printing. Common file formats include EPS and PDF. Vector graphics may also be found on the web. Especially during the late 90's Macromedias® Flash™ format SWF was excessively used to produce animated graphics. Another non-proprietary vector graphics format is SVG, which is advocated by the W3C as an open standard.

In contrast to vector graphics the raster graphics are defined by an array of pixels. Consult the images below to see how tiny colour points are used to construct the whole image. Pixels are resolution-dependand and trying to scale these images leads to considerable loss in quality, especially for magnification. As each tiny pixel has to be defined in a raster graphic another drawback in comparison to vector graphics is their file size. However this is somehow compensated by their immediate rendering where vector graphics first have to be transformed to a raster image before they can be displayed on a monitor.

raster graphic with highlighted section

zoom of highlighted section

The most common and best supported graphic's file formats for the web are JPG, GIF, and PNG (read: ping). The following pages will introduce you to these formats and compare both their advantages and disadvantages.