KB User's Guide - Documents Tab - Image Guidelines
This document explains guidelines for images included in your KB documents, including standards for formatting, sizing, and displaying.
- Use the .png format if possible, otherwise use one of the following file formats: .jpg, .gif.
- If possible, try to make your images no wider than 600px. This ensures that users with XGA resolution (1024x768) displays can view your content without a scroll bar and is more accessible for smartphone users.
- The size of the image must be under 125MB when using the the multi-select uploader in Firefox, Chrome and Safari. A progress bar will display a confirmation (or error) message.
- Unfortunately, this does not work in IE, so IE will not have any multi-select feature and is still limited to 40MB files.
- You must insert appropriate alt text for accessibility purposes, unless the image is purely decorative. Decorative images should have their alt text field left blank.
- The image should be clear and readable.
- Use red outlines to highlight important buttons, text fields, or other information in images. The image below shows all document attachments outlined in red.
- Avoid over-sized and highly detailed screenshots.
- Don't take screenshots of an over-sized window if you're only interested in one button, unless you're trying to show the user where to find that one button on the screen. Crop out the part of the scrren you want to highlightbolster it with detailed text.
- Save images in formats of PNG or JPG or GIF.
- Give your screenshots descriptive names. If your screenshots are named kb4643_01, kb4643_02, etc, it will be very confusing to make edits to the document and/or screenshots.
- Make sure the document makes sense even without the screenshots. Screenshots are supposed to enhance the text of an existing document. Your document should be fully comprehensible without them.
- This is a poor choice for a screenshot because it's far too big for the information it contains and the rounded rectangle is too tight on the text.
- This is an okay screenshot because the rounded rectangle is just right but the image is a bit big, however, there is exessive whitespace.
- This is a better screenshot because the rounded rectangle is just right and the image size is just right for the content.