Adding Images

Images help readers follow along visually. This article explains how to add a screenshot or any image to an article.

---

Step 1 — Get the Image File

Take your screenshot or prepare your image file. Supported file types are:

• .png — best for screenshots
• .jpg / .jpeg — best for photos
• .gif — for short animated clips
• .webp — modern format, smaller file size

---

Step 2 — Add the File to the Project

Place your image file in the following folder:

apps/help/public/images/

If this folder does not exist yet, ask a developer to create it, or create it yourself — it is just a regular folder.

Name your file using lowercase letters and hyphens, no spaces:

dashboard-inventory-tab.png     ✓ Good
Dashboard Inventory Tab.png     ✗ Bad

---

Step 3 — Reference It in Your Article

In your .mdx file, use this syntax to display the image:

![A description of the image](/images/your-filename.png)

• The text inside [ ] is the alt text — a short description of the image for screen readers and accessibility. Always include it.
• The path inside ( ) starts with /images/ followed by your filename.

Example:

![The Inventory tab on the C2 Vault dashboard](/images/dashboard-inventory-tab.png)

---

Tips for Good Screenshots

• Crop tightly — show only the relevant part of the screen, not the entire browser window.
• Use a consistent window size — screenshots look more uniform when taken at the same browser width.
• Avoid sensitive data — do not capture real patient names, real medication records, or any private pharmacy information.
• Use a clean state — clear any test data or placeholder content before taking the screenshot.

---

Need Help?

If you are unsure where to put the image file or it is not showing up, ask a developer to help you verify the file path.