Evaluation of Progressive Image Loading Schemes Chris Harrison Anind K. Dey Scott E. Hudson Human-Computer Interaction Institute, Carnegie Mellon University 5000 Forbes Avenue, Pittsburgh, PA 15213 {chris.harrison, anind, scott.hudson}@cs.cmu.edu ABSTRACT Although network bandwidth has increased dramatically, high-resolution images often take several seconds to load, and considerably longer on mobile devices over wireless connections. Progressive image loading techniques allow for some visual content to be displayed prior to the whole file being downloaded. In this note, we present an empirical evaluation of popular progressive image loading methods, and derive one novel technique from our findings. Results suggest a spiral variation of bilinear interlacing can yield an improvement in content recognition time. Author Keywords Progressive image loading, downloading, web browsing. ACM Classification Keywords H5.2 [Information interfaces and presentation]: User Inter- faces. - Graphical user interfaces. General Terms: Human Factors INTRODUCTION Images are a fundamental component of content on the World Wide Web. They are used in a multitude of ways, including design (e.g., logos), data visualization (e.g., graphs), and as a form of expression (e.g., art, photo- graphs). However, images files are typically several orders of magnitude larger than text files, causing their transmis- sion times over networks to be substantially longer. This may not be a problem for those with high-speed, broadband connections, where images are often loaded in under a second. However, for users on slower connections, particularly prevalent in developing nations, images may take several seconds to more than a minute to fully load. This period is frustrating to users, and may preempt work until complete [5,6]. Mobile devices, such as cell phones, are also affected, as wireless speeds are generally much slower than that of hard-wired connections. Even on state- of-the-art mobile hardware, such as Apple’s recently re- leased iPhone 3GS, a 5MB image takes roughly 13 seconds to download at a generous 3Mbps (UTMS turbo HSDPA has a theoretical maximum transfer speed of 7.2Mbps, but real world performance is considerably lower due to la- tency, congestion, packet loss, and overhead). On EDGE networks, still prevalent in the United States, the same im- age would take several minutes to fully download. It should be noted that improvements in wired and wireless bandwidth will alleviate these effects over time. However, there are three forces competing against this progress. Foremost, multitouch interfaces found in the latest mobile devices are enabling users to seamlessly access and navi- gate high resolution content on small screens. This modality is certain to grow, and even five-second load times will not be acceptable to users, especially if once downloaded, the content was not of interest. Secondly, there has been a tre- mendous surge in the volume of photographic content on- line (due to, e.g., Flickr, Facebook). Lastly, the resolution of consumer digital cameras has increased from roughly 1 megapixel to more than 20 in just the past decade [1] (al- though this trend looks to be slowing). IMAGE LOADING Image loading in web browsers typically manifests itself in two ways. One behavior is for the browser to withhold the image until it is fully downloaded. Typically, an empty space is displayed in the interim period. The second method that web browsers employ is to progressively render the image as data is received. The most frequently encountered progressive loading scheme renders an image’s pixels from top to bottom. The latter has the benefit of showing some visual content to the user as the image loads, and otherwise assures the user the image is indeed downloading. More importantly, however, is that it allows for quicker recognition - imperative for efficient traversal of web content. Unfortunately, this top-to-bottom loading method may not render the pixels necessary for recognition until more than half of the image is loaded, wasting considerable time, bandwidth and energy [5]. Perhaps a simple change, such as left-to-right or bottom-up, would prove more effective. Also worth considering are methods that do not load pixels in a predefined order. For example, an importance metric could be calculated for pixels or arbitrary regions in an im- age. When the image is being transmitted to a user, the “most important” pixels could be sent first. In general, it appears current image loading schemes are not aligned with how people create, capture, and view still con- tent. This note provides what may be the first quantitative assessment of how different loading schemes perform from a human-centric perspective. Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. CHI 2010, April 10–15, 2010, Atlanta, Georgia, USA. Copyright 2010 ACM 978-1-60558-929-9/10/04....$10.00. CHI 2010: Pixels and Perception April 10–15, 2010, Atlanta, GA, USA 1549