Sizing

  
A graphic element has two different kinds of sizes: its display is determined by its visual dimensions its storage and retrieval are determined by its information load The first concerns screen real estate and the second concerns the time a graphic takes to load onto the user's screen and the portion of network resources the transfer of the graphic requires. Because graphic elements can be resource intensive, they should be used only when they are necessary. Visual Dimensions
Some important rules for graphic information displays include:
  1. Do not use graphic illustrations that exceed the display capacity of the smallest monitor any user will employ.
  2. Never use a graphic element that requires any horizontal scrolling either because of its screen dimensions or because of its placement relative to other elements
  3. Be consistent about the placement of graphic elements -- both those considered pictures and those that achieve graphic effects by simply adding color, texture, line weight and so forth to some parts of the text
  4. Make sure that graphic elements of the same type or function are all the same size. All the buttons associated with a single function or level of hierarchy should be the same size. The banner or navigation graphics commonly seen at the beginnings and endings of nodes should be the same width, although the height can be varied if one is subordinate to the other in importance.
  5. The size of an element should be commensurate with its function and value: for example, navigational graphics at the beginning of nodes should not consume more screen real estate than they warrant.
Information Loads
Some important considerations for evaluating the "cost" graphic elements may incur:
  1. Each graphic file requires a separate connection between the browser and the server, increasing traffic on the network and complicating analyses of server data.
  2. The size of a graphic file, measured in kilobytes, affects the amount of time loading a page will require, especially if the images are not "cached" by the browser.
  3. The time a node requires for complete loading depends in part on the sum of all its parts. Nodes that consist of thousands of words and a few small graphics can take as long to load as nodes that consistent of a few words and some carefully devised illustrations.
Some good general rules of thumb for information loads:
  1. No graphic file should exceed 50k
  2. The sum of all elements -- text, graphics, applets -- should not exceed 150-175 kilobytes
  3. Low-cost graphic elements should be used when possible. These include
    • adding graphic dimensions to texts
    • reusing graphic elements rather than introducing variants
    • using very small image files repeatedly to create graphic elements
The design of graphic elements can also affect their information size. Graphics using relatively few colors and employing only the  216 web-safe colors generally will have a smaller information size.
return to the top of the page to Graphics
 
Web Design Guide