Elevate your Knowledge Base contributions with the power of visuals. Learn how to effectively integrate images into your articles, providing users with a clearer understanding of interface elements and instructions, all while keeping the layout clean and reader-friendly. '''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 or in a list (ordered or unordered), it should be set off with a semicolon. There's no need to add line breaks around images. __TOC__ =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 effectively using inline images include: *'''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. =Images for a set of steps= 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 effectively using inline images include: *'''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. *'''Strategic use:''' Employ screenshots to complement and reinforce the text without overshadowing it. Strike a careful balance to prevent the article from becoming visually overwhelming. =Examples= ==Markup for an inline image== This is what the [[Markup chart|wiki markup]] for an inline image looks like:<br><br> <code> <nowiki>This is the text, followed by [[Image:The Image]], and this is the continuation of the text.</nowiki> </code> ==Inline image example== Here's a snippet of text. Right in the middle, we've inserted an inline image [[Image:Menu hamburguer button]] 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 [[Markup chart|wiki markup]] for "setting an image off with a semicolon" looks like:<br><br> <code> <nowiki>#</nowiki> This is a step.<br> <nowiki>#;</nowiki><nowiki>[[</nowiki>Image:The Image<nowiki>]]</nowiki><br> <nowiki>#</nowiki> This is the next step.<br> </code> ==Example of an image in a set of steps== This is an example with longer text and a longer image: # This is a step. And here are some additional words so you can see what they look like running above the image. #;[[Image:Protection panel|width=400]] # 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 [https://support.mozilla.org/en-US/products/contributor/kb here].

Elevate your Knowledge Base contributions with the power of visuals. Learn how to effectively integrate images into your articles, providing users with a clearer understanding of interface elements and instructions, all while keeping the layout clean and reader-friendly.

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 or in a list (ordered or unordered), it should be set off with a semicolon. There's no need to add line breaks around images.

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 effectively using inline images include:

• 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.

Images for a set of steps

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 effectively using inline images include:

• 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.
• Strategic use: Employ screenshots to complement and reinforce the text without overshadowing it. Strike a careful balance to prevent the article from becoming visually overwhelming.

Examples

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.