Images

Note: Do not overuse images in a document. Images need to be added only when the UI is not intuitive.

Naming images

• Create a meaningful file name.
• Use words separated by a hyphen as the naming convention as it is more suitable for SEO.
  • Example:
    • my-sample-image.png
• Do not add capital letters in the file name.

Capturing screenshots

• Crop images to focus on the area.
• Highlight UI elements when needed.
• Mask sensitive information in the UI.

Adding an Image

• Change the image size make use of the HTML tags.
  • Example:
    • <img src="{{base_path}}/assets/img/learn/analytics-download-page.png" width="400">
• Image format is png.
• Create a similar folder structure (if not done already) to the document location at assets/img to add the image for a particular document.
  • Example:
    • If the document that you need to add the image to is at learn/design-api/create-API, the image for the document should be added at /assets/img/learn/design-api/create-api.
• Add the image to the correct folder under assets/img.
• Refer to the image from the document in the following format
  • Format:
  • Example:
    • [![Newly added resource]({{base_path}}/assets/img/learn/newly-added-resource.jpg)]({{base_path}}/assets/img/learn/newly-added-resource.jpg)
    • Note: {{base_path}} is used in the file path.
• To add an image inside a table, write the table in HTML and use HTML tags to include the image.
  • Example:
    • <td><img alt="Unseen source IP alert" src="{{base_path}}/assets/img/learn/alerts-unseen-source-ip.png" /> </td>

Adding ALT tags to images

It is a good practice to add ALT tags to every image to help those who are visually impaired and are using screen readers because the screen reader will read the ALT tag and describe to the user what the image is showing. This is especially important if you're using a screenshot in a procedure and telling the user to configure the screen as shown in the image, instead of textually listing each option they should set.

Tips for the ALT tags

• Create ALT tags with a good description of what the image/topic represents. (For example, if it's a screenshot, you would say "The Foo screen showing the Bar option selected and the name set to XYZ".)
• Don’t use the same keyword in all images of an article
• Don’t repeat a keyword in an ALT tag
• Keep tags between 5 and 15 words
• Optimize the storage space to be as small as possible