Graphical File Formats and Web Cartography

Hrvoje Lukatela - Geodyssey Limited


Let us assume we need a map to include in the web-based presentation of the first circumnavigation. The oceans are focus of our interest.

We start by using Geodyssey's Galileo program to create the World Map. Since the bitmap - even in palette-based (see below), one-byte-per-pixel format would be close to 250 K we save the bitmap in a compressed png graphics file. File size is important: this file must be transferred from the server (computer on which our web-page resides) to the client (viewer's computer) so that the browser can display it as a part of the page. The larger the file, the longer will this transfer take.

The size of this file (xcgm1.png) is only 16 K. But since the map consists only of web-safe colors, we can reduce the size further by making it a "palette-based" png. (Galileo "SaveBitmap..." command, 'w' modifier).

The file (xcgm2.png) size is indeed smaller - 11 K, and additionally, the browsers need not do any extra work on low-color display. The compression ratio of the order of 20:1 (250 K for palette based uncompressed bitmap vs. 11 K for similar png file) is indicative of the high levels of compression possible for vector and "flat-color" area-fill maps.

However, since the oceans are our focus of interest, it would help if we could accentuate the blue area fill with just a touch of texture. We could, for instance, add the hypsographic scale display of the ocean-bottom TIN structure.

Unfortunately, png compression does not handle continuously changing color areas very well. The file (xcgm3.png) size has ballooned to 121 K - too large for the web use.

Perhaps we should consider jpg file format? It is supposed to be the right solution for the images with continuously changing color.

File (xcgm1.jpg) size has improved considerably: it is only 28 K. But why does the image appear just a little bit fuzzy? Let's zoom in...:

Jpg compression is not well suited for images with lines and sharp edges. The image quality was much better in the large png file. Let's compare the two (jpg above, png below):

Are we then forced to choose between the large (121 K) png file size with good image quality and small jpg size (30 K) with low image quality? Not necessarily. Instead of a single image file, we can produce two image files. First, the jpg file consisting only of the hypsographic scale ocean depths:

The jpg file (xcgm4.jpg) size is 12 K - less than half of what it was for the jpg which included all those lines and edges.

The second image is a png with lines and single-color area fill, transparent where the oceans are:

The png file (xcgm4.png) size is again about 11 K. (The transparency specification increased the png file size by a very small amount).

All we have to do now is to convince the browser to display a partially transparent png as an overlay on the background consisting of a jpeg image. (How is that done? Check the HTML source of this web page). Here they are:

Combined size of both final (jpg and png) files is only 23 K (12 + 11) - less than the low image quality jpg file with the combined content (28 K) and only about one-fifth of the high image quality png file (121 K). We have thus both retained the full quality of the map image produced by Galileo and we have reduced the volume, not only in comparison with a single-image png file but even in comparison with a single-image jpeg file map.

All illustrations were created using Galileo: Geodyssey's free geographical workbench program.