HUD's Web Publication Procedures and Style Guide

Section 7: Rules About Graphics

A. Photos And Graphics: Be judicious in the use of photos and graphics. Remember that we want to keep the weight of each page to a minimum so that people using slow modems can access the website. Be sure to follow guidance on total page weight.

1. Make sure photos and graphics add value to the content. Every image and graphic should have a reason to be on the page.
2. Keep graphics simple.

B. The Website "Brand": To ensure that HUD's websites are easily recognizable, each has a standard "brand" that is used.

1. On www.hud.gov, espanol.hud.gov, and archives.hud.gov, the "Homes and Communities" brand must appear on each page, as created in the template. In addition, the HUD seal must appear at the bottom of the page, along with the Headquarters address and a link to the addresses of the HUD Field offices.
2. On hud@work, the brand is the name of the website: hud@work. It must appear on every page.
3. As a rule, no other branding should appear on HUD's websites, with the exception of icons or logos established by the Office of Public Affairs to promote specific Secretarial initiatives or efforts.

C. Image And Graphic Types:

1. The two primary image formats used are .gif (Graphic Interchange Format) and .jpg (Joint Photographic Experts Group). For best results, save all drawings, graphs, etc., in the .gif format; and save all photographs in the .jpg format.
2. Any images or graphics that were created in another format (e.g., .tif) must be converted to either .gif or .jpg prior to posting on a web page. Note that when you convert an image or graphic, certain aspects such as color or fonts may be affected.
3. Other forms of image and graphics files may be acceptable, as long as they work with most web browsers. Before you use another format, however, you should check with the Departmental Web Team.
4. If you are creating images or graphics that will be posted on the website for the audience to download and use in print publications, then use the .tif format. These images should be saved at a minimum of 300dpi. Note: .tif formatted files will not display on the web page. You should link to the file using the <a href> tag so the user can download the file.

D. Image And Graphic Specifications: If you are offered different "save" options for the .gif format, save the graphics as "89a Non-Interlaced .gif files." If you are offered "compression" options for the .jpg format, experiment with different compression levels to determine the best balance between image quality and file size.

The quality of a .jpg image degrades every time the image is edited and saved. If you need to edit an image, you should always go back to the original source file, edit it, and then save it as a separate .jpg file.

E. Thumbnails: When it is advantageous to put more than one photo on a page – for example, if you are showing photos of homes for sale – then use thumbnail versions of the photos, to keep the page size within reason.

1. All horizonal images should be 100 x 75, and all vertical images should be 75 x 100.
2. hud@work images can be 115 pixels wide.

F. Colors: Images and graphics should use at least 256 colors and a color depth equal to or greater than 8 bits.

G. Sizes: The recommended size of an image (in pixels) is 200x133. The maximum recommended size of any image or graphic is 240x160. Remember that all images and graphics should be designed to work within at least the 640x480 monitor resolution.

H. Cropping: Minimize any extraneous background space in an image by "cropping" the image. This will help focus attention on the subject of the photo and reduce the overall size of the image.

I. Borders: Photographs and some graphics (e.g., street maps) should have a 1-pixel border (border="1"), with the default (i.e., undefined) border color. Graphics, such as logos, icons, and graphical text should not have a border (border="0").

J. Height and width: The height and width of all images and graphics should be indicated (e.g., height="133" width="200"). Note that the height and width must be the exact height and width of the image or graphic. If you use different values in an attempt to "force" an image or graphic into a desired space, you will distort the image or graphic.

If you need to resize an image or graphic, it is best to do this with HUD-approved graphics software. Save the resized image or graphic and then include it on the web page in the desired height and width.

K. Vertical Space And Horizontal Space: Vertical space (Vspace) and horizontal space (Hspace) is the space around an image or graphic on a web page. The Vspace and Hspace should always be "0."

L. Text Labels: Every image or graphic must have a text box or text label (the <alt> tag). This text label describes the picture or graphic to people using a text-based browser and people with disabilities using a text reader. The text label must describe the photo or image for those who cannot see it.

Do: Describe a photo of the Secretary meeting volunteers as: "photo1: the Secretary meets volunteer workers who are providing meals and drinks at a shelter in New York City."

Don't: Describe a photo of the Secretary meeting volunteers as: "Secretary meets volunteers"

Be sure to enclose the text message in brackets to enable it to stand-alone and separate it from other text messages. If the graphic is all text, then the alternative text message should duplicate that text. For example, the message for a graphic that states "Homeless Assistance" would simply be "[Homeless assistance]."

M. Text Alternatives: Where image maps and other graphic navigational aids are used, alternate text-only links must be available for users who use text-based browsers. This includes information displayed on mapping applications.

N. Animated Graphics: HUD does not use animated graphics on its websites. Animated graphics add significant weight to a page, and they don't work with all web browsers. Furthermore, they may present problems for people with disabilities. If you want to use an animated graphic, you must get permission from the Departmental Web Team first.

O. Storage: If a graphic or image is only used on one web page, the graphic or image file should be stored in the same folder as that web page. If the graphic or image is used on multiple web pages, the graphic or image file should be stored in the most appropriate "images" folder.