We introduce the new section "Business Information" where we will publish information about latest hard/soft-ware developments in computer graphics and geometry applications.
V. Pilyugin

Graphics on the Internet

Danny Cruz
Moscow, Russia
dcruz@matrix.ru

Background

 Every day the number of Russian Internet users grows larger and more diverse. New Internet service providers, or ISP's, emerge every week. In Moscow, users from stockbrokers, to dry-goods dealers, students, and the emerging breed of Internet developers and hackers - all log in daily to their providers. However, as a remnant of Soviet times and improperly implemented privatization of assets, telecommunication service providers and large political-industrial concerns dominate the access landscape. This is a land where there is still a nine-year wait for a regular copper-wire telephone in close proximity to multiple fiber loops running throughout the business districts. The biggest cost to the market of all this chaos is... Cost.

Compared to the xDSL, cable, wireless and other media access available to the common US business or household - at cheap, every-day prices, the reality in the rest of the world is sporadic and sparse distribution of very expensive bandwidth. This is seen with slight variation from Russia - throughout the countries of the former Soviet Union, to many parts of Eastern Europe. Yet, the demand is there - the users and skills are there. This same picture can be mirrored in other emerging market regions, including much of the Asia-Pacific region. However, new technology developments out of the U.S. may provide the needed pipeline – making broadband access available to more and more people across the globe.

Until that time that it is available in every locale, bandwidth availability will be a leading issue in browsing the Internet. Web-sites that use heavy graphics and color schemes will pose a major inconvenience to many viewers, as they sit and wait for down-loads to be completed. Therefore this article will discuss various considerations for use of graphics on the Internet.

Understanding Graphics on the Internet
When browsing the Internet, users can "consume" information in several ways – two main ways 1) as an online experience, where pages are read directly while logged onto a site, and 2) for later consumption as a saved or printed file. The designer should understand which of the two main types of consumers he will be serving. Pages oriented primarily for online users should be focused and shorter than typical offline publications. The amount of bandwidth utilized for graphics should be carefully monitored to match with the average bandwidth available for the consumers. More complex presentations will probably be printed out for offline reading or saved for gradual consumption.

Visual Organization

 A task of designers is to properly organize the presentation, balancing all graphics and content. The reader’s eye is lead through the web site through the use of layout, typography and illustration. Readers will first perceive the web site as a mass of shape and color (see diagram below) and the contrast between the foreground elements against the background field. Secondarily readers start to perceive specific information, starting from any graphics that are present. Finally, after these initial impressions, readers begin to sort of the textual content, consuming the individual words and sentences.

Therefore the organization and overall balance of graphics and content will help to attract the reader towards the message being offered for consumption. A presentation of only text content will make it difficult for immediate attraction of readers, as will poorly designed – or graphics-dominated pages, while the appropriate balance will both attract readers and pass on the message. The correct balance is determined by the nature of your content and the character of the consumers of the web page.

Leading the Consumers
In most of the world, readers scan from left to right, and from the top to bottom of a page. This pattern should be a major factor in design of the web page. Therefore, the top of the page is usually the most dominant location, especially on web pages due to the presentation of browsers on typical computer monitors. Current design "trends" state that pastel colors are optimal for background and secondary graphical elements. Bold colors should be used in a limited way for maximum emphasis. Text should have a sharp contrast with the background to allow for easy reading.

Graphic Distrortion
In some cases publishers of print and web pages overuse graphics and stylistic elements, such as lines, bullets, icons, buttons, etc. They should be limited in use to avoid a confusing overall layout. An example of overuse follows:

Overall Organization
The overall presentation of all the web pages in a web site should have a consistent "look and feel" throughout all pages on the site. It allows consumers to quickly adapt to the system of information on the web site, and to easily navigate to the desired bits of information. An idealized schematic of this concept is as follows:

Specific Use of Graphics Formats

 Today, the browsers available now support a variety of graphics formats, including jpeg, as well as many others. This means, that as designers, the primary consideration of graphic format to use is no longer browser compatibility – it should instead be considered as a function of reader bandwidth availability (by reducing file sizes whenever possible). For instance, GIF format is typically used for images in web sites. Two techniques can reduce the sizes of graphic files:

Faster Image Delivery

 Most GIF files are comprised of an 8-bit palette (or 256 available colors). However, in many cases the palette can be reduced – which will also reduce the file size of the graphic, while still keeping a good image quality. The smaller file size means faster delivery to most consumers.

To understand the palette (bit-depth) please note the following chart:

Bit Depth Number of Colors Available to Palette
1 2
2 4
3 8
4 16
5 32
6 64
7 128
8 256
16 65,536
24 16,777,216

Photo Example
In the examples below – it is a photo which has many elements as typical photos. Included are elements of skies which are difficult to optimize because of the multitude of color ranges from darker to lighter areas of the sky, and the shift from solids to transparent colors with clouds.

Source File / 25,874 Bytes
Source file in highest quality JPEG format and saved using GIF Converter. The JPEG options were set to No Compression and Millions of Colors.

8-Bit GIF, System Palette / 12,594 Bytes
Here, the image was opened and saved using Adobe Photoshop (v2.5.1). The original picture was converted to Index Color, with the Sytem Palette and Diffusion options selected. Notice the heavy dithering in the sky and shadow areas. By forcing the image into the available 256 Macintosh System colors, the heavy dithering encumbers the quality.

8-Bit GIF, Adaptive Palette / 16,618 Bytes
This image was opened and saved using Adobe Photoshop (v2.5.1). The original picture was converted to Index Color using an Adaptive Palette, No Diffusion. With the Palette changed to Adaptive, the image doesn't suffer from the "Speckly" look of the System Palette image. The cost though is an additional 4K in size of the image. Notice the flattening (posterization) of the colors in the shadow areas and in the sky.

When to use GIF
Small, iconic and thumbnail images

Graphics, logos, logotype

Flat color areas

Some small-area photographic/continuous-tone images

When you absolutely want to support every browser out there

When to not use GIF
Some small-area photographic/continuous-tone Images

Large-area photographic/continuous-tone Images

When .gif is bigger than .jpeg

Lots and lots of colors

About the Author

Danny Cruz is the Managing Director for the Eastern European Region, for ComSoft Systems based out of McLean, Virginia, USA. He has over 15 years of experience in the Information Technology and Telecommunications industry, ranging from project management, corporate and project finance, and business operations. He is currently based simultaneously out of Moscow, Russia and McLean, Virginia, setting up regional business and dealer network operations. He is also active in the Internet industry throughout the region - including the Moscow Internet Exchange (a monthly event networking - financiers with Internet entrepreneurs and journalists).