Web graphics

In this first article we provide some clues about the use of graphics for the creation of web pages. There’s a lot of additional information about graphics in another sections of the Manual, for example in the Digital illustration, Bitmaps and Vector drawing sections. This section, Web graphics, also deals with a number of specific topics which you’ll see listed on the left side of this page: (graphics programs for web design, animations, optimisation and backgrounds and effects).

Graphics in web pages

The look of present day web pages has little to do with the pages of the first half of the 90s, the initial years of the then new WWW: back then, almost all the pages had a gray background, text written from side to side in a single block and some (few) images. It was not, evidently, the rich visual experience of nowadays. In fact, now many pages are based almost completely on the image. But it’s also true that if we want to contribute some good content to the net, we must resort to the conventional editable text.

The images, like we have commented elsewhere, are files that do not belong to the web page; the current formats of image are linked to the web page by means of a special code tag ((<img src="nombre_imagen" />)) that instructs the browser to display the image.

Image standard formats

The usual format is either GIF or JPG, though there is a standard, PNG that could be used instead of those. If you right-click any image in a web page, you can access the image properties following this option on the pop-up window. The browser will show what kind of file it is, its name, file dimensions and size.

The PNG format (portable network graphic) is a standard recommended by the W3 Consortium, and in fact it has interesting advantages — although this hasn’t helped it being very popular. Some older browsers don’t support it at all or do it with important limitations. In an ideal world, PNG would be the only bitmap graphic format you’d need, capable of sophisticated effects. The problem with standards is that they should be open, not a patented format for which developers or end users must pay royalties for its use, which isn’t the case with GIF. The lack of support or publicity can avoid that certain good solutions prevail; however, the Flash format (SWF, a proprietary Macromedia format) has become a de facto standard for static or dynamic vectorial images, with sound and interactivity... while SVG hasn’t yet taken off as it should. It is no wonder that it has been such a great success, since the flash animations are full of advantages.

Dingbats are an instant source of images, very useful to quickly create any kind of icons and web graphics (this example, extracted from the Zapf Dingbats and Webdings).

GIF graphics

GIF (Graphics Interchange File) files are among the most frequently used graphics in the net. Their main features are:

They download very fast and display quickly in the browser. Its system of data compression does not cause loss of quality.
They can contain one transparent colour, which lets see through some areas of the image. This is very useful to make them look like pasted over a background.
In addition, they can store a sequence of images, creating a basic kind of animation. The GIF animations are ubiquituous, especially in advertising banners. The animation simply displays, frame by frame, a sequence of individual images stored in a single GIF file.
Their system of compression is extremely efficient if the graphic contains big areas of homogenous or flat colour .

The main shortcoming of GIFs is probably the number of colours: 256 at the most. They are a suitable format for images with flat colours, also normally for texts as image, but not for digital photographies. The limitation in the number of available colours means that an image with smooth transitions of colors, and a greater number of colours, must be remade with a pattern of the available colours, and this means a loss of quality of the picture. But everything depends on the type of picture: sometimes a photographic GIF may have an acceptable quality. Then there is the issue of open or proprietary formats. The GIF was a patented, proprietary format and it became a de facto standard, but it wasn’t endorsed by the W3 consortium (whose recommendation is PNG instead.)

Interestingly, a very frequent application of the GIF was as transparent “spacer”. The technique consists of preparing a square GIF of 1 pixel and transparent. This is, absolutely invisible. Then, it is used with any arbitrary dimension to push other page elements and create white spaces. The advantage of this curious approach is that the image needs to be downloaded once only, then it is cached in the browser cache and you can reuse it as many times as you need with no bandwidth penalty. This approach is absolutely unnecessary today and you should avoid it at all costs. It’s a technique from years ago, when designers tried to create pixel-perfect layouts with the limited bullet-proof techniques they had. Now you use CSS to get the positioning of the elements or to place a given object wherever you need it.

Another remain of the first years of the net is the web safe palette. It was recommended then to use colours for GIF images belonging to a set of colours that were safely displayed in any monitor with a 256 colour-graphic card, in both Mac or PC systems. This issue can almost be disregarded today: a vast majority of users have graphic cards capable of displaying thousands or millions of colours.

JPEG. Ideal for photography.

The JPG or JPEG (from Joint Photograph Experts Group) format always works with millions of different colours, and therefore it can perfectly display gradual changes of tone or colour. However, this format works with a system of data compression that causes that some quality is lost, inevitably. The compression degree can be controlled, so you can reach a balance between the quality from the image and its file size. The more an image is compressed, the bigger its quality loss will be. Experimenting with the compression degree, you can find a percentage that yelds the best compromise between quality and modest file size (for quicker download time.) Many graphics programs allow this optimization interactively, showing a simulation of the results with each degree of compression applied to the image.

Other disadvantages of JPG include the lack of transparencies and the constraint to be always a single, static image. So, a “transparent” background in a JPEG will actually appear in the colour you used, it isn’t transparent at all, although you can always try to use a matte colour, that is, a background colour similar to the one where you’re going to include the image. This will let you simulate a transparency somehow.

PNG: an all-purpose web graphics format, underused.

In order to solve some of the limitations of both formats already commented, a new open-source standard was developed, the PNG (Portable Network Graphics). It has been underused for years, partly because the support for some of its benefits has been deficient in the previous versions of the browsers. With today’s browsers there’s no reason to avoid this format. Between his advantages:

It supports all colour modes, from black and white to true color.

The compression system is lossless, even in true colour, and it’s really powerful, creating files smaller than the corresponding GIF. Although the images in full colour are bigger than JPEGs, the quality is perfect, with no artifacts due to data compression.

It admits graduated transparency, which makes possible a perfect fusion with the background.

It’s an extensible format: a developer can include additional information, which simply is ignored in a viewer that does’t support it (in fact, the native format of Macromedia’s Fireworks is the PNG — a bit confusingly, since many of the benefits of the program do not correspond to this graphical format.)

If you want to learn more about these crucial graphics formats for the web, there is an excellent article at Sitepoint that explains further details about all these specifications.