the complete webmaster
messages tutorials reviews reference
ASP
CGI
FrontPage
HTML
Java
JavaScript

[Aaddzz Advertisement]

home / articles / java

A General Introduction of Using Graphics and Images on the Web

Introduction

Multi-media audio and video files usually take most of the storage spaces at your website. Transmitting these huge files plays a major role of the your web server performance. Let us focus on the graphics and images in this article and get a better understanding of some terminologies, how important these files are to the server, and what time Java should come into play to have an impact on your system. Being able to properly manage files of graphics and images at your site can greatly reduce your server load and therefore speed up the transmission, especially making your site more user friendly for those people connecting the Internet through their modems at home. This is the major purpose of this article.

I will start by clarifying what people usually mean by graphics and images. Then go on to explain how colors are produced and used on the web as well as what dimensions and formats are used to store those image and graphics files. Some tips that can be used to speed up the transmission at your site are given following the introductions. I also do a brief comparison on those approaches mentioned here using categories in user interaction, flexibility, storage space, etc. Hopefully, this will help you somewhat improve your site in terms of optimizing images and graphics.

Graphics and Images

Although these two terms are usually used to refer to almost the same thing by lots of people on the web, there are subtle differences in a more technical sense. Graphics is generally used to describe drawings that are produced by primitive geometric objects, e.g. points, lines, circles, etc. Designers should have full control of the graphics by re-arranging these geometric objects with different sizes and colors. For those gurus in computer graphics, they use mathematical equations to represent and generate complex graphics even with simulated lighting conditions. The following figure on the left is a typical example of graphics. Images are usually real-world photos and simply described by the visual combination of color dots which are called pixels. Through the perception of colors and spatial relationship among pixels, human eyes are able to recognize the pattern and interpret what objects are in the images. Figure on the right illustrates such an example. While saved in pixels without equations describing geometric features, graphics are thus images. On the other hand, images need to be completely analyzed to find out their orginal graphic / geometric structures. This is usually regarded as computer vision in the academic world.

Graphics
Image

Color, Dimension, and File Format

Images we often see on the web mix red, green, and blue channels to produce a color. Each channel is 8-bit encoded, i.e. 256 maximum. Therefore, a full-color image in this sense has 256 x 256 x 256 (i.e. 16 million!) distinct colors, while a reduced-color image typically has fewer than 256 colors. For most human eyes, more than 256 colors in images and graphics are hardly distinguishable. Reducing number of colors has a direct impact of making file size smaller. The following figures are some of the examples.

Full-color
256 colors
16 colors

Dimensions of an image are the metrics of width (left to right) and height (top to bottom) in pixels. Two of the most popular image formats with compression are JPG and GIF. Only GIF 89a format supports built-in multiple images that can be recognized by your web browsers while JPG offers better compression ratio most of the time. However, JPG is a lossy approach that will have a slight influence on the image details.

Tips

Now I am categorizing tips of using images and graphics as follows:
  • Color consideration: Usually, you probably need only images with number of colors fewer than 256. Try to use some tools to see if images are acceptable after number of colors are further reduced. Fewer number of colors means smaller file size, i.e. file transmission will be faster.
  • Nature of pictures: If those pictures to be presented are programmable by supplying parameters and have a long sequence, you probably can go with Java. For example, a smooth rotation of a picture only requires the angle to be changed. Using image processing approach, the only storage spaces are the small Java byte code and one orignal image no matter how many rotations you need. Instead, if you use a precomputed sequence, say 50 frames, you will end up with a much bigger storage requirement which will become the transmission bottleneck of your web server. This scenario happens when you use animated GIFs or Java image sequence players similar to Animator, which comes with standard JDK.
  • Usage of real dimensions: Lots of people like to use thumbnailed images using HTML tags. Although images may look smaller, transmission time does not change at all. Moreover, more burden is put on your web browser to scale down those thumbnails. Therefore, you might want to actually create new thumbnailed images with really reduced image dimensions.
  • Format selection: If you need to use animations, GIF is your selection. If you need to have a better compression ratio (i.e. smaller files), use JPG instead. Of course, if the features of graphics are known, you may create your own format storing them and display with your own program.
  • User interaction: If you allow users to interact with your images, HTML offers you the ability of clickable images / maps. Other than that, you will need to resort to langauges like Java to have direct control of users' keyboard or mouse inputs. This will require more efforts on the programming part. However, these programs are reusable and generally they are flexible and scalable when you have more images.
  • Multiple images: When sequences of images are required (e.g. banners), you can use animated GIFs if there is no user interaction and all individual frames are available. If users are allowed to interact with those images (e.g. selection, stop), Java can be used to play the image sequences with programmed control. In this case, images should be saved in a single image strip to reduce the server hits. An image strip example of a rotation sequence is illustrated in the following figure.

    • An image strip

    Summary

    This article is intended to give you a general introduction how you should manage the use of graphics and image files. In the case you probably need to use Java for animation, there is a tiny free program available called Animator in the standard JDK release that simply plays the precomputed sequence although I do not recommend its usage. For another Java animation case using image processing, please check out my previous article. In a series of future articles coming up next, I will walk through the codes of most common applets on the web, including scrollers, clocks, banners, mailers, etc. I assume those are what most people have a greater interest in, either for Java beginners or simply users.

    NEXT: Scrollers

    Author: Chunyen Liu
    Date: 10/31/98

    More articles about Java
    More articles by Chunyen Liu
    Author Biography

    [Aaddzz Advertisement]
    write for us about us advertise

    Copyright 1997, 1998 A Big Lime. All rights reserved.