Images used to explain content should be used sparingly to enhance the content and add to the visual interest of the page. If your content alone is not conveying a clear idea, you can add a graphic that may help a user to understand it better. An example of this may be a table, pie chart, or infographic. Only add graphics that directly relate to and enhance written content. Avoid stock photography in favor of IEEE commissioned photography or images. Contact the Experience Design Team for more information on stock image options.

Formats and types of graphics Recommended image formats are GIFs, JPEGs, and PNGs

• 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

Compression

Images should be compressed to a smaller size to decrease page load times. There are a variety of software packages available to assist in compressing your images, such as Adobe Photoshop or Fireworks.

These are some free digital-based tools for image compression:

• Gimp.org
• Image Optimizer

The following online tutorial offers information on optimizing graphics for the digital platform: The designer's guide to image compression

Naming

• It is not necessary to repeat words that appear within the directory in the file name.
• File names should be made as short as possible, while still having meaning to the user.
• Each file name within a folder or ZIP file should be unique.
• Use all lowercase and avoid special characters when creating file and folder names.
• Dashes (-) are recommended in place of spaces, except on IEEE.org.

File sizes

• Background images: Try to keep the file size around or below 10 KB (IEEE digital sites only).
• Banners and header images: up to 70 KB is acceptable.
• Thumbnail images: up to 45 KB is acceptable.
• High-end photographs: up to 100 KB maximum. Reduce resolution to 72 dpi for the web.
• Test your graphics on multiple platforms (PC/Mac) and browsers.

Captioning

• For IEEE original photography and illustrations, use captions to indicate the source and purpose of the image.

Alternative (alt) text, when written well, creates a fulfilling and inclusive experience for all users, but especially for those using screen readers. Alt text is a required element for WCAG 2.0 Level A compliance that is part of the IEEE Accessibility Statement. All site managers and site developers should account for effective alt text usage in the imagery they create and/or post on an IEEE website.

Here are some best practices for writing effective alt text for images:

1. Avoid redundant text. Do not use “image,” “image of,” or “picture of” when writing alt text. This avoids redundancy, as screen readers will read aloud the word "image" when it comes to an image.

2. Treat alt text like a sentence. Capitalize the first letter and end with punctuation. (Example: An airplane takes off over runway, with colorful sky in the background.)

3. Provide text alternatives for images that contain text. Images with text (example: data charts, infographics) should contain alt text, transcript, captions, or descriptors to ensure users who are unable to view the image equally understand the content of the image by an alternate source of the same information.

4. Keep alt text concise. Avoid writing alt text that is longer than 100 characters. Exception: If using informative images, alt text may be longer.

5. Match tone to the context of the image. Try to match the tone of voice of the accompanying content. Alt text does not need to be an objective description; it is fine to convey relevant nuances, details, and emotions.

6. Avoid alt text for decorative images. For images that are just used for decoration, use empty alt text (for example, <img alt=""> [empty quotation marks after alt=]). If a screen reader sees empty alt text, it will ignore the image. If not coded this way, screen readers will instead read the image's file name aloud, which is distracting to the screen-reader user.

Learn more about alternative text

For information on how to use the IEEE Master Brand, please see the IEEE Brand Identity Guidelines "How to use the IEEE Master Brand" section (PDF, 5 MB).

The IEEE Master Brand is available for download in the IEEE Brand Identity Toolkit Master Brand section.

Submit any questions via the IEEE Brand Inquiries Form.

Multimedia can be used on IEEE sites to support the page's content. Multimedia should be used in a meaningful way and should support the page's content.

These guidelines cover audio, video, animations, and other interactive features whether the viewer or player is embedded in a page or external.

Many of these requirements are important for accessibility. The relevant WCAG 2.0 guidelines are listed in parentheses.

Help users understand what the multimedia element is and how it works.

• Identify the content of the media with a heading or explanatory text. (WCAG 2.4.6, 3.3.2)
• If an interactive element has a series of steps, identify the number of steps at the beginning. (WCAG 3.3.2)
• If the viewer or player is not embedded in the page, include a link to download it. For example, some media types, such as Flash or Java, require a player or plugin to be installed on the user's computer.
• If you include a link to download the file, indicate file type and size in parentheses after the link. For example: (MP4, 6 MB).

Make sure the multimedia is accessible.

• Provide closed or open captions for any video file. (WCAG 1.2.2)
• Include a transcript for any audio. The transcript may be displayed as text on the page or a separate file. (WCAG 1.2.1)
• Do not include any content that flashes more than three times per second unless it meets the general flash thresholds. (WCAG 3.2.1)

W3C Multimedia Accessibility page has information about creating transcripts.

Give users control of the media and how it plays.

• Provide controls for pause, stop, and replay. (WCAG 2.2.1 and WCAG 1.4.2)
• Do not play the media in an endless loop. (WCAG 2.2.1)

Design elements of multimedia.

• Adhere to the design elements and IEEE Master Brand standards within the IEEE Brand Identity Guidelines (PDF, 5 MB).

• Clearly identify the number of steps at the beginning of a sequence. For example, step 1 of 5 (if applicable).
• Provide an explanation of the animation file before it begins to help users better understand the animation and associated content.
• Indicate which type of viewer/player is necessary and provide a link to download the viewer/player (if applicable).
• If the file is downloadable, always indicate file type and size in parentheses after the link; for example, IEEE presentation template (PPTX, 2 MB).
• Allow animation to be user-controlled. The user should be able to pause, stop, replay, or ignore animation or other multimedia elements.
• Place actionable controls (such as buttons) in an inherent place within the file so users do not have to search for a way to advance.
• The typeface size within the file should not appear smaller than 8pt or .07 em.
• The file should have an absolute end and not loop.
• Provide an HTML or transcripted version of the file for users using assistive technology. Learn more about creating transcripts.

Please contact the Experience Design Team if you intend to use or have questions regarding multimedia content.

Do not use content and/or images from another site (including IEEE digital sites) without permission. For example, do not use Google images found through search without permission of the owner. Provide the source, as a caption, of all content that is not original once permission for publishing has been obtained.