Optimizing Web Graphics For The Delivery Of Archaeological Content
As use of the World Wide Web becomes more prominent within the archaeological arena, aspects of its design and implementation come to the forefront of any discussion regarding its utility. One issue of increasing concern has been the speed at which web pages and their ancillary files are downloaded - particularly via analog modem. Because graphic images take considerable time to download via modem, many web sites tend to include truncated or shrunken images in an effort to decrease page-loading times. This practice results in web pages that tend to compromise their visual impact as a trade-off for faster downloading times. As a result, the visual content suffers, and the archaeological concepts become more difficult to understand.
While extremely useful, such powerful online database solutions typically require project direction or assistance by a network administrator. For the more common archaeology web sites (those typically developed and maintained by archaeologists with limited time and resources) a more practical approach with limited reliance on external assistance is needed. Most of these sites are considerably more simplistic, usually consisting only of HTML files and related images with the occasional video file. For the production of this kind of material, an understanding of effective web development techniques can assist in the creation of web resources that are effective and also load quickly.
There are a number of tools and techniques that can be used to generate visually rich web resources that are also relatively quick to load. For instance, limiting the use of certain HTML tags and implementing specific descriptors for particular tag attributes can markedly increase the loading time of HTML files. In addition, software has been created to remove the blank characters in HTML documents; this can speed up the loading of such files by 10-15%. But by far, the most significant improvement in download speed can be achieved by limiting the size of graphical materials that appear on a web page. Fortunately, specific software applications can compress the graphic file or reduce the number of colors contained therein and thus reduce the size of the file. Such software tools and web-design techniques can readily improve the download speed of web sites to such a degree that a greater abundance of graphic and visual materials can effectively be employed. For the reasons mentioned above, this becomes a particularly valuable enterprise when developing archaeological content for delivery via the World Wide Web.
Graphic Format Basics
To understand better the underpinnings of web graphic optimization, a basic understanding of computer graphics in general is useful. Graphics for the web come in two formats: raster or vector. GIF, JPEG, and Flash files are currently the most commonly used examples of these two types of computer graphic formats.
Raster graphics (also referred to as bitmap graphics) are made up of a series of pixels. Each pixel requires a set amount of memory. Thus larger images require more memory and possess larger file sizes. This also means that these types of images do not scale very well. As the pixels of the image get stretched and enlarged, jagged edges and distortion result. The raster format is most suitable for images with drop shadows, soft edges, detailed color shifts, and continuous tone images. (Weinman, 1999)
Vector graphics, on the other hand, are not pixel-based. Rather, they are formed by mathematical instruction sets. These mathematical formulae remain the same regardless of the size of the image. As a result, vector images scale quite well, and memory requirements remain the same whether the image is large or small. The vector format is most suitable for illustrations, line art, type or type-formed images, and 'flat-style' artwork. (Weinman, 1999)
Stated more simplistically and in terms of potential archaeological content, raster images are most appropriate for photographic images on the web. Illustrations, plans, type, and flat-style artwork however, are better served by the vector format, or by rasterizing a vector image into a GIF file.
Well-known image editors that generate raster graphics include Photoshop, DeBabelizer, and Paint Shop Pro. Common applications that generate vector graphics include Illustrator, Freehand, and CorelDraw. Fireworks, a graphic application produced by Macromedia, is specifically designed to generate web content and contains both raster and vector image editing tools. More recently, Adobe's newest version of Photoshop has also added support for vector images.
Graphic File Types for the Web
There are three dominant files types for web graphics: GIF, JPEG, and Flash files. These types of files make up the majority of images displayed by WWW browsers such as Internet Explorer or Netscape. Certainly these are the file types that any developer of archaeological content would employ for the display of any graphic material.
GIF Files: The GIF (Graphical Interchange Format) file type is the most common. ("Tips" 2000) The GIF is a very flexible file type, providing opportunities for transparency, interlacing, and limited animations. Transparency in a GIF image allows the background to remain visible within a selected area of the image. Interlacing loads a low-resolution version of the image that improves as the rest of file downloads. Animated GIFs tie a small series of individual images together to create a short animation of the sort frequently found on web pages.
| For all its flexibility, the GIF format does have some drawbacks. For instance, a GIF can only contain 256 colors or less. This makes it better suited for handling graphics with solid colors, but less flexible for continuous tone images. Thus for archaeological content, a GIF image (or a vector image that has been rasterized into a GIF) would be the file-type employed for site plans, topographic maps, ceramic illustrations, and the like. (Figure 3) | bathplan.gif)
Figure 3: Plan of the Roman Bath at Isthmia |
When trying to make GIF files as small as possible for web publication, there are areas for adjustment: dithering and lowering the bit depth. Dithering attempts to simulate a missing color from the 256-color palette by placing other pixels that do exist in the palette in close proximity to one another. There are varying techniques for this, which enjoy varying levels of success. But while dithering can produce a smoother image while using fewer colors, it will sometimes result in larger file sizes.
| One of the most effective ways to reduce
the file size of a GIF
image is to reduce
the number of colors contained in the file
(also
referred to as reducing the bit
depth). By reducing the number of
colors
in the file, for example from 256 (8-bit)
to 64 (6-bit), less
data needs to be stored
for each pixel, so naturally the file is
smaller.
Fortunately, there are several commercial applications that make the task of experimentation with dithering and bit-depth less of a chore. Adobe Photoshop is one of these. (Figure 4) |
4up.jpg)
Figure 4: Save for Web Feature in Adobe Photoshop 6.0 |
By selecting 'Save for Web' from the File menu in Photoshop, a user can select varying settings for color depth and dither, and see the resulting visible changes before saving the file. Such a tool makes it quite easy to consider the trade-offs between image quality and file size.
JPEG Files: Another image file type prevalent on the web is the JPEG or Joint Photographic Experts Group format. The JPEG format was designed specifically for digital photographic content, and is best suited for continuous tone graphics. JPEGs also work well for detailed illustrations, as well as images with gradients, and the JPEG file type is also designed to effectively represent subtle shade changes. ("Tips" 2000) Progressive JPEGs also support interlacing, as with the GIF format.
| For archaeological images, the JPEG format is ideally suited for photographic content. (Figure 5) | bath.jpg)
Figure 5: Photographic Content for the Web - the Roman Bath at Isthmia |
For photographic images such as the one above, the JPEG format is a better choice than GIF. While the image could be saved as a GIF, it would be difficult to match all these colors with a palette of 256 (the limit of the GIF color palette); therefore, the number of colors present would require dithering that would most likely increase the size of the file. Since the above example also contains subtle shade changes, the JPEG format is the appropriate choice. And the quality of the image as a GIF would probably not match that of a JPEG, depending upon the level of JPEG compression.
| A JPEG image can be compressed at various levels. This is the best way of limiting file sizes for this format. Simply adjusting the quality level while saving the file in any graphic program will result in greater savings when greater compression is applied. In other words, the lower the quality of the image, the lower the file size. (Figure 6) | dialogue1.jpg)
Figure 6: Saving JPEG Files |
As seen in the example above, the image with a quality setting of 12 (the highest), has a file size of 72.46k and will take an estimated 12.8 seconds to download via 56k modem. However the image with a quality setting of 6 (medium) has a file size of 19.5k and should download in an estimated 3.44 seconds via 56k modem - a considerable improvement. Of course, this information doesn't take into account the visible quality of the image. A small file size is of little value if the picture quality is too poor. Usually this can only be judged by looking at the images produced. (Figure 7)
Figure 7: JPEGS of Highest, Medium, and Lowest Quality
In the examples above the difference in quality is visible. As the quality level decreases, the clouds become less distinct, considerable detail is lost in the shadows of the building, and the flowers begin to blend together. Usually a quality level between 6 - 8 provides the best compromise between image detail and clarity and limited memory requirements.
Fortunately, the Save for Web feature in Photoshop works for the JPEG format as well as GIF. This provides an easy way to review the visual quality of each setting before saving the JPEG file. Of course this then results in the best compromise between image quality and file size.
Compression: Although the GIF and JPEG formats are quite different and have different uses, one item that all file formats for the web have in common is compression. This compression allows for the small file sizes of GIF and JPEG (as compared to other graphic file types) that allow for faster transmission via the web
There are essentially two types of compression: lossless and lossy. Lossless compression does not remove any data, and thus the image contains the same data whether compressed or decompressed. The GIF file format employs a compression scheme called LZW, which is lossless. JPEG on the other hand employs a lossy compression scheme. With lossy compression, data is removed from the image; thus it is the exact opposite of lossless compression. Therefore, when saving and compressing a JPEG image, data is essentially being thrown away. For this reason, JPEG files should never be compressed more than once, since each time JPEG compression is employed, data will be lost.
Flash Files: Flash is a software application developed by Macromedia that generates vector graphics and animation for the web. It is the only well-supported file type for delivering vector format graphic content over the web.
Vector images are usually smaller than a raster version of the image, and provide a valuable tool for web developers. Flash was created for the delivery of online content, and it is quite a flexible tool. In addition to the development of typical static images, Flash can be used to create complex animations and develop significant interactivity. The software also supports the incorporation of sound into Flash productions. Additionally, since it is a vector format, Flash is resolution-independent - it will scale to the size of any browser, with no loss of quality or functionality.
However, even with all this potential, there remain several drawbacks to thee Flash platform. The biggest concern is Flash's reliance on browser plug-in architecture. Although the newest versions of web browsers include native support for Flash, older browsers require plug-ins. This can be problematic for some potential users. Also, Flash possesses a significant learning curve when compared to typical graphic applications. In part, this is the trade-off for increased functionality; however, it remains a formidable barrier for some developers. This makes it a difficult tool for archaeologists who would probably rather be in the field, lab, or classroom, than sitting in front of the computer.
Conclusions
Archaeological content delivered via the Web requires effective graphic images. These images tend to be large and take a long time to download. Rather than sacrifice the utility of effective graphic content, images can be modified to facilitate faster download speeds. This enables the continued use of valuable visual content in a manner that is effective and timely - a particularly valuable enterprise for archaeological web sites.
Graphics for the web come in two formats: raster and vector. Raster images are pixel-based and thus do not scale very well. Vector images, made of mathematical instructions rather than pixel data, are resolution-independent, and scale quite well.
GIF and JPEG images are examples of raster images. Through compression, both of these file-types can generate smaller images suitable for the web. GIF uses a lossless compression process, while JPEG employs a lossy compression scheme. For GIF images, lossless compression means that all the data remains; however for the JPEG image with lossy compression, data is thrown out forever when compression takes place.
Considering other factors while creating images can also effectively reduce the size of GIF and JPEG files. Limiting the number of colors in a GIF image to less than 256 reduces the amount of data stored in the file. Dithering can also help improve the quality of some images with reduced color palettes. JPEG images can be sized considerably smaller by reducing the quality of the image. This effectively throws out more data, and reduces the size of the file. This data cannot be recovered later however, and JPEG should not be compressed repeatedly or the image will degrade beyond repair.
Flash files are of a vector format designed specifically for online content. As such the files are typically smaller than raster images, and also provide great flexibility, particularly for animations and interactive projects. There are several drawbacks to this format though, including the reliance upon browser plug-in architecture in some cases, and its considerable learning curve.
Clearly, there are several paths to more effective archaeological web site development through more effective image production. By reducing the size of important visual materials, the materials remain useful and effective. Such activity will improve the quality and functionality of web sites delivering archaeological content, which is an valuable endeavor overall and furthers the work of the discipline.
Works Cited
Fee, S. B. & T. E. Gregory (2000). The OSU Excavations at Isthmia Web Site (3rd), [World Wide Web]. Available: https://isthmia.ohio-state.edu/. Date of use: 18 October 2000.
"Getting Really Small: an Ongoing Battle with File Size". (2000, February). Inside Web Design, 1-2.
Kuckelman, Kristin A. (ed.) (2000). The Archaeology of Castle Rock Pueblo: A Thirteenth-Century Village in Southwestern Colorado [HTML Title]. Available: https://www.crowcanyon.org/researchreports/castlerock/text/crpw_contentsvolume.htm. Date of use: 22 October 2000.
Seigal, D. (1997). Creating Killer Web Sites. Indianapolis:Hayden Books.
"Tips to Make Your Page Load Faster". (2000, June/July). Inside Web Design, 1-6.
Weinman, L. (1999). Designing Web Graphics (3rd). Indianapolis: New Riders Publications.
This file was posted on 17 May 2001.
Please send your comments to Michael DiMaio, jr.