Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://support.mozilla.org/it/kb/how-place-images-article below:

Add images and screenshots to Knowledge Base articles

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.

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

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.

Remember, the description you provide for your image will serve as alternative text (alt text) for users who rely on screen readers, enhancing accessibility and understanding of the content.

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.

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.

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.

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, macOS and Linux users, see the How to use "For" tags guide.

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.

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.

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.

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.


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.

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

These fine people helped write this article:

Grow and share your expertise with others. Answer questions and improve our knowledge base.

Learn More

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3