Guidelines for taking good screenshots for technical documentation
Resolution and file size
Take screenshots on a machine with at least a 4k or Retina monitor
Screenshots should not be larger than 200 KB, and preferably under 100 KB each. You can use TinyPNG or similar to reduce file size without reducing perceived quality
Zooming and cropping
Show a full window whenever possible - this keeps sizing consistent and helps the reader locate the correct portion of the UI to interact with
If you're focusing on a smaller area and need to add more detail, then it's OK to zoom in on a specific element by using cropping. But keep in mind that often it might be harder for the user to orient themselves when you do this.
Annotations and callouts
Use red callouts unless the content of the screenshot contains too much red for the callout to be noticed (e.g. you need to outline a button that is also red.) Then pick one other colour that contrasts well (often Black or Blue), and consistently use that one wherever Red doesn't work.
Generally use rectangles to call the readers attention to specific inputs or buttons
If showing three or more separate steps in a single screenshot, add numbered callouts (1), (2), (3), etc to indicate the order steps should be taken in
If interacting with a smaller part of the screen, add a red arrow to direct the reader's attention to the correct place in the screen
Do not use too many annotations on a single screenshot (a matter of judgement, but often around 3-4 is the maximum before the shot starts looking very messy and over crowded)
Be consistent where you put the annotations. E.g. if you are adding the numbered callouts inside and to the right of a rectangle, then try to do that for all screenshots in a project. Don't switch between adding them above/below/left/right of the thing you are indicating.
Examples
Do not leave space between a rectangle and what it is outlining. Generally 'hug' the thing you are outlining as tightly as possible.
CleanshotX-specific recommendations
If you are using CleanshotX, use the second thinnest line size for rectangles, arrows, and numbers
Gifs and videos
Gifs have problems regarding file size, but are the most portable and easiest to work with, as generally anywhere you can add an image you can also add a gif
For long gifs, use mp4 or webm instead
Generally avoid including sound in technical documentation (either system sounds, or microphone)
Combining screenshots with text
Put the text first, followed by the screenshot
Do not put two screenshots in a row without text between them
Finishing touches
Add a browser frame and background colour with a tool like BrowserFrame
Optimize the filesize with a tool like TinyPNG
Captions
Don't add captions unless there is a good reason too.
If adding captions, you should try to convey more information than is obvious. For example, don't say "A graph showing language popularity over time"; rather say "Python has grown faster in popularity than other languages".