Interactive Scaling Control Mechanism for World Wide Web Systems

Takao Shimada*, Naoko Iwami**, Takewo Tomokane***
Systems Development Laboratory, Hitachi, Ltd.
* t-shima@sdl.hitachi.co.jp, ** iwami@sdl.hitachi.co.jp, *** tomokane@sdl.hitachi.co.jp

Mitsuo Hayashi
Information Systems Division, Hitachi, Ltd.

Yasuyuki Kuwahara
Software Development Center, Hitachi, Ltd.

Abstract

WWW latency can be reduced by scaling down large-sized objects such as images and video. Thus, WWW object scaling systems need to provide a useful user interface in order to take advantage of the latency reduction. This paper proposes VSCM (Virtual URL-based Scaling Control Mechanism) to provide a user interface for flexible scaling control. VSCM controls scaling of WWW objects at proxy servers. The user interface based on VSCM enables a user to choose the desired quality and size of the objects interactively. VSCM works with any server and any browser using standard HTTP and HTML. Furthermore, VSCM is applicable not only to object scaling, but to any object transformation with flexible navigation of the WWW.

Keywords: proxy-browser interaction, media scaling, user interface, extended URL, object transformation, multiple representation

1. Introduction

WWW pages contain many image objects. One investigation by crawler robots reports that more than 50% of pages contain at least one embedded image [8]. Although image objects are useful for visual data communication, and media-rich contents are fun for users, the transfer time for such objects from the server to the browser is longer. This may lead to the user being dissatisfied by the long response time even if he is not in a hurry.

On the other hand, some objects, such as images and video, can be reduced with a downgrade in quality, by media scaling[3]. For instance, image objects can be scaled down in resolution in order to reduce their size. The scaled down objects are useful for preview functions. There are other examples of scaling down for previewing: to make audio data lower sampling rate, to cut video frames, to obtain abstracts of long documents, and so on[1][3]. These scaled down "preview" objects are useful for quick searches of information. Applying media scaling to WWW, a user can control the size and quality of objects to be received from servers in order to navigate WWW more flexibly.

Some WWW media scaling systems have been proposed[1][2]. However, their usability has not been sufficiently considered. Since media scaling may exclude the important information, a user should select his desired quality of the object to receive. Moreover a user may be confused by multiple representation of the objecs. This paper proposes a scaling control mechanism that provides useful and careful interactive user interfaces in order to make the most of media scaling effects. Our goal is not only to reduce WWW latency, but also to provide user oriented flexible navigation of WWW.

2. Media Scaling proxy Server

2.1 System Model

The proxy server that scales down objects sent from servers is called Media Scaling Server (MSS). MSS may be located either at a WWW server site or at an intermediary site. The WWW server site is the best position for MSS, because the transfer time is reduced most efficiently. However, it is not practical to make all WWW sites all over the world install MSS at their hosts. Therefore, this paper focuses primarily on the general use of MSS at intermediary sites. A typical example is the telephone access points of a service provider (Figure 1). MSS can scale down the objects before transferring them to the browsers via telephone lines.

Figure 1. A system model of Media Scaling Server.

2.2 Existing Systems

Let us review some traditional research. Pythia[1] is an HTTP proxy server that scales down the JPEG, GIF, and Postscript objects at Internet telephone access points. Pythia significantly reduces WWW transfer time by downgrading the objects on demand. However, Pythia has the following limitation in usability:

• Pythia scales down the inline images of pages, and provides anchors linked to the originals automatically. Although there are many objects that are not embedded in the pages but accessible by anchors, no user interface is provided to control scaling these objects.
  
  
• Pythia enables the user to access the original of the reduced inline images with each extra anchor around the reduced images. However, the user must change the proxy setting in order to get the entire original page. Regarding a page as important, a user wishes to get the original page by a simple operation.
  
  
• Since Pythia decides the scaling and its parameter at the time of the object transfer, it is difficult for a user to judge whether the received object is the original or not. If a user takes the original for the scaled down, he may access the same object again expecting the detail. Then he may be disappointed with the result. Additionally, the bounding box dimensions of the images may be changed to unexpected size, causing coordinates mismatch of image maps.

Another research project, OreO[2], proposes a general notion of application-specific processing of proxy servers and describes media scaling as an example. However, there are few specific proposals for interactive control of the media scaling.

2.3 Requirements

The requirements of MSS are listed as follows:

• Interactive selection of the scaling parameter and accessing the original by simple operations.
  
  MSS should enable users to select receiving either the scaled down objects or the original according to their situation. For instance, when accessing WWW server containing large image objects, a user might first wish to survey all of images in order to select some of them. Then, he might want to check the details of these images easily.
  
  
• Confusion prevention by distinguishable representation and operation compatibility.
  
  To prevent media scaling from confusing users, MSS is required to represent scaled down objects as "scaled down" and to maintain the original operation as much as possible. For instance, a reduced image map should be represented as "shrunk" and mapped to the proper objects as well as to the originals.

2.4 Desired User Interface of Image Scaling

This paper focuses on the shrinking of images as a scaling example. According to the requirements, desired user interface of MSS is designed as follows:

• Automatic scaling of inline images.
  Since a user can not detect the existence of inline images in advance, MSS should scale these inline images down automatically to provide quick page navigation.
  
  
• Choice of scaled down images from the images linked by anchors.
  On "well built" pages, anchors for image objects are often designed as thumbnail images of the original. Although these thumbnails are useful for searching, not all authors design them. MSS should allow the user to preview these anchor-linked images on pages by providing the choice of scaled down images from the original.
  
  
• Easy access to the original pages and images.
  Sometime, a user wishes to access the original objects in order to check details. MSS should enable browser users to access the original by simple operation.
  
  
• Signify the originality of pages and images.
  MSS should inform or suggest to the user whether the object is the original or not.
  
  
• Image map matching.
  MSS has to preserve the proper mapping of the shrunk image maps as well as the original image map so as not to confuse users.

Except for the image map matching, these are generally applicable to any kind of objects.

3. Virtual URL-based Scaling Control Mechanism

We propose Virtual URL-based Scaling Control Mechanism (VSCM) for MSS to provide the desired user interface.

3.1 Mechanism

VSCM controls scaling by Virtual URL and four elemental processings. MSS should work with a variety of browsers when it is located at a server site and with all servers used globally when located at an Internet intermediary point. Therefore, VSCM uses only HTTP1.0[4] and HTML2.0[6].

3.1.1 Virtual URL

For the interactivity, a browser needs to pass scaling information to MSS with every user access, where scaling information determines whether scaling will occur or not, and if scaling is to occur, the method and parameter of the scaling. Since the scaling information would be changed by every HTTP connection, it is rational to embed scaling information in the HTTP request.

We define Virtual URL (VURL), which is extended URL[5] containing the scaling information for MSS. URL is extended to VURL by inserting the command extension to the left of its extension (.html, .gif, etc.) (Figure 2).

Figure 2. An example of VURL.

The command extension is written as "_ce(method,parameter)" where the method and parameter indicate the scaling method and its parameter at MSS. For example, "http://www.../car_ce(zoom,0.5).gif" is the virtual address of the object scaled down to one-half length along each dimension by MSS. For simplicity, a VURL based on a URL is described as VURL(URL,method,parameter) and the example VURL is written as VURL(http://www.../car.gif,zoom,0.5). MSS detects VURL in the request sent by browsers and extracts scaling information and stores it so that MSS will scale down the object according to the information. Scaling information is not only used for media scaling, but also for other VSCM processing.

3.1.2 Elemental processings

These processings are work with their rules. Illustrative rules are defined at the next subsection.

• URL rectification
  When MSS receives a request containing VURL (VURL request) from the browser, MSS rectifies the VURL to URL and store the scaling information of the VURL for another processing later. This is a basic rule of URL rectification. Additionally, MSS modifies other part of VURL (e.g., coordinates on the imagemap).
  
  
• HTML transposition
  For the applicability, browsers are expected to send VURL requests without their additional functions. In order for browsers to send VURL on HTTP requests, MSS transposes HTML[6][7] text sent from the servers by embedding VURLs in the text.
  
  
• HTML composition
  MSS composes extra HTML text containing VURLs to provide extra representation of the object to improve the usability. For instance, a scaled down image can be represented as a thumbnail anchor linked to the original (shown in next subsection).
  
  
• Media Scaling
  MSS scales down the object sent from the server according to the scaling information stored by URL rectification. Since this paper focuses on the scaling control mechanism, the scaling algorithms are discussed elsewhere [2][3][12].

Figure 3 shows a typical processing of MSS after a browser sends a request that contains VURL (an example is in brackets). MSS processes the request as follows:

1. Receives VURL request [GET http://.../car__si(zoom,0.5).gif] from a browser,
2. URL rectification: Extracts scaling information from VURL and stores it [(zoom,0.5)], and rectifies VURL to the original URL [http://.../car.gif] removing the command extension,
3. Sends request[GET http://.../car.gif] which contains the original URL to the server,
4. Receives content object from the server,
5. Media Scaling: Scales down the object according to the scaling information stored in step 2 [scale down the resolution of the image to 50%],
6. Sends the scaled down object to the browser.

Figure 3. A typical sequence of the VURL request.

By this sequence, MSS scales down the objects sent from the server to the browsers according to the scaling information from browsers. Since MSS sends the URL request, MSS is accessible for any WWW servers.

3.2 Illustrative Rules

To provide desired user interface described in subsection 2.4, illustrative rules are defined as follows (SR: media scaling rule, RR: URL rectification rule, TR: HTML transposition rule, CR: HTML composition rule):

Fixed media scaling parameter for scaling detection

(SR1) Although optimization of scaling parameter on demand can bound the latency, it is difficult for MSS to detect the object scaling in advance[1]. Thus, the scaling parameter is fixed at either 50% or 25%. The method for image scaling is "zoom" and the parameter is either "0.5" or "0.25".

Automatic scaling of inline images

(TR1) MSS transposes URLs of SRC attributes in the HTML text to VURLs for all IMG tags (Figure 4). Receiving transposed HTML text, the browser sends VURL requests, and all inline images are scaled down to 50% on this page. Since it would be rare for a user to access the original page first and then access the scaled down page, MSS should transpose HTML text for any page by default. Therefore, MSS transposes HTML text when it receives an URL request of HTML text, and does not transpose the HTML text when it receives a VURL(URL,none,none) request.

Add "Origin Button" for easier access to the original page for the instant access to the original page

(TR2) MSS adds the anchor to VURL(URL,none,none) at the top of the HTML text addressed by the URL, in order to enable users to access the original page easily (Figure 5). The anchor is called "Origin Button", which is exploited as a sign: "this page is scaled down".

Add "Quick View Buttons" linked to "Thumbnail Button" for the choice of scaling and instant access to the original image

(TR3)Therefore, MSS inserts an anchor at each end of an anchor tag description when the value of the HREF attribute is URL for an image object (detected by URL extension)(Figure 6).

In Figure 6, there are two extra anchor tags inserted by MSS, and they contain VURLs in which the method is "thumb" instead of "zoom". Although MSS can provide a preview image of the original even if the method is "zoom", the method "thumb" is defined for usability improvement.

(CR1) These VURLs address the "Thumbnail Button" for the original URL image represented by the reduced image of the original. If MSS receives VURL(URL,thumb,parameter) while URL is an address for an image object, then MSS composes an HTML text shown in Figure 7, and sends it to the browser.

By these rules, MSS adds extra anchors called "Quick View Buttons" to access the scaled down object at the side of the anchor of the original object. A user can select the quality of the object that the browser receives from a server just by clicking the original anchor or the extra Quick View Buttons. For example, if a user clicks the "1/4" Quick View Button, then the user receives the 25% Thumbnail Button linked to the image on his browser. Thus, he can get the original with only one click of the thumbnail. The user selects the quality of the object distinctly with the Quick View Button and the Thumbnail Button.

3.2.2 Imagemap Matching

(TR4) For the operational compatibility of server-side image maps, MSS transposes image map URL in anchor tags to VURL(URL,expand,2). The parameter must be a reciprocal of the inline image scaling parameter.

(RR1) When a browser's request contains reduced image map's coordinates, MSS will multiply them by the parameter (e.g., request "GET http://.../map__ce(expand,2)?10,20" is rectified to "GET http://.../map?20,40").

(TR5) MSS also shrinks the COORDS values of AREA tags for the client-side image maps[7] by multiplying them by the inline image scaling parameter.

3.3 Alternative Approaches

3.3.1 Location of the command extension

There are two factors necessary for VURL specification: location and format of the command extension. We have settled on the former, while not the latter. The location may be selected from the following:

a) Top of the URL,
b) End of the URL(after the extension),
c) End of the URL(before the extension).

If MSS inserts the command extension at (a), the HTML transposition process becomes complex, because there are many relative URLs and MSS should transpose them to absolute URLs to insert the command extension. Next, if MSS inserts the command extension at (b), it may cause an error for another module on WWW that is checking extension of URL. For example, because MSS selects URL to transpose by checking its extension, it would be hard to detect extensions of URLs when MSS is cascaded. To avoid these problems, we locate the command extension at (C) and the extension is not hidden.

3.3.2 Scaling Information Passing

There is an alternative method to pass the scaling information to MSS using an HTTP header. The Cookie mechanism[9] adds a specific "Cookie:" header to HTTP headers and stores any information in it. However, we do not use this mechanism for the following reasons. Nif-T-nav[10] selects URL to store the state information for almost the same reasons.

• It supports a smaller number of browsers.
  Since Cookie mechanism is new feature, some browsers can not set "Cookie:" header. Because VSCM based on HTTP1.0 and HTML2.0, VSCM works with larger number of browsers than those Cookie mechanism supports.

• Managing scaling information is difficult at other caching proxies.
  If MSS uses the Cookie to pass scaling information, MSS provides transparency for some representations of the objects. This causes problems, especially when a browser user uses a cache between MSS and the browser. The cache mechanism stores only one representation of the object and it makes caching less effective, particularly when MSS is at the server site. Since VSCM embeds the scaling information in URL, other proxies can cache objects of all sizes.

4. Experimental use of MSS

We implemented the prototype of MSS supporting VSCM processing rule described in subsection 3.2. The prototype is written in C language and contains image scaling engines(for GIF, JPEG).

4.1 MSS access example

An example of automatic scaling of inline images and embedding of an Origin Button is shown for a page(http://www.hitachi.co.jp/) in Figure 8. There are two snapshots of browsers. Snapshot (a) shows a normal page, while snapshot (b) shows the one accessed via MSS. As Figure 8 shows, all inline images on the page are scaled down to 50%, and an Origin Button is embedded at the top of the page. The Origin Button is provided for accessing the original page, snapshot (a). Because MSS has the icon objects, and the transposition rule in Figure 5 is extended so as to embed the icon, this Origin Button is displayed with the icon. To select the next page, one can click on the reduced image map in (b) as well as the original image map at (a). (Click here to operational sample.)

Figure 8. Example of page access through MSS.

An example of Quick View Buttons is shown in Figure 9. There are two magnified views of the same part of the page (our original sample). In view (a), the browser accesses the page normally and the anchor (1) is linked to an image object. In view (b), the browser accesses the same page and the anchors (2) and (3) are embedded following anchor (a) by MSS. The icons, displayed with these anchors as well as the Origin Button are provided by MSS. If a user clicks anchor (1), written "1/2", then the user receives the image object scaled down to 50% as a Thumbnail Button. The user is given a choice among obtaining (1) the original, (2) scaled down to 50%, and (3) scaled down to 25%.
(Click here to test the sample: normal connection vs. via MSS)

Figure 9. An example of the Quick View Button.
(magnified view of the browser)

4.2 Reduction of the Navigation Time

Three access time reduction tests are carried out in order to verify the effect of MSS. In these tests, MSS ran on a typical PC (Pentium 90MHz)(*1) with BSD/OS 2.0.1(*2). The client was connected to the MSS or a normal proxy by the modem(28.8kbps). All data is cached at MSS and the normal proxy so as not to be involved with the dynamic state of the Internet. The results are as follows:

4.2.1 Image data access

The image downloading time reduction using the Quick View Buttons is shown in Figure 10. Three image sizes were used for this test. The transfer time was the interval from clicking the anchor to the finished displayed the image.

Figure 10: Time to access JPEG pictures.

4.2.2 Page navigation with images

Figure 11 shows the reduction in downloading time achieved by scaling inline images. Although these three home pages contain almost the same number of images, the sizes of these images are different. Relatively, (a) is larger, (b) is medium, and (c) is smaller.

Figure 11. Time to access pages.

4.2.3 Image searching

A user checks the six images linked by anchors first, in which there are no thumbnails provided by the author, and next download the entire image of the one selected image. Three search methods are tested as follows: (a) Conventionally checking images by entire downloading, (b) Conventionally checking images with 30% downloading, and (c) Selecting "1/4" Quick View Button connecting via MSS. These images are GIF (non-interlace) and the average size is 66.5 KB. The result is shown in Figure 12. In method (a), downloading time of the selected image is shorter than the others because the browser has cached the original images.

Figure 12. Navigation time of a sample search pattern.

5. Discussion

5.1 Browsing Flexibility

In test (T2), the downloading time is reduced for all sample pages. This shows that MSS reduces the transfer time of pages with images. Because MSS preserves image map consistency, a user can quickly navigate with any reduced image maps without worry. Thus, MSS provides users with a new navigational ability that is valued between slow full graphic access and quick text-only access.

Test (T1) shows that MSS allows the user to access three images by clicking the "1/4" button while conventionally accessing only one original image. If the user can survey images using this button, the user would find the desired image in less time. The result of (T3) shows that if the image accessed by the "1/4" has enough quality for the selection, a user can obtain the wanted image using only 35-65% of the normal connection time. If the user does not find the desired image, the time consumed is reduced to 16-47% of the normal time. The Quick View Button provides a quick search of image objects with a simple operation.

Origin Button and Thumbnail Button allow the user to access the true original image with only one click of the mouse. They are useful not only for image object scaling, but for any scaling such as accessing preview frames of video objects. Therefore, VSCM provides a new navigation ability allowing the selection of time and quality with the interactive interface. The flexibility range depends on the variety of the object representations.

5.2 User Interface Extension

One can improve the user interfaces with new definitions of VURL, URL rectification, HTML transposition and composition. For example, an extra button is added to the Thumbnail Button to modify the HTML composition rule (CR1) shown in Figure 7, where the extra button is linked to the grayscale image of the original(sample). As another example, MSS provides a thumbnail image in place of Quick View Buttons(sample). This may be useful when MSS is used at a WWW server site because authors do not have to make thumbnails for the images.

5.3 Toward a General Mechanism for Object Transformation Control

Although VSCM is proposed for scaling control, the basic concept may be applied for any transformation control at proxy servers. VURL may address any transformed or generated object based on the original URL. There are many effective examples of transformations[2]. Translation of the text to another language for easier global communication[12], and converting text to voice for visually impaired users, are two of them.

However, there are some issues applying VSCM to the general transformation control. For instance, generalization of various types of transformations is needed. This includes non-real-time transformation, protocol conversion, and so on[2]. This is something we will be working on in the future.

6. Conclusion

We designed a useful user interface for image scaling control based on VSCM(Virtual URL-based scaling control mechanism). The user interface has following features:

• Additional Buttons
• Origin Button for instant access to the original page
• Quick View Button for quick preview of anchor-linked images
• Thumbnail Button for instant access to the original anchor-linked image from the thumbnail.
  
• Representation of scaled down objects with "scaled down" signs
  
• Compatible scaled down image maps
  
  

These features allow user to choose easily desired quality and size of the images without confusion. One can design new user interface and improve it with the definitions of VSCM processing rules.

Thus, VSCM provides user interface for flexible WWW navigation taking advantage of object scaling effects. Moreover, VSCM works with any server and any browser using standard HTTP1.0 and HTML2.0.

Lastly, VSCM is applicable not only to object scaling but to any object transformation, that improves the accessibility of the WWW enabling users to receive objects in the desired media and size through interactive operations.

Acknowledgments

We would express sincere thanks to Mr. Takahiro Yamada and Mr. Shin-ichi Hashimoto for thier encouragement to initiate and continue our projects.

References

[1] Armando Fox and Eric A. Brewer, "Reducing WWW Latency and Bandwidth Requirements by Real-Time Distillation", Fifth International Conference on the World Wide Web (May 1996, Paris, France), Computer Networks and ISDN Systems, Volume 28, issues 7-1, p.1445., http://www5conf.inria.fr/fich_html/papers/P48/Overview.html

[2] Charles Brooks, et.al., "Application-Specific Proxy Servers as HTTP Stream Transducers", Fourth International World Wide Web Conference Dec. 1995, Boston, Massachusetts, USA, http://www.w3.org/pub/Conferences/WWW4/Papers/56/

[3] Luca Delgrossi, et al, "Media Scaling in a multimedia communication system", Multimedia Systems 1994 2:pp.172-180, Springer-Verlag 1994.

[4] T. Berners-Lee, et al., "Hypertext Transfer Protocol - HTTP/1.0", Informational RFC 1945, http://ds.internic.net/rfc/rfc1945.txt(1996).

[5] T. Berners-Lee, et al., "Uniform Resource Locators(URL)", RFC 1738, http://www.w3.org/pub/WWW/Addressing/rfc1738.txt (1995).

[6] Tim Berners-Lee and Dan Connolly, "HTML2.0" (RFC1866) ftp://ds.internic.net/rfc/rfc1866.txt (Nov. 1995)

[7] Dave Raggett, "HTML 3.2 Reference Specification", W3C Proposed Recommendation PR-html32-961105 (Nov.1996), http://www.w3.org/pub/WWW/TR/PR-html32-961105.

[8] Tim Bray, "Measuring the Web", Fifth International Conference on the World Wide Web (May 1996, Paris, France), Computer Networks and ISDN Systems, Volume 28, issues 7-1, p. 993., http://www5conf.inria.fr/fich_html/papers/P9/Overview.html.

[9] David M. Kristol & Lou Montulli, "HTTP State Management Mechanism", HTTP Working Group INTERNET DRAFT, ftp://ftp.ietf.org/internet-drafts/draft-ietf-http-state-mgmt-05.txt(1996).

[10] Kirsten L. Jones, "NIF-T-NAV : A Hierarchical Navigator for WWW Pages", Fifth International WWW Conference, May 6-10, 1996, Paris, France, Computer Networks and ISDN Systems, Volume 28, issues 7-11, p. 1345., http://www5conf.inria.fr/fich_html/papers/P39/Overview.html.

[11] Hitoshi Kiya, Mitsuo Yae, "Algorithm of Resolution Conversion and its Implementaion by C Language", Interface Magazine vol.19-1, CQ Publishing (Jan. 1993)(in Japanese).

[12] Toshiki Murata et.al., "The machine translation system for WWW users that enables to use the Internet without feeling language gap", SIGIM research report(21-3 vol.95 No.40), Information Processing Society of Japan, (May 1995)(in Japanese)

(*1) Pentium is a registered trademark of Intel Corporation in the U.S.
(*2) BSD/OS is a product of Berkeley Software Design, INC.