Home » About DSU » Administration » Special Projects » Office of Information Technology » Web Services » WebSite FAQ's » SBT Tutorials » Inserting Images

Inserting Images

The adage “A picture is worth a thousand words” is true only when the picture, or graphic image, is relevant and concise. Using images merely as decoration can distract readers of your web page. And, since graphic images require relatively large file sizes, they may contribute to longer load time for your page. In this sense, a large picture literally may be cost more than a thousand words—an unnecessary picture being equivalent to extended, off-subject, verbal ranting.

• Consider using thumbnail or text links to non-essential graphics. Users are much more accepting of page load time when they specifically request an image by clicking a link than they are of graphics they are forced to view every time a page loads.
  
  
• Keep your images as small as possible by optimizing them before including them in the SBT image library. There are two components to this guideline...
  
  
  • The image file should be sized as closely as possible to the space allocated for it on the page. Dynamically sizing an image in the SBT editor, by clicking and dragging a sizing handle, does not change the image file size nor does it affect the page load time.
    
    
  • The image should be in a compressed file type (such as .jpg or .gif). Bitmap images (.bmp file type) are extremely large.

 

Prepare the Graphic
Including a graphic image requires a little preparation.

The image should be sized and/or cropped to fit as-is in the space on your page. While it's true you may dynamically resize the image once you've included it in your page, the sizing has no effect on the graphic file size. Dynamic resizing also may adversely affect the image quality.

• Be sure you have appropriate rights to use the image. Be sure to include proper attribution if you don't own the image or it isn't in the public domain.
  
  
• The image file must be on a storage medium accessible from the PC on which you are using SBT.
  
  
• There must be no special characters or spaces in the file name. Limit the characters in your file names to alphabetic [ a - z ], numeric [ 0 - 9 ], dash [ - ], underscore [ _ ], left parenthesis [ ( ] and right parenthesis [ ) ] characters. A file name incorporating any other characters, including the ever popular ampersand [ & ] and space [ ], will cause problems—even though the name is perfectly acceptable to Windows Explorer. For example:
  
  
  • this_is_a_good_(and_proper)-file-name
    
  • this file name will cause problems [because of the spaces]
    
  • this_is_a_bad_file_name&will_cause_problems [because of the ampersand]

Start the Process

Position your cursor where you want the image to appear; a table cell is an appropriate candidate location. Click the Image icon  in the toolbar. In the Image dialog… Source: is where you may type the path to the image file. Alternatively, and less prone to mistakes, you may click the Open icon , discussed next. Alt. Text: allows you to specify text to display if the user's browser can't display the image.

See Fine-tune the Graphic Layout for the discussion of the remaining options.

Get the Image File

If the image file you intend to use already exists within SBT's control, including it in your page is relatively simple. The process is a little more involved if the file exists elsewhere. Review the tutorial Uploading Documents and Images for more information about putting images into SBT.

Click the Open icon to the right of the Source : field. In the Open Image dialog, you will see the files are stored in directories associated with individual departments and groups. Navigate to your department or groups directory, if the file you intend to use is listed in the right panel, double-click the file name. If the Image dialog appears again, click OK.

 

 

 

 

 

Maintained by: OIT