Images

Graphics and other visual elements clarify your instructions and concepts. Screen shots are easy to produce and format using SnagIt (my preferred tool!) and other tools.

Common uses of imagery

Screenshots are always good in how-to pieces. Use them to illustrate functionality, show users a series of steps, or give examples.

An image that spans the full width of a web page should be no more than 800 pixels wide. If possible, use vector images in the SVG format as they scale well. Use PNG if you can't use SVG. Captions aren't necessary in procedures.

Image size is more of a group preference. Just remember that large images can overwhelm the user. Consider using just parts of the full image. Or, reduce the image by 72%-75%. Then use a Sharpen filter set at between 72%-75%.

Some documentation tools and JaveScript plugins let you use a thumbnail image. When the user mouses over or clicks the image, it enlarges to full size.

Copyrighted images

Don't use them, even if the document is only for an internal audience. Don't alter a copyrighted image and use it. Instead, search for and use public domain CC0 Images

Accessibility

While you may not be required to follow Section 508 guidelines, some of your customers are required to comply with Section 508. This means that their vendors might need to follow these guidelines.

The W3C Web Accessibility initiative is a good resource for all web accessibility issues.

Every image presented online must have alt text describing the image. Additionally, any text that appears in the image must also appear in the alt text. Most screen readers already add Image of when reading out an image, so alt text like Image of Edit Citation dialog box is redundant because screen readers will read it as Image of image of edit citation dialog box. Try to limit alt text to 15 to 25 words. if you need to have a longer explanation, add it to the page as a description for the action involved.

When captioning an image, don't add additional context or information. Don't just repeat what the user sees by looking at the image.