IEEE Web Presence Style Guide: Graphics and Images

Formats and types of graphics

• Recommended Web formats are GIFs, and JPEGs, and PNGs. It may be helpful to create multiple formats and to compare file sizes, image quality, and downloading speeds before selecting one.

     - GIF: solid colored images, line art, clip art, 256 colors maximum, supports transparency images
     - JPEG: photographs, continuous tone images, gradients, does not support transparency
     - PNG: bitmapped image format that employs lossless data compression and supports transparency

• Check images on both a PC and a Mac platform and on all common browsers.

Compression

There are a variety of software packages available to assist you in compressing your graphics for use on the Web, including DrPic.com and Paint.net. These programs will compress both JPEGs and GIFs.

Naming

The name of the graphic will appear in the URL of the page. For this reason, the same naming guidelines apply to graphics and supporting files as to pages.

The user may reference the URL of the graphic to help understand the meaning of the image. It is important to appropriately describe the image through the file name, but at the same time ensure that the name is concise enough so as to not lengthen the URL unnecessarily.

Alternate text is a phrase applied to a graphic and read aloud by screen readers.

• Provide meaningful alternate text equivalents for all graphics.
• Do not add alt text to an icon if it would be the same as the link text (since screen readers will read both the alt tag and the link text).

Icons should be consistent in their behavior, positioning, and design and should reinforce commonly used metaphors.

Best Practices:

• icons should be used sparingly (or only when absolutely needed)
• proper alt tags should be provided for the icons to support users who use screen readers
• expansion cues, if used, should be consistently applied throughout the site; plus/minus symbols are preferred
• use established icons when available

Download the IEEE Icon Library (ZIP 246 MB)

When developing a new template or header for an IEEE Web site, the the IEEE Master Brand Standards within the IEEE Visual Identity Guidelines (PDF, 3.11 MB) must be followed, including the following. 

• Placement: upper right corner of the site header and within the top one-third of the screen view.
• Size: minimum of 100 pixels wide by 33 pixels high and smaller in size than the site identifier.
• Clear space:  1/2x clear space around the IEEE Master Brand. (x=the height of the letters I-E-E-E)'.
• Color: either black or white (the blue IEEE Master Brand is reserved only for the IEEE Main site (IEEE.org);
• Hyperlinking: link back to www.ieee.org and open in the same window.
• Should be displayed in accordance with the IEEE Visual Identity Guidelines (PDF, 3.11 MB)

Incorrect usage of the IEEE Master Brand are detrimental to the IEEE brand: must not be incorporated into background or wallpaper treatments; must not have any modifications or distortions applied (e.g. drop shadow).

• IEEE must always be used in the title of an IEEE product, service name or publication, (For example, IEEE eLearning Library, IEEE Xplore, IEEE Photonics Journal.) The letters I-E-E-E also must appear in any graphic representation, text, or signage that mentions the product. (header/content) 

• Only the letters  I-E-E-E can be used in the title of an IEEE product, service name or publication. Do not use the IEEE Master Brand (consisting of the IEEE diamond-shaped logo - the “kite” - followed by the letters I-E-E-E) or any portion of it. (header/content) 

• When used in a sentence, title or name the letters “IEEE” should always be used in uppercase. (content) 

• The letters I-E-E-E can be in any of the IEEE approved fonts except Univers 75, the font for the Master Brand, or in a font that closely resembles Univers 75. It is recommended that the letters I-E-E-E use the same font as the rest of the name or title. This includes all print, screen, non-screen, and Web-based applications. (graphics)

The following are examples of correct and incorrect usage of the letters I-E-E-E and the IEEE Master Brand in a name or title:

Do not use GIF animation except in very special circumstances (i.e., instructional purposes) with the Digital Innovations Team's permission.

A light-colored background must be used  to ensure content readability. Background graphics and watermarks must be avoided.

Do not, under any circumstances, use an image without properly crediting the source of the image.