- Image
Images take a large percentage of file size in web pages. It is a goal to maximize the quality of the presentation while minimizing file size. If the image size is smaller but the graphics imagery remains the same, a large amount of data transfer through the Internet is reduced. Information about images and using the right display will help to increase users' control and reduce users' frustration.
- Reduce file size
- Reduce color palette; reduce color depth
- Adjust graphics resolution
- High-quality images intended for downloading. These images should be displayed on the page at lower resolution or as a thumbnail.
- An audience having advanced graphic hardware is expected.
- Images that need the extra resolution or color depth to even be useful; such as maps.
- Resize image in a graphics program
- Achieve maximum compression
GIF and JPEG file format
Graphics Interchange Format (GIF) is a platform-independent intermediate raster format limited to 8 bits of color depth (256 colors). GIF graphics can be compressed using Lempel-ZivWelch (LZW) loss-less compression. GIF files can also be interlaced. Generally the gif images most often found on the Internet achieve somewhere around 4:1 compression [3,12].
Graphics in the Joint Picture Experts Group (JPEG) format are capable of much greater color depth than GIF. This comes with slower download time for larger file sizes. Files in JPEG format can contain up to 24 bits of color information (16.7 million colors). Files in JPEG format are compressed automatically and then decompressed when they are brought onto a web page. The compression is variable - the greater the compression, the greater the level of degradation in the final image. JPEG compression will usually start showing noticeable degradation at compression ratios greater than 4:1, but true color photographic images will sometimes tolerate JPEG compression as tight as 10:1 without losing too much fidelity. The designer can control the JPEG compression ratio in many graphics programs, including Paint Shop Pro [3,12].
Given the choice between two formats for web graphics, Designers are often left wondering when to use one or the other. Here are review guidelines:
-
Use GIF file format for transparency or
animation, since it is the only format that supports them. Beyond that, GIF
file format should be considered for the following types of images:
- Black-and-white line art and text
- Images with a limited number of distinct colors
- Graphics with sharp or distinct edges (most menus, buttons, and graphs fit this category)
- Graphics that are overlaid with text
- Scanned photographs and ray-traced renderings
- Images that contain a complex mixture of colors
- Any image that requires a palette of more than 256 colors
JPEG file format is better suited for the following situations:Up and coming: PNG file format
The World Wide Web Consortium (W3C) has defined the Portable Network Graphics (PNG) format as a network standard. PNG is described as "an extensible file format for the loss-less, portable, well-compressed storage of raster (bitmapped) images. PNG provides a patent-free replacement for the GIF format and can also replace many common uses of the older TIFF format. Indexed-color, grayscale, and true color images are supported. PNG is designed to work well in online viewing applications, such as the World Wide Web, and so it is fully streamable with a progressive display option." Look for PNG graphics to become more prevalent on the web as this new standard is adopted. It is already supported by Internet Explorer 4.0 and Netscape Communicator 4.0 [12].
- Display
- Interlace or cut into pieces
- Index for the image - thumbnail, miniature
- Information for the image
- HTML Extensions for Speedy Display
Each image in a web page requires a separate network connection and takes time to load over a network. Therefore, each image adds to the total time it takes to view a page. Web designers should try to reduce the number of images on a page, and keep images small, both in file size and in actual dimensions.
Color depth is the number of bits of information used to describe each pixel. Developing and viewing web pages with a 16- or 24-bit color video display reproduces graphics imagery at its best. However, 16- or 24- bit display capability will make the image file large and is still not the normal configuration with most users. The 8-bit, 256-color video display is more prevalent and is the usual standard display configuration for most users. Images may use a color palette with fewer colors such as 8-bit 256 colors to reduce color depth and thus reduce the image file size [7,9].
To overcome this 256-color limitation, a technique called dithering is often used. Dithering is nearly nonexistent with continuous-tone photography but original colors are reproduced well within expectations. This is like half-toning in traditional publications. Dithering approximates intermediate colors (colors not on the palette) with a pattern of dots that, when viewed from afar, blend together in glorious shades. This process can make images look better in some cases, but designers should usually avoid it for web page graphics. It substantially increases the information complexity of an image, and that almost always results in much larger file sizes and slower downloads.
The vertical and horizontal resolutions are the height and width of the image, measured in pixels. Image resolution is another important issue that affects image file size dramatically. It also alters the visual appearance of web pages. There is a trade off between image file size and visual appearance. Therefore, how to minimize image file size but maximize the visual appearance is important for web designers [7].
Situations in which graphics at higher resolutions and bit depths are suggested include:
When designing images in web pages, always resize an image by cropping the image tightly in a graphics program, keeping the aspect ratio the same. To squeeze the absolute best out of images when reducing the size, resample to exactly one-half, one-quarter, or one-eighth the original size if possible. To crop the image tightly is to get rid of any unnecessary part of the image [6].
Using the WIDTH and HEIGHT attributes of the <IMG> tag in HTML language to resize the image means relying on the browser to do the resizing. Resizing with the browser will not save download time because the original image file still has to be downloaded [3].
How much an image can be compressed depends on the image. Using the right image file format will help to reduce the image size. GIF and JPEG are currently the two principal web formats, but PNG is a new format that shows a great deal of promise.
Data compression is not limited to image files only. All information available on the web page should always be compressed. Some file formats can be compressed by using lossy methods. For example, a useful property of JPEG is that the degree of lossiness can be varied by adjusting compression parameters. This means that the image maker can trade off file size against output image quality. JPEG handles only still images, but there is a related standard called Moving Picture Expert Group (MPEG) for motion pictures which applies similar compression concepts [4].
Besides trying to compress files, it is also important to provide the information on the use of the compression tool on the web page so users will understand how to unpack the compressed file after retrieving it from the page.
The most popular way to get an illusion of speed is to use a special kind of GIF file called an interlaced GIF. In a non-interlaced image file, the top line of pixels is stored first, and then the next line down is stored, and then the next line after that, and so on. In an interlaced file, only every other line is saved and then the missing lines are filled in at the end of the file. Most web browsers will display interlaced gifs as they are being read, so a rough draft of the image appears quickly. The details are filled in as the download finishes [9]. Figure 1 shows the display at the beginning of image transfer and Figure 2 shows the end of the image transfer. Even thought the result is the same, users will have a better feeling about the image coming in during the transfer and thus will feel less anxious.
 Figure 1. Transfer begin: Interlace/Non-interlace |
 Figure 2. Transfer done |
The JPEG format has its own corollary to interlaced gif, called progressive JPEG. The mathematics is a bit more complex than interlacing, but the effect is essentially the same: a blurry version of the picture appears first and is replaced by a more precise rendition as the image finishes downloading. The progressive JPEG standard is quite new and is only supported by the latest versions of Netscape Navigator and Microsoft Internet Explorer. As newer browsers become more commonplace, progressive JPEGs will undoubtedly become quite popular.
Cutting a large image into pieces uses a similar idea. It cuts a large image into small pieces so users will have a rough idea about the image while transferring the image through the network [11].
Interlacing or cutting a large image into pieces will not reduce the data transfer time. It does help to reduce users' frustration because users can understand the progress of data transfer and feel that they are in control rather than just waiting.
When talking about distributing graphics over the Internet, the smaller image that still communicates the message, the better. But what about images used for clarification, reference, or additional information? In many cases images are used as supplemental material to help convey information better or clearer. In this case, it may be best to use thumbnail representations of the images so that the users can choose to click on them to invoke larger external images [3,7].
A thumbnail image is a small graphic, usually around 100 pixels tall or wide. The graphic actually serves as a link to a larger version of the graphic [10]. If the user chooses to click on it, a larger version of the image is presented to the user. In this way, the user has a choice of viewing the larger image or not rather than being forced to.
The use of thumbnails where a user is connecting via telephone lines is vitally important. Focusing on the perspective and needs of the users will make them much more responsive to the web pages and interested in the rest of the site.
Besides using thumbnails, more information may be provided so users will have better control when browsing the web pages. Information may include the file size, format or the importance level of the file. Any information that will help users to decide whether to transfer the file should be provided. Take an image file as an example, Image size and estimated download time may be provided. Users will have a rough indication of the impending time required for downloading and may then decide to download the image file, or not.
Designers may use the ALT attribute of the <IMG> tag to automatically substitute appropriate text strings for the graphics in text-only browsers. Use either a descriptive label to substitute for the default [image] that appears in the place of each inline image. Web designers may use this method to provide information about the image to users.
Another way for graphics to appear faster than they really are is to use the LOWSRC attribute, which is an HTML extension to the <IMG> tag. This attribute is currently only supported by Netscape Navigator, but other browsers will just ignore unsupported tags. The LOWSRC attribute specifies an image to be loaded and displayed before the image specified in the SRC attribute. The idea is to load a quick two-color gif or lossy JPEG image first, and then immediately replace it with a more colorful or detailed version of the same image. Basically, LOWSRC enables the simulation effect of an interlaced gif or progressive JPEG by using two separate images.
- Storage
- Web pages with multiple versions
- Cache and Proxy
- Prefetch or from Local
- Reuse
Most large web sites today offer two versions of web pages: full version and text only. Full version includes all images, text, ... etc. Text only, as the name suggests, supplies text only for fast download. It is always a good practice to provide a textual link equivalent for any graphic which functions as a link, such as a button, just in case image loading is turned off.
Besides these two versions, another concept suggested is to have more than two versions of a page since there are different speeds of network connections. Multiple versions of web pages can be done either on the server or the client side. On the server side, web designers may offer users different levels of web pages detail from which to choose. On the client side, browsers may have the capability of being configured to retrieve the level of detail as specified. In either case, users will have the control to decide what to download and what not to download.
For web designers, designing web pages with multiple versions is similar to designing web pages with multiple languages - users are be able to select the language that they are familiar with. Using this concept designers may have multiple web pages for different bandwidth network connections.
For example, Netscape has the Auto Load Images option in the Options menu. Toggle it on to let inline graphics load; toggle it off to see text-only pages. When the inline image option is off, the pictures embedded in the page are replaced with small icons. Users may have the inline image option shut off when at home for low bandwidth connections but have it on when at an office with high bandwidth connections.
Cache and proxy are common methods used to deal with low bandwidth network connections. These two methods help when the web pages are visited recently or often. Web browsers will check local memory before downloading information directly from the source. If the information required exists in local memory, it just loads the information from local memory rather than from the remote source. A proxy server acts like a network cache. The web browser will check if the proxy server has the required information before retrieving information directly from the source web server.
Both Netscape and Internet Explorer provide cache and proxy functions as described above. Users control these functions by configuring options.
Prefetching information that may be required in the near future is a good strategy to deal with low bandwidth network connections. This can be done in two ways. The first one is "off-line"; Users may use some software such as Teleport to download web pages for later reading. The user may configure the software to decide what type or what size of files as well as to what depth the links should be downloaded. The other way is "on-line" prefetching. This system tries to "predict" a user's behavior according to the experience and relation among the web pages. Correctly predicting user's behavior and then prefetching the information will not reduce data transfer through the network but will reduce a user's waiting time since the information is available in advance [1].
Another possible strategy is useful if the web server can take advantage of the information that the client browser has already has. Thus, the web server needs only to clue the client to load information directly from its memory. Some companies may send the information to the users in advance. This will minimize the data transfer through the network. American Online's distributing free a CDROM containing graphics and software for users of its service is a good example.
There are a lot of small icons existing on web pages. Web designers should try to reuse these for two main reasons. First, reuse will reduce the data transfer through the network. Reusing images means the user's browser has to download it only once. Once it has the image in memory, it can simply draw it multiple times without having to make lots of connections back to the server. This is very helpful especially for users with low bandwidth connections. Second, reuse will also help designers have a consistent interface. To reuse an image, web designers don't have to do anything special; just make sure to refer to each image by the same URL each time the image is used. The browser will take care of the rest [2,6].
- Assistance
This section describes some methods used to help users to locate information more quickly. This will shorten search time and thus, reduce the unnecessary data transfer through the network. The issues here are important for all network connections, especially for low bandwidth network connections.
- Index
- Search engine
- Personalized configuration
- Collect favorite parts of Yahoo! all in one place.
- Track stocks and favorite sports teams.
- Check new emails or friends online.
- Pick the news users want to see..., etc.
The index builder application uses a list of common words to figure out which words to exclude from the index, searches through the list of documents specified, and finally, builds an index containing the relevant associations between the remaining words within all the specified documents. As most indexers build a full-text index based on the documents, the index is often larger than the original files. For example, if the web site has 15 MegaBytes of data in 125 documents, the indexer would create an index slightly larger than 15 MegaBytes.
Another type of word list indexers use is a synonym list. Synonym lists make it easier for users to find what they need on the web site without knowing the exact word to use in the search. Each line of a synonym file contains words that can be used interchangeably. A search for any word in the list will be matched to other words in the same line. Instead of getting no results from the search, the user will get a list of results that match related words. Before creating a synonym list, the words to be used in the list should be considered carefully. The indexer program uses synonym lists to create an index. Whenever the synonym list is changed, it is necessary to re-index the web site.
A search engine is an application specifically designed and optimized for searching databases. Usually search engines are part of a larger application, such as a database management system. The databases may contain any type of file, including text, sound, graphics, and even video. The search engine works like a database retrieval system that searches indexed databases. Search engines can race through megabytes of information in nanoseconds. By using a search engine, users can save a large amount of time finding the needed information. Therefore, it can reduce a lot of data transfer through the network [13].
Web sites that users often visit should consider this function. The web server may store users' preferences either on the server side or on the client side by techniques such as using cookies [5,13]. By having this function, users can always store the type of information/display that they need most and therefore, reduce the unnecessary search time and data transfer through the network. For example, Yahoo! [13] has a personalized configuration that allows users to:
- Binary execution
Web pages today often have binary executables. They help to speed performance for the web pages. The binary executable is either running at client side such as Java or at the server side using the Common Gateway Interface (CGI). When designing web pages, designers should consider the results produced by the binary executable to decide which type should be used. For small results, server side binary execution is preferred. For large results, client side binary execution is better since transferring the binary executable is much less than transferring the whole result. Web designers should understand the characteristics of different binary executables and actual needs to make a wise decision.