The right image saves a paragraph of directions. The wrong one confuses readers, slows the page down and goes out of date. Here's when to use a screenshot, a GIF or a video, and how to make each one earn its place.
Pick the right format
Format | Best for | Skip it when |
|---|---|---|
Screenshot | Showing where something is, what a settings page looks like, or what the result should be | The step is obvious from the text, like "Click Save" |
GIF (a short, silent screen recording) | A short sequence of clicks, dragging something, or a menu that opens | The sequence is long or needs explaining along the way |
Video | Overviews, concepts and tours that benefit from a voice | Readers need to follow along step by step |
No image | Simple steps with clear labels | You'd only be adding an image out of habit |
When in doubt, write the steps first. Add an image only where a reader would otherwise get lost.
Make screenshots that help
Crop to the task. Show the part of the screen that matters, with enough around it (like the menu) for readers to know where they are.
Highlight one thing. Draw a box or an arrow around the button to click, in one color you use everywhere.
Keep sizes consistent. Capture at the same window size, so images look alike from article to article.
Keep words out of annotations. Labels drawn onto an image can't be searched or translated. Put explanations in the article.
Keep files small. Compress images so pages load quickly on phones.
Keep GIFs short
Aim for under 10 seconds. A GIF should show one short sequence, not a whole task.
Aim for under 5 MB. Large GIFs load slowly, especially on phones. Record a smaller window, or split the sequence in two.
Move the cursor slowly and pause on the result, so readers can see what changed.
Match the steps. If you add captions to a GIF, use the same words and labels as the numbered steps next to it.
Use video for the bigger picture
Video suits overviews and concepts, like a tour of your dashboard. Keep each video to a single topic, add captions, and put the key steps in text below it. Readers who can't play sound, or who want to skim, still get the answer.
Place and caption visuals well
Put an image right after the steps it shows, not at the top of the article.
Write a short caption that says what to notice, such as "The Export button is in the top-right corner."
Never put an instruction only in an image. Search, screen readers, translation and AI answers can't read it there.
Write alt text
Alt text is what screen readers read out in place of an image, and what shows when an image doesn't load. Describe, briefly, what the image shows for this task.
Useful: "The Invoices page, with the Export button in the top-right corner."
Not useful: "Screenshot" or "image1.png".
For a GIF, describe the sequence: "Clicking Export, choosing CSV, then clicking Start export." See Write accessible help content.
Use demo data, never real customer data
A screenshot can stay on a public page for years. Capture yours in a demo account with realistic, made-up names, email addresses and amounts. Before you publish, check the whole frame for:
Names, email addresses and phone numbers
API keys, tokens and passwords
Invoice numbers, amounts and street addresses
Browser tabs, bookmarks and notifications that popped up while you recorded
Blurring is a last resort. Demo data is safer, because nothing real is in the image to begin with.
Update visuals when your product changes
An outdated screenshot makes readers think they're in the wrong place. Keep a list of which articles show which screens, and recapture them as part of each release that changes those screens. If an image isn't worth keeping current, remove it.
A quick checklist
Each image shows something the text can't say as well.
It's cropped to the task and highlights one thing.
GIFs are short and light.
Captions and steps use the same labels.
Every image has alt text.
No real customer data appears anywhere in the frame.
It matches the current version of your product.
How HelpCenter.io helps
In the HelpCenter.io editor, you can paste or drag an image into an article, give it a caption and set its alt text, and choose whether readers can click it to zoom in. With AI writing help (Catalyst, or the AI add-on), the editor can draft alt text for you to review. To add a video, paste a YouTube, Vimeo or Loom link into a video block. See Add images to an article, Resize images and add alt text and Embed videos.
Comments
Be the first to comment.