Best Practices (so far) for Images and Video

Author:

Lori Goldman

Created at:

Oct 2021

Updated at:

May 2022

Included are guidelines for diagrams, screenshots, animated gifs, screencasts, video, thumbnails, etc. Regardless of the display, we want images to be clear, understandable, load quickly, and easy for search engines to find.

Rules of thumb

Images are a great way to transmit information quickly, and ensure that information stays in a reader’s long-term memory. Use images to increase the impact of what you’re writing, or clarify it, rather than to replace the writing itself:

  • Avoid formatting like drop shadows, borders, outlines, etc. Keep the image as straightforward as possible.

  • Use high-resolution (300 ppi or more) images that clearly show the tasks the user will perform.

  • Use a white or transparent background to keep illustrations clean and contrast sharp.

  • Strive for a balance of image, text, and whitespace in your articles.

  • Consider the long term. How will you maintain an image to ensure it is current and accurate?

  • Get permission to use third-party images, art, videos, music, …

Screenshots

  • Capture only what is essential. For example, if you are capturing a menu item, capture the item and the UI element it is part of, and not the entire UI.

  • Make sure your screen captures are large enough to see/understand any text and/or icons.

  • Cropping tip: Increase the browser window size to increase the font size, and then take the screen capture.

  • Use arrows to help the user find something specific or to call out something.

Diagrams

  • Human icons should be faceless, colorless, and genderless for translation and globalization purposes.

  • Thing icons should be used consistently to represent the same element within the graphic itself and across the article.

  • Avoid images that are specific to a culture.

  • If you use color as an enhancement, ensure the meaning is clear from the usage, or clarify in a legend or the like.

  • If you are factoring in translation, include 25% more space for increased word count for translation as it can increase words, and therefore, space.

Flowcharts

  • Orientation: Place the starting agent on the left, so the movement is clockwise.

  • Draw from top to bottom or left to right wherever possible.

  • Keep your shapes and lines aligned for a clean, clear diagram.

  • Keep text within each boundary.

  • If the overall image is too wide or space is limited, make text shorter on each line, or use a legend.

  • Properly label elements to differentiate them.

  • Use directional arrows to show the flow or interactions between components.

  • Keep similar components the same color for easy identification.

Embedding text in images

Note that embedded text in bitmap graphics is neither searchable nor easily localized. Here are some considerations:

  • Use a sans serif font for screen readability.

  • Keep text succinct.

  • Place text horizontally wherever possible.

  • Use black as the font color.

  • Formatting of text is optional.

  • Punctuate as necessary. Use periods/full stops for complete sentences.

  • Initial cap proper nouns as appropriate.

  • Use sentence case for sentences, incomplete sentences, and stems.

  • Left justification is recommended for alignment. Use the same alignment consistently.

  • Callouts are optional.

TBD:

Animated GIFs and screencasts

Display considerations

SEO optimization