5. Adding Images to Knowledge Base Content

Images must supplement the text provided.

Images can be indented one time to the right to align with text.

Avoid using images with a lot of text when possible as they aren't accessible.

Provide alternate text for all the images.

Roughly format size of images prior to upload to keep resolution clarity.

Try to give width within 300px if necessary.

Don't give width and height to the images as they are not responsive in the mobile version.

Use images in web content sparingly.

As search engines do not read the details of images, an alternate tag is required for all images.

When choosing images for web content, think about how the image is being used and how your end user will access the content.

Images need to be relevant and add context to the text content - avoid images for decorative purposes.

Do not attach PDFs in public knowledge base articles.

Prior to upload into knowledge base:

1. Reduce very large files to a lower file resolution without losing detail clarity.

2. Roughly crop images to focus on areas of importance.

1. Click the location in the content where you will place the image - usually below the explanation or instruction step.

2. Upload the image at a rough size i.e. between 438 to 800 pixel width using the Image button.

3. Click the Image Properties window.

4. Click the Upload tab.

5. Click Browse to find your image file on your computer.

6. Click Send it to the Server to upload the image.

1. Always check the Lock aspect ratio is "on lock" position.

2. Right-click the image and choose Image Properties.

3. Resize to the mobile responsiveness 250 pixel width size to ensure the image renders properly when viewed by a mobile phone.

1. Right-click the image and choose Image Properties.

2. Click Image Info tab.

3. Complete the Alternative Text field describing the relevant part of the image.

4. Add a black border size = 1

5. Keep the Alignment option as <not set> or else the text will not wrap properly.

6. If there additional steps, add a blank line below the image for visual space before the next step.

7. Sometimes indenting images once to the right helps keep image in line with formatted text.

Make the image a "clickable image" to allow it be opened and viewed by a viewer at its original image size so they read finer details.

1. Right-click the image and choose Image Properties.

2. Click the Image Info tab

3. In the URL field, copy the image link.

3. Click the Link tab.

4. Paste URL link into the URL field.

5. From the Target drop down, select New Window.

Always open and view your updated web content in a mobile phone to ensure your changes are visually suitable.

Adding icons (i.e. graphics) to a list items in a kb article content help guide users in navigating content.

The icons act as visual cues to help users to quickly understand the content or actions associated with each list item.

Below is an example of how an icon can be used in a KB:

Body Damage

Door dings, scrapes, scratches, loose wheel covers

Find icons:

1. Open software with images (i.e. Microsoft PowerPoint)
2. Insert > Icons
3. Type your Search term
4. Right-click on image
5. Save as picture in .jpg format to your computer

Add icon as an image to your KB article:

1. Open your KB article
2. Choose Edit Article
   1. Click on Image in toolbar
   2. Upload image into TDX
   3. Send to Server, OK

Adjust image settings:

1. Right-click to select image
2. Left-click on image and choose Image properties
3. Set the following
   1. Under ‘Image info’ tab: Constrain the ratio and then set width to 100 (or suitable size)
   2. Under 'Image info' tab: add Alt text to make web accessible
   3. Under ‘Advanced’ tab: display: inline