Boost your Knowledge Base articles with visuals. Adding screenshots clarifies complex concepts and simplifies instructions, offering users a straightforward view of interface elements. This guide shows you how to incorporate images cleanly and effectively, enhancing content clarity and reader engagement.

Create screenshots on a computer or mobile device

To learn how to create screenshots for the Knowledge Base and what editing tools you can use, see How to make screenshots.

Add images and screenshots to Knowledge Base articles

Upload an image to the Media Gallery

1. Navigate to the Media Gallery.
2. On the bottom right, click the Upload button.
3. The Upload dialog box will open. Click the Browse… button to navigate through your computer's files and select the image you wish to upload.
4. After selecting your image, a dialog box will prompt you to provide a title and description for your image. Fill in these details and then click the Upload button to finalize the upload process.

Upload an image directly from the article editor

If you're actively editing an article and need to add an image, you can also upload right from the toolbar:

1. Start by either creating a new article or editing an existing one.
2. In the article editor, click the Insert Media button found on the toolbar.

   

   • This action brings up the Insert Media dialog.
3. At the bottom of the dialog that appears, select the Upload Media button to proceed.
4. In the Upload dialog box, click the Browse… button to navigate through your computer's files and select the image you wish to upload.
5. After selecting your image, a dialog box will prompt you to provide a title and description for your image. Fill in these details and then click the Upload button to finalize the upload process.

Add an image to an article

1. Start by either creating a new article or editing an existing one.
2. Locate and click the Insert Media button on the toolbar.
3. From the gallery, choose the image you wish to add, then click Insert Media to embed it into the article.

Effective use of inline images

Incorporating inline screenshots directly into KB articles enhances clarity and navigation by visually demonstrating interface elements like buttons and menus. This approach streamlines articles, making them easier to follow by reducing image and text volume, and directly guiding users through the interface with concise, relevant visuals. Guidelines for optimizing inline image integration:

• Prioritize clarity: Employ inline images to substitute textual cues with precise, visual representations. Focus on showcasing interactable elements such as menus and buttons, ensuring these images are directly relevant and facilitate quick user recognition and interaction.
• Strategic placement: Integrate screenshots next to relevant text to seamlessly blend instructions with visual guides, making it easier for users to follow along without getting lost in lengthy descriptions.
• Size matters: When selecting inline images, aim for a maximum height of 16 pixels. This ensures visuals are informative yet unobtrusive, contributing to a cleaner, more accessible layout for users navigating the content.

Effective use of images for step-by-step instructions

Embedding screenshots between sentences in KB articles visually demonstrates actions or tasks, bridging the gap between text instructions and their practical application. This approach enhances user comprehension and engagement by illustrating critical steps of a process, making articles more interactive and straightforward for readers to follow. Guidelines for optimizing image use on step-by-step instructions include:

• Selective use: Incorporate screenshots only for concepts that genuinely benefit from visual aid. Avoid overusing them to prevent clutter.
• Direct correlation: Select screenshots that are directly tied to the accompanying text, ensuring each image clearly illustrates the action or task being described.
• Logical sequence: Arrange screenshots to follow the natural progression of steps, mirroring the user’s actual experience. This chronological order supports a logical flow, facilitating a step-by-step guide that readers can easily follow.
• Accuracy is key: Ensure that the screenshots accurately depict what users will encounter on their screens. Given that appearances can vary across different operating systems, adjust your screenshots accordingly. For guidance on tailoring screenshots for Windows, Mac, and Linux users, see the How to use "For" tags guide.

Examples

Let's keep it simple!

• If you are placing an image in a line of text (inline image), it should be no taller than 16 pixels.
• If you are placing an image between two sentences in a set of steps or list (ordered or unordered), it should be set off with a semicolon. There's no need to add line breaks around images.

Markup for an inline image

This is what the wiki markup for an inline image looks like:

This is the text, followed by [[Image:The Image]], and this is the continuation of the text.

Inline image example

Here's a snippet of text. Right in the middle, we've inserted an inline image of the Firefox menu button. Following that, we've added additional text.

Markup for an image in a set of steps

This is what the wiki markup for "setting an image off with a semicolon" looks like:

# This is a step.
#;[[Image:The Image]]
# This is the next step.


Example of an image in a set of steps

This is an example with longer text and a longer image:

1. This is a step. And here are some additional words so you can see what they look like running above the image.

   

2. This is the next step, again, with extra words so you can see what they look like running below the image.

Knowledge Base guidelines

If you're interested in learning more about writing and editing Knowledge Base articles, guidelines are here.